给 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 的那部分代码。多尝试，并不难。

配置项说明

1
2
3
4
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就能看到效果了。

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

最后，欢迎来 Telegram 交流：https://t.me/daiseax

Enjoy!

给 Hexo 主题添加动态背景

https://blog.daisea.com/dynamic-background/

本文作者：

Dukewill

发布于

2017-04-20

许可协议

CC BY-NC-SA 4.0

转载或引用本文时请遵守许可协议，注明出处，不得用于商业用途！

教程 # 教程 # 主题 # Hexo # themes

给 Hexo 主题添加动态背景

修改 _layout.ejs

配置项说明

修改配置文件

评论