最近从网上看到很多博客都有一个动态的多边形连线背景,觉得很好看,正好觉得自己的博客背景太单调,于是研究了下,方法如下。
修改主题文件layout.ejs
打开material/layout/layout.ejs,在body后面添加代码
<% if (theme.canvas_nest) { %>
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
<% } %>
修改主题配置文件
打开material/_config.yml,添加如下代码
# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true
OK,搞定!重新生成预览hexo s -g,打开localhost:4000就可以看见效果了
如果对效果不满意,可以修改背景配置项
<% if (theme.canvas_nest) { %>
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
<% } %>
背景配置项
- color: 线条颜色, 默认: ‘0,0,0’;三个数字分别为(R,G,B)
- opacity: 线条透明度(0~1), 默认: 0.5
- count: 线条的总数量, 默认: 150
- zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1

