Hexo博客NexT主题添加theme-next-canvas-nest几何动效

安装 NexT Canvas Nest 几何动效

步骤 1: 进入 Hexo 目录

首先，通过命令行进入你的 Hexo 项目目录。在这个目录下，你应该能看到 scaffolds、source、themes 等文件夹以及 _config.yml 和 package.json 文件。

$ cd hexo
$ ls
# 应显示：scaffolds  source  themes  _config.yml  package.json

步骤 2: 创建 footer.swig 文件

接下来，在 hexo/source/_data 目录下创建一个名为 footer.swig 的文件（如果 _data 目录不存在，请先创建它）。

编辑 footer.swig 文件，并添加以下代码来引入 Canvas Nest 的几何动效脚本：

<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>

你可以根据自己的喜好调整 color（颜色）、opacity（透明度）、zIndex（层叠顺序）和 count（粒子数量）等参数。

步骤 3: 配置 NexT 主题

最后，在 NexT 主题的 _config.yml 文件中，找到 custom_file_path 部分，并取消注释 footer 选项，以便 Hexo 能够加载你自定义的 footer.swig 文件。

# 定义自定义文件路径
# 在站点目录 `source/_data` 中创建你的自定义文件，并取消注释下面需要的文件
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  footer: source/_data/footer.swig  # 取消注释此行
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

完成以上步骤后，你的 Hexo 博客应该已经成功添加了 NexT Canvas Nest 的几何动效。如果你想要进一步优化或调整动效，可以回到 footer.swig 文件中修改相应的参数。