给博客深色模式下添加粒子效果canvas,深色模式下,总感觉背景有点单调,也考虑过添加背景图,还是太花了,看到别站深色模式好似夜间有流星划过,感觉这就是我想要的效果,果断整上。
魔改步骤
第一步主题中添加配置项(butterfly.yml)
# 深色模式粒子效果
darkCanvas:
enable: true
第二步引入js(additional-js.pug)
//- 黑色模式粒子效果canvas
if theme.universe.enable
canvas(id="universe")
script(async src="/mx/js/dark.js")
第三步添加dark.js文件
管理员已设置登录后刷新可查看
第四步添加css
[data-theme="dark"] #universe {
display: block;
position: fixed;
margin: 0;
padding: 0;
border: 0;
outline: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
canvas#universe {
display: none;
}