![d6e06763d147c21b204fbca049b3a509.png](https://i-blog.csdnimg.cn/blog_migrate/687ca303bfb82fb9d433854667335877.jpeg)
本文在CSDN上的链接: https:// blog.csdn.net/qq_367592 24/article/details/85010191
本文在我博客上的链接: https://www. itrhx.com/2018/08/27/A0 4-Hexo-blog-topic-personalization/
推荐阅读:《Hexo 博客美化合集(不断更新)》
PS:移步到我博客可查看到最新文章!
Hexo 博客交流群:924812033
本文将讲述一些Hexo博客实用功能的添加,不同主题可能方法有些不同(本文以作者 luuman 的 spfk 主题和作者 xaoxuu 的 Material X 主题为例)实际效果欢迎访问我的博客: https://www.itrhx.com/ 进行查看,本文章会不定时进行更新。文章涉及有关参考资料、教程、链接如有侵权请联系我删除!
● 添加评论系统
主流的评论系统有很多,比如:网易云跟帖、多说、友言、畅言、来必力(LiveRe)、Disqus、Valine、Gitment等等,目前网易云跟帖、多说、友言都已经关闭了,还有些可能需要翻墙,比较麻烦,百度了一下,最后还是选择了来必力评论系统
进入来必力官网,注册一个账号(注册时可能需要翻墙)
![b74a2301d05b7d33a72638ced5367364.png](https://i-blog.csdnimg.cn/blog_migrate/3752c0bf8572ea473d9cfc571bb574c4.jpeg)
注册完毕之后,登录,进入安装页面,选择 City 免费版安装,安装之后你会得到一段代码
![b14ea113f9a67b1a0fad415555e8e62f.png](https://i-blog.csdnimg.cn/blog_migrate/2ad25773e5e32fd187725f83b9a58211.jpeg)
![e2d65095cd7a82c7bb6f0f4f47e2d1bf.png](https://i-blog.csdnimg.cn/blog_migrate/84cee069bab247aff59caf71c1408f84.jpeg)
![7ae73ea2d3169028ebffa1d7c46e13c1.png](https://i-blog.csdnimg.cn/blog_migrate/37632494538282461f69c9399e0c4104.jpeg)
我们打开主题文件下的 _config.yml 文件,添加如下代码:
![4cb7f7077b3f92551a54e6099fe5cd8c.png](https://i-blog.csdnimg.cn/blog_migrate/f11dba2ead28a80470aee7581500d9f2.png)
在 themeshexo-theme-spfklayout_partialcomments 文件夹下新建一个 livere.ejs 的文件,在里面填写来必力提供的代码:
<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="这里是你的uid">
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->
打开 themeshexo-theme-spfklayout_partialarticle.ejs 文件,在适当位置添加如下红框中的代码:
![5b81d2d293a39cb2f94d116656dcd620.png](https://i-blog.csdnimg.cn/blog_migrate/c6219bb4bd09bab700501423d4fb1101.jpeg)
完成以上操作之后,我们就可以使用来必力评论系统了
![0508e2fb3fb7f8658e39265855125e0d.png](https://i-blog.csdnimg.cn/blog_migrate/e98952a699a1f72a617913a302366526.jpeg)
另外推荐使用Valine评论系统
● 添加字数统计和阅读时长
先在博客目录下执行以下命令安装 hexo-wordcount 插件:
$ npm i --save hexo-wordcount
之后在 themeshexo-theme-spfklayout_partialpost 目录下创建 word.ejs 文件,在 word.ejs 文件中写入以下代码:
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count"><%= wordcount(post.content) %>字</span>
</span>
</span>
<span class="post-time">
|
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count"><%= min2read(post.content) %>分</span>
</span>
</span>
</div>
然后在 themeshexo-theme-spfklayout_partialarticle.ejs 中适当位置添加以下代码:
![5c8c53330432dede4b1007459afac70f.png](https://i-blog.csdnimg.cn/blog_migrate/257fe38e1b5a1fdb3fa78fa722d51427.jpeg)
最后在主题目录下的 _config.yml 添加以下配置
word_count: true
如果显示的位置不好,可以自行更改其位置,成功配置后的效果如下:
![921da5bfced175c0ab2361822208cf0a.png](https://i-blog.csdnimg.cn/blog_migrate/1e18ec633cf46982590721331203f874.jpeg)
![67e648f23c64b6e372ed8d947223af0e.png](https://i-blog.csdnimg.cn/blog_migrate/45307c3118f389df195ace90666e7416.png)
另外:要在博客底部显示所有文章的总字数,可以点击此处,根据你博客底部文件的类型选择相应的代码放在适当的位置即可,前提是要安装好 hexo-wordcount 插件,例如我使用 Material X 主题,在 themesmaterial-xlayout_partial 目录下的 footer.ejs 文件中添加如下代码:
<i class="fas fa-chart-area"></i>
<span class="post-count">字数统计:<%= totalcount(site) %></span>
实现效果如下:
![56aab7037a715c4833715bc2ecba8a91.png](https://i-blog.csdnimg.cn/blog_migrate/706321f988f57d0774851cb1c754ece3.jpeg)
● 添加网站运行时间
一个比较好的小功能,可以看见自己的博客运行多久了,时间一天天的增加,成就感也会一天天增加的 在 themeshexo-theme-spfklayout_partialfooter.ejs 文件下添加以下代码:
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("08/10/2018 17:38:00");//在此处修改你的建站时间
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>
最后效果如下:
![be6db65b12d586ed9816a7de385e8f80.png](https://i-blog.csdnimg.cn/blog_migrate/2f681169ed1f849448c257a6102723e3.png)
● 添加百度统计
百度统计是百度推出的一款免费的专业网站流量分析工具,能够告诉用户访客是如何找到并浏览用户的网站,在网站上做了些什么,非常有趣,接下来我们把百度统计添加到自己博客当中
访问百度统计首页,注册一个账号后登陆,添加你的博客网站
![a923a932a356099ac6f6827c49fe36d0.png](https://i-blog.csdnimg.cn/blog_migrate/d2d6c3bc483fe03911f79dccd2624453.jpeg)
接着点击代码获取,复制该代码
![8f7181708d7a61c7a9f72fdf8e329f7a.png](https://i-blog.csdnimg.cn/blog_migrate/0f06331a15b8796a868502402d632622.jpeg)
然后到目录 Hexothemeshexo-theme-spfklayout_partial 下新建一个 baidu-analytics.ejs 文件,里面粘贴你刚刚复制的代码
![54d3bf7dc33612a4aaf7e62072247414.png](https://i-blog.csdnimg.cn/blog_migrate/7f147ae9e04c4929fa11ad2f60a58674.jpeg)
修改主题文件夹下的 _config.yml 文件,将你的key(图中涂掉部分)填写进去:
![066ac58328a7277427394427ab69c046.png](https://i-blog.csdnimg.cn/blog_migrate/00addfdd53064cc0bc0fa063e1469377.png)
所有操作完成后可以在百度统计管理页面检查代码是否安装成功,如果代码安装正确,一般20分钟后,可以查看网站分析数据
![8e34d37bd9fba5ca8a29f071a0efdffc.png](https://i-blog.csdnimg.cn/blog_migrate/dfe47f569c8a56d6b096b85d69629e96.jpeg)
另外推荐:友盟,2010年4月在北京成立,安全、可靠、公正、第三方的网站流量统计分析系统
● 添加RSS订阅
RSS订阅是站点用来和其他站点之间共享内容的一种简易方式,即Really Simple Syndication(简易信息聚合),如果不会使用,可以参见百度百科:https://baike.baidu.com/item/RSS%E8%AE%A2%E9%98%85/663114 ;首先我们安装feed插件,在本地hexo目录下右键Git Bash Here
,输入以下命令:
$ npm install hexo-generator-feed
等待安装完成后,打开hexo目录下的配置文件 _config.yml,在末尾添加以下配置:
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
随后打开主题配置文件 _config.yml,添加以下配置:
rss: /atom.xml
至此,RSS订阅功能添加完成
● 添加 Fork me on GitHub 效果
效果图:
![2ee81a3fd52a62f878406a67cc04b53a.png](https://i-blog.csdnimg.cn/blog_migrate/30bfef301428b92a531ba13ab538c521.jpeg)
点击此处可以查看更多样式,将相应样式的代码复制到你想要放的地方就OK了,代码里的链接也要替换成你的,更多创意,比如 Follow me on CSDN ,只需要用PS改掉图片里的文字,替换掉相应链接即可
● 更改本地预览端口号
hexo博客在执行hexo s
进行本地预览的时候,默认端口号是4000,当该端口号被占用时会报错 Error: listen EADDRINUSE 0.0.0.0:4000
,此时可以关闭占用该端口的进程,也可以更换端口号,更换端口号可以通过以下两种方法实现:
方法一:在根目录的_config.yml
配置文件内加上如下代码更改hexo s
运行时的端口号:
server:
port: 5000
compress: true
header: true
方法二:通过 hexo server -p 5000
命令来指定端口