Hexo教程5-nest效果背景图

偶然间看到了大神博客的炫酷的背景图，自己也想加上。

参考另一个大神的博客：
https://www.jianshu.com/p/447d9b40c623
背景的几何线条是采用的nest效果，一个基于html5 canvas绘制的网页背景效果，非常赞！来自github的开源项目canvas-nest。

特性

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

  不足

  CPU占用过高。可以看看你现在的CPU使用率，占用挺高的。优化方法是减少线条的总数量，但是效果会有点折扣。

  使用方法

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

    {% if theme.canvas_nest %}
           
           {% endif %}
   

2. 修改主题配置文件
   打开/next/_config.yml，添加以下代码

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

配置项

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

next主题本来就包括nest背景效果

突然发现，如果Next版本是5.1.1以上的版本，next主题的配置文件中本来就包含nest背景效果，只需打开就可以了。在next文件夹下的_config.yml文件中。

# Canvas-nest
canvas_nest: true

但是只是这么改，背景并没有覆盖文章。