一步一步来。

修改 _layout.ejs

打开 themes/主题名称/layout/_layout.ejs
在 < /body>之前添加代码(不要放在< /head>后)。

<% if (theme.canvas_nest) { %>
<script type="text/javascript"
color="0,0,0" opacity='0.4' zIndex="-2" count="66" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
<% } %>

以上代码格式并不绝对,可以参照自己所用主题的 _layout 中有 if 的那部分代码。多尝试,并不难。

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

修改配置文件

打开themes/主题名称/_config.yml,随意找一行,添加代码:

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

然后运行hexo s,在浏览器的地址栏输入localhost:4000就能看到效果了。

这里的代码主要参照:距离,特此感谢!

Enjoy!

声明:iSky|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 给 Hexo 主题添加动态背景


秉造物者之赐