本文将讲述一些博客主题的美化、实用功能的添加,不同主题可能方法有些不同(本文以作者 luuman 的 spfk 主题为例)
– 添加评论系统
主流的评论系统有很多,比如:网易云跟帖、多说、友言、畅言、来必力(LiveRe)、Disqus、Valine、Gitment等等,目前网易云跟帖、多说、友言都已经关闭了,还有些可能需要翻墙,比较麻烦,百度了一下,最后还是选择了来必力评论系统
进入来必力官网,注册一个账号(注册时可能需要翻墙)
注册完毕之后,登录,进入安装页面,选择 City 免费版安装,安装之后你会得到一段代码
我们打开主题文件下的 _config.yml 文件,添加如下代码:
在 \themes\hexo-theme-spfk\layout\_partial\comments 文件夹下新建一个 livere.ejs 的文件,在里面填写来必力提供的代码:
1 | <!-- 来必力City版安装代码 --> |
打开 \themes\hexo-theme-spfk\layout\_partial\article.ejs 文件,在适当位置添加如下红框中的代码:
完成以上操作之后,我们就可以使用来必力评论系统了
– 添加卡通人物
我在逛别人博客的时候偶然发现右下角居然有一个萌萌的卡通人物,还能根据你鼠标位置摇头,瞬间被吸引到了,赶紧也给自己博客添加一个吧!点击此处进入该项目地址
输入如下命令获取 live2d :
1 | npm install --save hexo-helper-live2d |
输入以下命令,下载相应的模型,将 packagename 更换成模型名称即可,更多模型选择请点击此处,各个模型的预览请访问原作者的博客
1 | npm install packagename |
打开站点目录下的 _config.yml 文件,添加如下代码:
1 | live2d: |
设置好过后我们就拥有了一个卡通人物
– 添加鼠标点击爱心效果
在 /themes/hexo-theme-spfk/source/js 下新建文件 love.js,在 love.js 文件中添加以下代码:
1 | !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 500%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document); |
在 \themes\hexo-theme-spfk-x\layout\layout.ejs 文件末尾添加以下代码:
1 | <!-- 页面点击小红心 --> |
完成以上操作后,当我们点击鼠标的时候就可以看见爱心的特效了
– 添加字数统计和阅读时长
先在博客目录下执行以下命令安装 hexo-wordcount 插件:
1 | npm i --save hexo-wordcount |
之后在 \themes\hexo-theme-spfk-x\layout\_partial\post 目录下创建 word.ejs 文件,在 word.ejs 文件中写入以下代码:
1 | <div style="margin-top:10px;"> |
然后在 \themes\hexo-theme-spfk-x\layout\_partial\article.ejs 中适当位置添加以下代码:
最后在主题目录下的 _config.yml 添加以下配置
1 | word_count: true |
如果显示的位置不好,可以自行更改其位置,成功配置后的效果如下:
– 添加背景音乐
打开网页版网易云音乐,选择你准备添加的背景音乐,点击生成外链播放器,前提是要有版权,不然是无法生成外链播放器的,复制底下的HTML代码
然后将此代码放到你想要放的地方,比如放在博客的左侧,则打开 \themes\hexo-theme-spfk-x\layout\_partial\left-col.ejs 文件,将复制的HTML代码粘贴进去,再进行适当的位置设置让播放器更美观,其中 auto=1 表示打开网页自动播放音乐,auto=0 表示关闭自动播放音乐
最后效果如下:
– 添加网站运行时间
一个比较好的小功能,可以看见自己的博客运行多久了,时间一天天的增加,成就感也会一天天增加的
在 \themes\hexo-theme-spfk-x\layout\_partial\footer.ejs 文件下添加以下代码:
1 | <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span> |
最后效果如下:
– 添加百度统计
百度统计是百度推出的一款免费的专业网站流量分析工具,能够告诉用户访客是如何找到并浏览用户的网站,在网站上做了些什么,非常有趣,接下来我们把百度统计添加到自己博客当中
访问百度统计首页,注册一个账号后登陆,添加你的博客网站
接着点击代码获取,复制该代码
然后到目录 \Hexo\themes\hexo-theme-spfk\layout\_partial 下新建一个 baidu-analytics.ejs 文件,里面粘贴你刚刚复制的代码
修改主题文件夹下的 _config.yml 文件,将你的key(图中涂掉部分)填写进去:
所有操作完成后可以在百度统计管理页面检查代码是否安装成功,如果代码安装正确,一般20分钟后,可以查看网站分析数据
– 浏览器网页标题恶搞
当用户访问你的博客时点击到了其他网页,我们可以恶搞一下网页标题,呼唤用户回来,首先在目录 \Hexo\themes\hexo-theme-spfk\source\js 下新建一个 FunnyTitle.js 文件,在里面填写如下代码:
1 | <!--浏览器搞笑标题--> |
然后在 \Hexo\themes\hexo-theme-spfk-x\layout\layout.ejs 文件中添加如下代码:
1 | <!--浏览器搞笑标题--> |
再次部署博客后就可以看见标题搞笑的效果了:
# 未完待续…… #