最近从网上看到很多博客都有一个动态的多边形连线背景,觉得很好看,正好觉得自己的博客背景太单调,于是研究了下,方法如下。

修改主题文件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>
<% } %>

背景配置项