为next主题添加nest背景特效

效果请看我的主页http://jinfang.life
看到评论留言有人问到我的背景是怎么做的，关于这个，我已经将代码提交到github了，还是写文解答一下吧。

背景的几何线条是采用的nest效果，一个基于html5 canvas绘制的网页背景效果，非常赞！来自github的开源项目canvas-nest,

特性

• 不依赖任何框架或者内库，比如不依赖jQuery，使用原生的javascript。
• 非常小，只有1.66kb，如果开启gzip，可以更小。
• 非常容易实现，配置简单，即使你不是web开发者，也能简单搞定。

使用

使用非常简单，感觉都没有必要写这一节内容。

将下面的代码插入到 和 之间.

强烈建议在 标签上方. 例如下面的代码结构:

    ...


    ...
    ...
    ...
    

请注意不要将代码置于 里面.

然后就完成了，打开网页即可看到效果!

配置和配置项

• color: 线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
• opacity: 线条透明度（0~1）, 默认: 0.5
• count: 线条的总数量, 默认: 150
• zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

Example:

这些属性配置在引用js的script标签中，作为它的一个属性值。所有的配置项都有默认值，如果你不知道怎么设置，可以先不设置这些配置项，就使用默认值看看效果也可以的。

不足

CPU占用过高

可以看看你现在的Cpu使用率，我的一般在30%左右，占用挺高的。

优化方法是减少线条的总数量，但是效果会有点折扣，我使用的是默认的配置。

与next集成

我的方式比较暴力一点，github上面有位兄弟有更加优雅的方式。

修改_layout.swig

打开next/layout/_layout.swig
在之前添加如下代码

{% if theme.canvas_nest %}

{% endif %}

修改主题配置文件

打开/next/_config.yml，添加以下代码

# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------

# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

至此，大功告成，运行hexo clean 和 hexo g hexo s之后就可以看到效果了。