Hexo的NexT主题自定义canvas_nest属性
自定义NexT主题canva_nest属性：color，opacity，count，zIndex
本文内容大部分来自参考链接。
操作步骤
打开NexT主题的配置文件 _config.yml，找到 canvas_nest 属性进行修改，结果如下：
1
2
3
4
5
6
7
8
9
10
11
12# Canvas-nest
#enable: true 使用
#color: 线条颜色, 默认: 0,0,0 ；三个数字分别为(R,G,B)，注意用,分割
#opacity: 线条透明度（0~1）, 默认: 0.5
#count: 线条的总数量, 默认: 150
#zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1
canvas_nest:
enable: true
color: 20,40,255
opacity: 0.5
count: 100
zIndex: -2打开NexT的主题文件夹next下 layout/_scripts/vendors.swig 文件，文件中有两处需要改动：
(1) 找到描述 canvas_nest 的部分，将其改为 enable，修改后如下：
1
2
3{% if theme.canvas_nest.enable %}
{% set js_vendors.canvas_nest = 'canvas-nest/canvas-nest.min.js' %}
{% endif %}(2) 找到 for name, internal in js_vendors 循环，将我们刚刚在主题的配置文件中添加的 canvas_nest 的参数添加到循环中，结果如下：
1
2
3
4
5
6
7
8
9
10
11
12{% for name, internal in js_vendors %}
{% set internal_script = url_for(theme.vendors._internal) + '/' + internal %}
{% if name == 'canvas_ribbon' %}
<script id="ribbon" type="text/javascript" size="{{ theme.canvas_ribbon.size }}" alpha="{{ theme.canvas_ribbon.alpha }}" zIndex="{{theme.canvas_ribbon.zIndex }}" src="{{ theme.vendors[name] | default(internal_script) }}"></script>
{% else %}
{% if name == 'canvas_nest' %}
<script type="text/javascript" color="{{ theme.canvas_nest.color }}" opacity="{{ theme.canvas_nest.opacity }}" zindex="{{ theme.canvas_nest.zindex }}" count="{{ theme.canvas_nest.count }}" src="{{ theme.vendors[name] | default(internal_script) }}"></script>
{% else %}
<script type="text/javascript" src="{{ theme.vendors[name] | default(internal_script) }}"></script>
{% endif %}
{% endif %}
{% endfor %}