自定义 canvas_nest 背景动画

前言

NexT 官方的 canvas_nest 背景动画，只能设置显示或者不显示，本文基于 NexT 主题自定义 canvas-nest 效果。

开始修改

官方给出的设置：在主题配置文件修改

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

先给 canvas_nest 添加几个参数，修改后如下

# 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: 255,0,204
  opacity: 0.5
  zindex: -2
  count: 80

然后找到主题文件夹的 /layout/_scripts/vendors.swig 文件，先找到 canvas_ribbon ，修改 if 的条件为 enable

{% if theme.canvas_nest.enable %}
  {% set js_vendors.canvas_nest  = 'canvas-nest/canvas-nest.min.js' %}
{% endif %}

然后在下面的循环里添加个 if 把我们需要的参数写进去，代码如下:

{% 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 %}

保存后大功告成。