给 Hexo 主题添加动态背景

一步一步来。

修改 _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就能看到效果了。

这里的代码主要参照：距离，特此感谢！

未经允许不得转载：技术啦 - 关注IT,建站和运维,分享最新教程,资源 » 给 Hexo 主题添加动态背景