主题

next是现在算是最火的主题吧。
直接clone并在项目配置中改动theme条目来使用。

1 2	$ cd your-hexo-site $ git clone https://github.com/iissnan/hexo-theme-next themes/next

改变壁纸

参见这里
改变 hemes\next\source\css _custom\custom.styl
增加以下代码：

// Custom styles.
body {
    background:url(https://source.unsplash.com/random/1920x1080);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

.main-inner { 
    margin-top: 60px;
    padding: 60px 60px 60px 60px;
    background: #fff;
    opacity: 0.95;
    min-height: 500px;
}

主页文章折叠

详见这里。
编辑themes/next/_config.yml，找到auto_excerpt并更改为true。

更改顶端一排的icon

找到next主题配置文件中menu:一项，在||符号右边的就是icon的名字。

icon的图片是next直接从FontAwesome读取的，直接配置名称就可以了。

更改顶端icon颜色

默认的是灰色的#555，继承于全局a的css样式（a代表超链接），全局搜索之后发现名字叫做black-light，再搜索该名称发现被base.styl的link-color使用。由于这个英文就代表着链接，所以就应该是改这里了。

改成black-deep颜色之后发现颜色正常，清晰。
更改之后的样子

注意deploy之后可能会发现外观没有变化，那是以为css样式文件被缓存了，清除网页缓存就可以了。

更改顶端brand配色

搜索得到类名.brand，颜色在site-meta中为brand-bg，修改这个颜色即可。

移动端缩小页边距

打开themes\next\source\css_schemes\Pisces_layout.styl 修改.content-wrap 中+mobile()中的padding为0.
打开themes\next\source\css_schemes\Muse_layout.styl 在+mobile()中加入

1	{padding: 0px}

添加目录页

详见这里

插件

LaTex插件

一个显示公式的插件，公式的语法和插件的安装详见该网站。

输入技巧

输入图片

首先要在项目的config文件里边把post_asset_folder改成true。

1	post_asset_folder: true

然后当你生成一片新的文章的时候，就会在_post文件夹多生成同名的文件夹。然后就可以往里面放图片。
插入图片的时候，一般md语法是使用

1	![图片描述](图片相对地址，不加/)

但是这个方法不能让图片在主页中显示。如果想要图片也在主页显示，需要用hexo插件语法（该语法在3.0以上已被集成）。

1	{% asset_img 图片路径 This is an image %}

这样子就可以在主页也显示出来图片了。

接入评论系统

听说gitalk最好，所以接入gitalk。
首先参考以下两篇文章：
文章一
 文章二

这两篇文章分别有问题和矛盾的地方，建议先跟着第一篇做，然后根据文章二修改next主题中关于gitalk的配置。文章一中的gitalk配置是不全的，会造成gitalk.swig在构建var gitalk = new Gitalk()的过程中产生语法问题，导致无法正确渲染div内容。

文章二中在index.swig中加入.gt-container a{border-bottom: none;}这个操作不需要，改成：

1	{% include 'gitalk.swig' %}

可能出现的问题

另外一个问题是评论上方可能会出现Error: i.concat(...).join is not a function字样的报错，修复方式参考这里：修改gitalk.swig

1	labels: '{{ theme.gitalk.labels }}'.split(',').filter(l => l),

Error: Validation Failed
详见这里。

原理

为了方便我们不太懂前端的同学理解，说起来就是：

在网页的底端插入一个id为gitalk-container的div
gitalk会根据参数来创建一个Gitalk对象，然后传入div的名称，渲染该div

接入访问统计

参见这里
原理是申请了一个免费数据库，每次访问的时候通过js脚本把次数加一。