Hexo-next主题如何添加动态背景

駝駱仧2024-06-272024-07-27

安装依赖

1 2	# 使用 npm npm install --save canvas-nest.js

设置

修改_layout.njk，路径在\blog\zhangzz\themes\next\layout文件夹内

在< /body>之前添加以下代码

1
2
3

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

修改配置文件

根目录打开_config.next.yml，在里面添加如下代码：(可以放在最后面)

# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

然后运行以下代码看效果看效果

1	hexo clean && hexo g && hexo s

如果感觉线条太细，可以按以下改粗一些

把_layout.njk里的以下代码

1
2
3

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

改为

{% 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>
{% endif %}

然后再运行以下代码看效果看效果