使用Hexo+Github搭建自己的博客（小技巧）

动态背景

目前NexT主题最新的是V6.0版本，这个版本中可以有4种动态背景：

• Canvas-nest
• three_waves
• canvas_lines
• canvas_sphere

设置方法也很简单，直接设置里需要的动态背景为true。

1
2
3
4
5
6
7
8
9
10
11

# Canvas-nest
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: true

# canvas_sphere
canvas_sphere: false

文章底部带#号的标签

去掉文章后面的标签前面的#号。

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将#换成<i class="fa fa-tag"></i>

在每篇文章末尾统一添加“本文结束”标记

在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

1
2
3
4
5
6
7
8
9

<div>
{% if not is_index %}
    <div style="text-align:center;color: #ccc;font-size:14px;">
        -------------本文结束
        <i class="fa fa-paw"></i>
        感谢您的阅读-------------
    </div>
{% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， 添加以下代码：

1
2
3
4
5

<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

然后打开主题配置文件_config.yml,在末尾添加：

1
2
3

# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

完成以上设置之后，在每篇文章之后都会添加如上效果图的样子。

侧边栏社交小图标设置

打开主题配置文件_config.yml，搜索social:, ||之后是在图标库中对应的图标。注意空格就行。

图标库链接：http://fontawesome.io/icons/

主页文章加阴影

打开\themes\next\source\css\_custom\custom.styl,向里面加入：

1
2
3
4
5
6
7
8

// 主页文章添加阴影效果
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

添加热度

next主题集成leanCloud，打开/themes/next/layout/_macro/post.swig

在<span class="leancloud-visitors-count"></span>下添加一句：

1

<span>℃</span>

然后打开，/themes/next/languages/zh-Hans.yml

将visitors: 阅读次数改为visitors: 热度

设置网站图标

默认的网站图标是一个N，当然是需要制定一个图了，在网上找到图后，将其放在/themes/next/source/images里面，然后在主题配置文件中修改下图所示图片位置

还有一些就不详细说了，另外注意下好多的东西已经过时了。比如next主题已经换了域了。很多教程还停留在3.0时代，但是现在next的版本是V6.0，截止我这篇教程发布的时期。

总结

这篇文章就只是简单的介绍了下NexT主题，关于这个主题呢，要达到个性化定制的话，还是需要再花点功夫的。还有就是这个hexo s预览效果确实不好，修改了网站内容之后，需要重新hexo clean再hexo s才能看到效果，有同样问题的兄dei就不需要担心自己的修改是错的。