【个人博客搭建之路】第1话——next主题博客添加canvas_nest动画背景

发表于 更新于 分类于 阅读次数：
本文字数： 1.6k 阅读时长 ≈ 1 分钟

背景

关于Hexo Next主题添加canvas_nest动画背景网上有很教程，但是他们的第一个条件我就没满足——将next/_config.yml中的canvas_nest改为true，而我的_config.yml中压根没这一项，而且我的hexo和next版本都是很新的，所以看着这些教程感觉很无奈，为啥别人默认都有这一项，难道我安装了个假next？
不过我还没有放弃，终于让我在github中找到解决办法，而且非常简单。

安装

第一步 → 转到Hexo的根目录

在source/_data下创建footer.swig文件（如果没有_data文件夹，可以用mkdir _data创建）。

1
2
# 也可以用其他方法创建文件
$ vim footer.swig

将下面的内容拷到文件中:

1
<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>

你可以自己设置这些参数，其中的src里是用的online的版本，其他很多教程是在本地安装canvas-nest。

第三步 → 完成设置

现在转到NexT根目录，打开_config.yml，找到custom_file_path，去掉footer的注释即可完成设置（我的_config.yml中本来footer的值为source/_data/footer.njk，我没动它，直接加上footer: source/_data/footer.swig）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

下面只要重新生成网页即可看到效果。

1
2
3
$ hexo clean
$ hexo g
$ hexo s

可以去我的博客看看效果：洋仔小窝。我喜欢黑色背景，所以修改了上面scripts中的color参数为"255,255,255"，为了更加明显，还将不透明度opacity改为1.0以及数目count改为了150。

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