Hexo Next 添加 canvas-nest 特效

发表于 更新于 上层目录 阅读次数：

环境信息

  • os: linux 3.10.0-1160.62.1.el7.x86_64 CentOS Linux 7 (Core)
  • hexo: 6.2.0
  • hexo-cli: 4.3.0
  • node: 16.16.0
  • Next 8.12.2

安装 canvas-nest

参考 canva-nest 官网 安装

npm
npm install --save canvas-nest.js

可选操作，主要是为了生成 canvas-nest.js 文件

配置 Next

编辑 next配置文件，新增以下配置

_config.next.yml
# background settings
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: 
  enable: true 
  url: https://s.csms.tech/js/canvas-nest.js
  color: 0,0,255
  opacity: 0.7
  zIndex: -2
  count: 99

引入 canvas-nest.js

编辑文件 themes/next/layout/_layout.njk, 在</body> 之前新增以下内容

themes/next/layout/_layout.njk
{% if theme.canvas_nest.enable %}
  <script type="text/javascript" color="{{ theme.canvas_nest.color }}" opacity='{{ theme.canvas_nest.opacity }}' zIndex="{{ theme.canvas_nest.zIndex }}" count="{{ theme.canvas_nest.count }}" src="{{ theme.canvas_nest.url }}">
  </script>
{% endif %}