给网页加上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是刚学的,代码肯定还能再优化。但是,这又不是不能用,总比手动快多了,手动滑稽~