文章目录
- 【01】添加评论系统
- 【02】添加字数统计和阅读时长
- 【03】添加网站运行时间
- 【04】添加百度统计
- 【05】添加RSS订阅
- 【06】添加 Fork me on GitHub 效果
- 【07】更改本地预览端口号
-
【01】添加评论系统
主流的评论系统有很多，比如：网易云跟帖、多说、友言、畅言、来必力（LiveRe）、Disqus、Valine、Gitalk 等等，目前网易云跟帖、多说、友言都已经关闭了，还有些可能国内还访问不了，比较麻烦，百度了一下，最后还是选择了来必力评论系统
进入来必力官网，注册一个账号：
注册完毕之后，登录，进入安装页面，选择 City 免费版安装，安装之后你会得到一段代码
我们打开主题文件下的 _config.yml 文件，添加如下代码：
在 \themes\hexo-theme-spfk\layout\_partial\comments 文件夹下新建一个 livere.ejs 的文件，在里面填写来必力提供的代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<!-- 来必力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];
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> LivereTower <span class="token operator">===</span> <span class="token string">'function'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
j <span class="token operator">=</span> d<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span>
j<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">'https://cdn-city.livere.com/js/embed.dist.js'</span><span class="token punctuation">;</span>
j<span class="token punctuation">.</span><span class="token keyword">async</span> <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
e<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>j<span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>document<span class="token punctuation">,</span> <span class="token string">'script'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</span>noscript<span class="token operator">></span>为正常使用来必力评论功能请激活JavaScript<span class="token operator"><</span><span class="token operator">/</span>noscript<span class="token operator">></span>
</div>
<!– City版安装代码已完成 –>打开 \themes\hexo-theme-spfk\layout\_partial\article.ejs 文件，在适当位置添加如下红框中的代码：
完成以上操作之后，我们就可以使用来必力评论系统了
另外推荐使用 Valine 评论系统，和 gitalk 评论系统
【02】添加字数统计和阅读时长
先在博客目录下执行以下命令安装 hexo-wordcount 插件：
$ npm i --save hexo-wordcount注意：在 Material X 主题中，字数统计和阅读时长的功能我已提交 PR，在最新版本中，只需要安装插件后，在主题
config.yml配置文件里，将word_count关键字设置为true即可，对于旧版本，可以通过以下方法实现：以 Material X 主题（版本 1.2.1）为例，在 \themes\material-x\layout\_meta 目录下创建 word.ejs 文件，在 word.ejs 文件中写入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<% if(isPostList || !isPostList){ %>
<% if (theme.word_count && !post.no_word_count) { %>
<div style="margin-right: 10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard"></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>
<% } %>
<% } %>然后在主题的配置文件 _config.yml 找到 meta 关键字，将 word 填入 header 中：
meta: header: [title, author, date, categories, tags, counter, word, top] footer: [updated, share]最后在主题目录下的 _config.yml 添加以下配置即可
word_count: true效果图：
同样的，以 spfk 主题为例，在 \themes\hexo-theme-spfk\layout\_partial\post 目录下创建 word.ejs 文件，在 word.ejs 文件中写入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<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>然后在 \themes\hexo-theme-spfk\layout\_partial\article.ejs 中适当位置添加以下代码：
最后在主题目录下的 _config.yml 添加以下配置即可
word_count: true如果显示的位置不好，可以自行更改其位置，成功配置后的效果如下：
另外：要在博客底部显示所有文章的总字数，可以点击此处，根据你博客底部文件的类型选择相应的代码放在适当的位置即可，前提是要安装好 hexo-wordcount 插件，例如我使用 Material X 主题，在 \themes\material-x\layout\_partial 目录下的 footer.ejs 文件中添加如下代码：
1
2<i class="fas fa-chart-area"></i>
<span class="post-count">字数统计：<%= totalcount(site) %></span>实现效果如下：
【03】添加网站运行时间
一个比较好的小功能，可以看见自己的博客运行多久了，时间一天天的增加，成就感也会一天天增加的
在 \themes\hexo-theme-spfk\layout\_partial\footer.ejs 文件下添加以下代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("12/14/2019 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>最后效果如下：
【04】添加百度统计
百度统计是百度推出的一款免费的专业网站流量分析工具，能够告诉用户访客是如何找到并浏览用户的网站，在网站上做了些什么，非常有趣，接下来我们把百度统计添加到自己博客当中
访问百度统计首页，注册一个账号后登陆，添加你的博客网站
接着点击代码获取，复制该代码
然后到目录 \themes\hexo-theme-spfk\layout\_partial 下新建一个 baidu-analytics.ejs 文件，里面粘贴你刚刚复制的代码
修改主题文件夹下的 _config.yml 文件，将你的key（图中涂掉部分）填写进去：
所有操作完成后可以在百度统计管理页面检查代码是否安装成功，如果代码安装正确，一般20分钟后，可以查看网站分析数据
另外推荐：友盟，2010年4月在北京成立，安全、可靠、公正、第三方的网站流量统计分析系统
【05】添加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订阅功能添加完成
【06】添加 Fork me on GitHub 效果
效果图：
点击此处可以查看更多样式，将相应样式的代码复制到你想要放的地方就OK了，代码里的链接也要替换成你的，更多创意，比如 Follow me on CSDN ，只需要用PS改掉图片里的文字，替换掉相应链接即可
【07】更改本地预览端口号
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命令来指定端口，这种方法只是本次执行有效
- 本文作者： 生活,生活?
- 本文链接： ayjcsgm.github.io/2019/12/14/在Hexo-个人博客上添加实用功能/
- 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！