next主题博客添加canvas_nest动画背景

闲来无太多事，上午用很短的时间给公司的项目改了一个bug，就开始研究如何让自己的博客更漂亮哈哈哈。其实是因为最近研究dva经常瓶颈期，很苦恼orz，所以找个简单的活儿，给自己一点儿小成就感吧。
今天先给博客加了一个访客量统计，然后加了一个评论，加了一个搜索栏，完善了categories页面，修改了页面永久链接，设置404公益页面，修改站点建立时间，配置canvas_nest动画背景，最后自称一枚会敲代码的小仙女哈哈哈~

canvas_nest 动态背景

先附上Github地址：https://github.com/hustcc/canvas-nest.js
之前以为是国外的人写的，结果翻了一下作者的Github，阿里的大神辣。
再附上中文的readme，具体介绍可自行翻阅。

修改主题配置文件

打开/next/_config.yml，搜索 canvas_nest，设置值为true。

1
2
3

# canvas_nest
canvas_nest: true //开启动画
canvas_nest: false //关闭动画

修改_layout.swig

打开next/layout/_layout.swig，在</body>之前添加如下代码。

1
2
3

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

请注意不要将代码置于<head></head>里面。

配置项

color：线条颜色, 默认: ‘0,0,0’ ；三个数字分别为(R,G,B)，注意用,分割
opacity：线条透明度（0～1），默认：0.5
count：线条的总数量，默认150
zIndex：背景的z-index属性，css属性用于控制所在层的位置，默认：－1
所以，大家可以根据自己的喜好配置～
访客量统计
为NexT主题添加文章阅读量统计功能
我就是在看这个博客的时候觉得背景不错，就给自己加了一个哈哈哈。

添加评论系统

看了一下next官方教程提到的几个，前两个Disqus和Facebook的都被墙了，无语凝噎😓
所以直接pass了这两个选项，选了HyperComments这个，详细教程在这里。
大家可以根据自己的喜好在官网配置评论模块。
如过需要取消某个页面/文章的评论，在 md 文件的 front-matter 中增加 comments: false即可。

搜索栏

选择了最简单的local search

安装`hexo-generator-searchdb`

1	npm install hexo-generator-searchdb --save

编辑站点配置文件

打开_config.yml，新增以下内容到任意位置：

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

编辑主题配置文件

打开/next/_config.yml，新增以下内容到任意位置：

1 2	local_search: enable: true

结语

要下班辣！还有一些简单的配置项，就不细说辣，或者等有时间了再来补哈哈哈。
详细问题可以看hexo官方文档
 next官方文档