hexo美化

都自己搞了一个网站写博客，肯定希望塞点花里胡哨的东西到自己的个人博客里面。这里给出我个人用的主题next（简约用的人多教程多debug简单，玩的花）
给出下载链接

1	git clone https://github.com/next-theme/hexo-theme-next themes/next

然后塞到这个里面

在你网站的_config.yaml里面修改一下主题

注意:这里的主题名字要和你塞到theme下面的文件夹名称一样
然后就是

1
2
3

hexo clean
hexo g
hexo s

本地看看没有问题就可以传到你的github上面了

1
2
3

hexo clean
hexo g
hexo d

个人信息设置

点开主站得config文件

个人头像设置

这里得图片我有点没太搞懂要怎么传，所以我采用图床得方式在github建立一个专门放照片得仓库之后将图片上传，而且也方便markdown文件里面文件得上传，可以看我另外一篇博客

新建标签及分类界面

打开主题配置文件，搜索 menu，找到如下代码：

然后点开我们的站点的Source，新键一下这些文件夹

新建一下index.md

就完成了创建

添加浏览进度

打开 themes/next/_config.yml，搜索关键字 scrollpercent，把 false改为 true。
效果图如下：

本地搜索

安装插件hexo-generator-searchdb,执行以下命令:

1	npm install hexo-generator-searchdb --save

修改hexo/_config.yml站点配置文件，新增以下内容到任意位置：

search:
path: search.xml
field: post
format: html
limit: 10000

编辑主题配置文件，启用本地搜索功能：

1
2
3

# Local search
local_search:
enable: true

效果图：

设置网站图标

主题的_config.yaml中找到

把你的图像传上去，效果如下

添加近期文章功能

（适用于8.x）
在主站的source中创建_data文件夹一定是主站的source不是主题的source
在这个文件夹下创建sidebar.njk文件，格式如下：

输入以下代码

<!-- recent posts -->
{%- if theme.recent_posts %}
    <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
        <div class="links-of-blogroll-title recent-posts-title">
	    <i class="fa fa-history {{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
            {{ theme.recent_posts_title }}
	</div>
	<ul class="links-of-blogroll-list recent-posts-list">
	    {%- set posts = site.posts.sort('-date').toArray() %}
	    {%- for post in posts.slice('0', '5') %}
	        <li class="my-links-of-blogroll-item">
		    <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="">
		    {{ post.title }}
		    </a>
		</li>
	    {%- endfor %}
	</ul>
    </div>
{%- endif %}

然后点开主题搜索custom_file_path
把sidebar这块解除注释

然后输入以下代码

1
2
3

recent_posts: true
recent_posts_title: 近期文章
recent_posts_layout: block

成果图：

看板娘可说话可互动

下载大佬项目项目，解压到本地博客目录的themes/next/source下，修改文件夹名为 `live2d-widget`，修改项目中的 `autoload.js` 文件，如下：

1
2
3

const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
改为
const live2d_path = "/live2d-widget/";

在/themes/next/layout/_layout.swing中,新增如下内容：

1	<script src="/live2d-widget/autoload.js"></script>

在 主题配置文件 中,新增如下内容：

1 2	live2d: enable: true

想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css

自定义看板娘模型

看板娘github
文件如下:

然后下载一下live2d_api的项目live2d_api下载到本地
建议拉到主题的source文件夹下方便项目上传

点开model_list.yaml里面如下：

models里面放的是模型的路径
message里面放的是打招呼
然后打开model文件夹如下

里面存放的就是你的模型

-motion里面放的是人物的动作
jpg文件是人物的贴图
找到其中的某个json文件一般是model.json命名的打开如下

将这个json的名字改成index.json

在api文件夹下打开cmd

如果有使用过npm镜像请先关闭

输入命令登录

1 2	npm adduser

按照提示输入邮箱和密码

查看一下是否登录成功

1 2	npm whoami

如果提示网络错误可以设置代理

1
2
3

npm config set proxy http://127.0.0.1:port
npm config set https-proxy http://127.0.0.1:port

修改package.json的信息并发布

先初始化
1
2
npm init

修改api文件夹中的package.json的信息，将几处都换成你自己的链接
发布资源(会比较久，看大小和网速)

1
2
npm publish --public

通过CDN或unpkg访问

一般上传到npm后基本能立刻通过CDN访问到(可以在浏览器打开查看)，但是不能超过100MB，格式如下(gcore的访问速度更好一点)
1
2
3
https://unpkg.com/资源名@版本/
https://fastly.jsdelivr.net/npm/资源名@版本/
https://gcore.jsdelivr.net/npm/资源名@版本/

unpkg也可以使用，就是收录速度实在太慢了，还经常内部的文件夹打不开，不过它确实能加载更大的项目，格式如下(饿了么的源好一点)

1
2
3

https://npm.elemecdn.com/资源名@版本/
https://unpkg.com/资源名@版本/

打开你的livewd-wight文件夹下的autoload.js文件

将你的cdnpath替换成上面的建议用gcore比较快。

修改加载特效

由于网页不可能一直都秒进，总会等待一段时间的，所以可以设置顶部加载条。Next 已经集成了很多加载特效，可以在下面选项中在线调试测试一下。
搜索pace，找到如下代码

Valine评论区功能

网不好之后单独出一期

RSS订阅功能

首先先安装一下RSS feed插件

1	npm install hexo-generator-feed --save

编辑文件themes/next/_config.yml，在Sidebar Settings部分的最后添加以下设置

