使用hexo的next主题如何添加动态背景

在网上有很多教程,但在使用的过程中发现教程都有缺陷,对于非专业人员来说并不能很好的使用。于是就打算自己写一下,其实蛮简单的。

修改主题配置文件

如果不想自定义设置下一个步骤的配置项,只需要做这一步操作
文件地址:blog/theme/next/_config.yml
将文件中的canvas_nest: false为canvas_nest: true即可。

修改_layout.swig文件

文件地址:blog/themes/next/layout/_layout.swig
在 < /body>之前添加代码(注意不要放在< /head>的后面):

1
2
3
{% if theme.canvas_nest %}
<script type="text/javascript" color="0,0,0" opacity='0.5' zIndex="-1" count="150" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

这些代码的输入有格式要求,具体如图1
配置项说明
color :线条颜色, 默认: ‘0,0,0’;三个数字分别为(R,G,B)
opacity: 线条透明度(0~1), 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1
配置项可以根据自身喜好自由设置