修改Hexo非NexT主题添加字数统计和阅读时长

这些年我一直提醒自己一件事情,千万不要自己感动自己。大部分人看似的努力,不过是愚蠢导致的。什么熬夜看书到天亮,连续几天只睡几小时,多久没放假了,如果这些东西也值得夸耀,那么富士康流水线上任何一个人都比你努力多了。人难免天生有自怜的情绪,唯有时刻保持清醒,才能看清真正的价值在哪里。

——《我们这一代人的困惑》中/于宙

安装Hexo-WordCount

1
2
# 在部落格根目录下
npm install hexo-wordcount --save

配置Hexo-WordCount

NexT主题配置(已集成)

NexT主题默认已经集成了文章字数统计阅读时长统计功能,如果我们需要使用,只需要在主题配置文件 _config.yml 中打开 wordcount 统计功能即可。

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: true
separated_meta: true

非NexT主题配置(手动修改)

但是如果你的next版本过低或者你使用的hexo主题并没有集成该功能,那么你需要自己添加。我以我个人使用的这个hexo主题为例进行说明(该主题不是基于next主题)。

首先确认使用中的主题采用的哪种模板引擎,ejs or jade or swig。打开目录 xxx.github.io/themes/xxx/layout/_partial 查看文件扩展名即可。

对于如上三种模板引擎调用方式分别如下所示:

Swig

1
2
3
4
5
6
7
8
# Post Count:
<span class="post-count">{{ wordcount(post.content) }}</span>

# Post Minutes to Read:
<span class="post-count">{{ min2read(post.content) }}</span>

# Total Count:
<span class="post-count">{{ totalcount(site) }}</span>

Ejs

Post Count:

1
2
3
4
5
6
7
8
# Post Count:
<span class="post-count"><%= wordcount(post.content) %></span>

# Post Minutes to Read:
<span class="post-count"><%= min2read(post.content) %></span>

# Total Count:
<span class="post-count"><%= totalcount(site) %></span>

Jade

1
2
3
4
5
6
7
8
# Post Count:
span.post-count= wordcount(post.content)

# Post Minutes to Read:
span.post-count= min2read(post.content)

# Total Count:
span.post-count= totalcount(site)

找到post对应的文件,我的是article.ejs,内容如下:

1
2
3
4
5
<% if (!index){ %>
<span id="busuanzi_container_page_pv">
累计阅读次数<span id="busuanzi_value_page_pv"></span>
</span>
<% } %>

修改为

1
2
3
4
5
6
7
8
9
10
11
<% if (!index){ %>
<span id="busuanzi_container_page_pv">
| 阅读次数<span id="busuanzi_value_page_pv"></span>
</span>
<span class="post-count">
| 字数统计<%= wordcount(post.content) %>
</span>
<span class="post-count">
| 阅读时长~<%= min2read(post.content) %>分钟 |
</span>
<% } %>

效果展示

Reference

  1. NexT主题 https://theme-next.iissnan.com/
  2. Hexo添加字数统计、阅读时长功能 https://www.bingyublog.com/2019/02/21/hexo%E6%B7%BB%E5%8A%A0%E5%AD%97%E6%95%B0%E7%BB%9F%E8%AE%A1%E3%80%81%E9%98%85%E8%AF%BB%E6%97%B6%E9%95%BF%E5%8A%9F%E8%83%BD/