sidebar_rss:
  text: RSS
  icon: fa fa-rss
  color: burlywood
  link: atom.xml

然后打开themes/next/layout/_partials/sidebar/site-overview.swig在最下面插入

{%- if theme.sidebar_rss %}
  <div class="">
    <a target="_blank" class="social-link" href="{{ url_for(theme.sidebar_rss.link) }}" style="color: {{ theme.sidebar_rss.color }};">
      <span class="icon">
        <i class="{{ theme.sidebar_rss.icon }}"></i>
      </span>
      <span class="label">{{ theme.sidebar_rss.text }}</span>
    </a>
  </div>
{%- endif %}

效果图

鼠标点击红心特效

在 /themes/hexo-theme-spfk/source/js 下新建文件 love.js，在 love.js 文件中添加以下代码：

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 500%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在 \themes\hexo-theme-spfk\layout\layout.swig 文件末尾添加以下代码：

1 2	<!-- 页面点击小红心 --> <script type="text/javascript" src="/js/love.js"></script>

鼠标点击字体特效

在 /themes/hexo-theme-spfk/source/js 下新建文件 click_show_text.js，在 click_show_text.js 文件中添加以下代码：

var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array
        ("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 5,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#FF0000"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
            3000,
            function() {
                $i.remove();
            });
    });
    setTimeout('delay()', 2000);
});

function delay() {
    $(".buryit").removeAttr("onclick");
}

在 \themes\hexo-theme-spfk\layout\layout.swig 文件末尾添加以下代码：

1 2	<!--单击显示文字--> <script type="text/javascript" src="/js/click_show_text.js"></script>

背景添加

可以在 themes/next/source/css/_schemes/Gemini/index.styl 中添加的代码（在最后添加即可），muse是我的 next 的布局样式（next默认是muse，在muse的index.styl添加也有同样的效果）。

body {

    background:url(/images/background.jpg);

    background-repeat: no-repeat;

    background-attachment:fixed; //不重复

    background-size: cover;      //填充

    background-position:50% 50%;

}

搜索框等透明化设置添加到刚刚的下面就可以

body{				//修改主体字体颜色
  color: #000;		//纯黑
}
.posts-expand .post-title-link {	//标题颜色
    color: #000;				//首页文章标题颜色， （默认为灰辨识度不高）
}
.posts-expand .post-meta-container {	//标题下的日期颜色
    color: #880000;				//此处修改为红色,可自行调用rgb调色
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.9;
}

.header-inner {		//菜单栏的调色
  background: rgba(255,255,255,0.5);
}

.popup {		//搜索框透明
  opacity: 0.8;
}

.main-inner { 	//整个主体的透明度
   opacity: 0.8;
}

背景不够透明怎么办，百度搜索在线图像透明化从根本解决烦恼

代码块mac美化

在主题的config.yml找到，codeblock设置即可

代码云

命令行安装一下

1 2	npm install hexo-tag-cloud@^2.0.* --save

在主题文件theme/next/layout/_macro/sidebar.swig添加下方代码

{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
<div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
        <canvas width="250" height="250" id="resCanvas" style="width=100%">
            {{ list_tags() }}
        </canvas>
    </div>
</div>
{% endif %}

如下图所示

在主站的config.yml下添加配置

tag_cloud:
    textFont: Trebuchet MS, Helvetica
    textColor: '#e06767'
    textHeight: 20
    outlineColor: '#E2E1D1'
    maxSpeed: 0.1

最后的结果是在侧边栏（我之前以为是在标签页结果搞了好久…）

彩色标签云

在/themes/next/layout/目录下，新增tag-color.swig文件，加入下方代码：

<script type="text/javascript">
     var alltags = document.getElementsByClassName('tag-cloud-tags');
     var tags = alltags[0].getElementsByTagName('a');
     for (var i = tags.length - 1; i >= 0; i--) {
       var r=Math.floor(Math.random()*75+130);
       var g=Math.floor(Math.random()*75+100);
       var b=Math.floor(Math.random()*75+80);
       tags[i].style.background = "rgb("+r+","+g+","+b+")";
     }
</script>

<style>
  .tag-cloud-tags{
    /*font-family: Helvetica, Tahoma, Arial;*/
    /*font-weight: 100;*/
    text-align: center;
    counter-reset: tags;
  }
  .tag-cloud-tags a{
    border-radius: 6px;
    padding-right: 5px;
    padding-left: 5px;
    margin: 8px 5px 0px 0px;
  }
  .tag-cloud-tags a:before{
    content: "?";
  }

  .tag-cloud-tags a:hover{
     box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
     transform: scale(1.1);
     /*box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);*/
     transition-duration: 0.15s;
  }
</style>

在/themes/next/layout/page.swig/中引入tag-color.swig：
在下方加上 {% include 'tag-color.swig' %} 代码

<div class="tag-cloud">
         <!--    <div class="tag-cloud-title">
               {{ _p('counter.tag_cloud', site.tags.length) }}
           </div>  -->
            <div class="tag-cloud-tags" id="tags">
		  {{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#FFF', end_color: '#FFF'}) }}            
	  </div>
	</div>
    {% include 'tag-color.swig' %}

效果图

标签放到首页

在路径：/themes/next/layout/index.swig 中{% block content %}下面添加下方代码

{% block content %}

	<div class="tag-cloud">
	  <div class="tag-cloud-tags" id="tags">
		{{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#fff', end_color: '#fff'}) }}
	  </div>
	</div>
	<br>
	
	{% include 'tag-color.swig' %}