给网页加上js特效 - 让网页动起来
前言
刚搭建好的博客网页背景一片惨白，死气沉沉毫无生机，所以就想着给网站加个动态背景什么的，翻了好久，终于在GitHub上找了个可与鼠标互动的js特效：canvas-nest.js。使用起来也很简单，只需要在html代码<body></body>标签里面加入一行<script>代码就行了。
但是，网站只有一两个html页面的话手动添加还可以，如果网站有几十个甚至上百个html页面，而且Hexo框架generate后的文件夹很多，想找到这些html文件还得一个个翻文件夹，手动的话岂不得累死？！！！
我去GitHub上canvas-nest项目下看了下，只有一个wordpress的插件，并没有hexo插件，hexo插件库里好像也没有添加外部js代码的插件。
Hexo官方文档倒是有一句话：如果您的代码很简单，建议您编写脚本，您只需要把 JavaScript 文件放到 scripts 文件夹，在启动时就会自动载入。我试过了，载入的时候会报错，没办法，只好自己写了个shell脚本（Git for Win支持执行Shell脚本），所以就有了这篇文章。
实现原理
很简单，先找出hexo generate后存放html文件夹下（public文件夹）的所有html文件路径，然后给这些html文件执行添加js代码命令。
每次执行hexo g都会重新生成html文件，所以不用担心会重复添加的问题。
shell代码
简单版：
需要先执行hexo g生成静态网页，
再执行shell添加js代码，
再执行hexo d部署到github。
echo "+++++++++++++++ 开始添加js代码 +++++++++++++++"
find public/ -name index.html > add-js.log
addJs() {
sed -i '/<\/body>/i\<script type="text/javascript" color="63,81,181" opacity='0.7' zIndex="-1" count="180" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"><\/script>' $1
}
cat add-js.log | while read line
do
addJs $line
echo "add success -> $line"
done
echo "+++++++++++++++ 添加js代码完毕 +++++++++++++++"懒人版：
只不过是把hexo g和hexo d包含进来了而已…
一个脚本搞定所有~
echo "++++++++++++ 开始执行{hexo g}命令 ++++++++++++"
hexo g
echo "+++++++++++++++ 开始添加js代码 +++++++++++++++"
find public/ -name index.html > add-js.log
addJs() {
sed -i '/<\/body>/i\<script type="text/javascript" color="63,81,181" opacity='0.7' zIndex="-1" count="180" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"><\/script>' $1
}
cat add-js.log | while read line
do
addJs $line
echo "add success -> $line"
done
echo "+++++++++++++++ 添加js代码完毕 +++++++++++++++"
echo "++++++++++++ 开始执行{hexo d}命令 ++++++++++++"
hexo d 2>/dev/null使用方法
复制shell代码，在你的blog目录下新建一个add-js.sh
文件，编辑该文件（编码格式设为UTF-8），将刚刚复制的代码粘贴进去，保存。
至于<script></script>标签里面的参数含义，可以去GitHub项目canvas-nest.js上了解详细信息。
写完文章以后，
简单版：
先执行：hexo g
再执行：./add-js.sh
最后执行：hexo d
懒人版：
直接执行：./add-js.sh
shell执行完毕后会在当前文件夹生成一个add-js.log文件，里面存放的是public目录下所有index.html的路径。
控制台会也输出哪些文件被修改了：
搞定！！！
另外，我这Linux Shell是刚学的，代码肯定还能再优化。但是，这又不是不能用，总比手动快多了，手动滑稽~