给网页加上js特效 - 让网页动起来

Author Avatar
山小杰 8月 12, 2017
  • 在其它设备中阅读本文章

前言

刚搭建好的博客网页背景一片惨白,死气沉沉毫无生机,所以就想着给网站加个动态背景什么的,翻了好久,终于在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 ghexo 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是刚学的,代码肯定还能再优化。但是,这又不是不能用,总比手动快多了,手动滑稽~