给 Hexo 主题添加动态背景

给 Hexo 主题添加动态背景

Published
Published April 20, 2017
Author
Dukewill
一步一步来。 #### 修改 _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就能看到效果了。
这里的代码主要参照:距离,特此感谢!
最后,欢迎来 Telegram 交流:https://t.me/daiseax
Enjoy!
 
💡
本文采用 CC BY-NC-SA 4.0 许可协议,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者:Dukewill 来源:blog.daisea.com