为Hexo NexT主题添加字数统计功能

安装 hexo-wordcount 插件

首先在博客目录下使用 npm 安装插件:

1
npm install hexo-wordcount --save

修改配置文件

为了方便地开启和关闭字数统计功能,我们需要在配置文件(站点配置文件或主题配置文件均可)中添加一个键值对:

1
2
3
4
5
# 开启字数统计
word_count: true

# 关闭字数统计
# word_count: false

修改主题 swig 布局

修改 post.swig

为了能在文章信息处显示字数,我们需要修改 themes/next/layout/_macro/post.swig,在 class 为 post-mata 的 div 中的添加如下内容:

1
2
3
4
5
6
7
8
{% if theme.word_count %}
<span class="post-letters-count">
&nbsp; | &nbsp;
<span>{{ wordcount(post.content) }} 字</span>
&nbsp; | &nbsp;
<span>{{ min2read(post.content) }} min</span>
</span>
{% endif %}

想要在页面底部网站信息处显示字数统计,就要修改 themes/next/layout/_macro/post.swig ,在文件的最后添加如下内容:

1
2
3
4
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">共{{ totalcount(site) }}字</span>
</div>

修改 CSS 以实现移动端隐藏字数统计

对于移动端尤其是手机来说,加上字数统计和阅读时间预估后的文章信息显得过于冗长,在稍微小一些的屏幕上甚至会分两行显示。

而如果我们仔细观察会发现,使用 Hexo NexT 主题的站点如果开启了评论,那么文章信息处的评论数只会在大尺寸屏幕上显示,在小尺寸屏幕上会直接隐藏掉,这显然是利用了 CSS 的 @media 来适配不同尺寸屏幕,因此我们只需要取巧地在原主题地 CSS 的 @media 中完成隐藏 .post-letters-count 这个类就可以达成我们的目的。

修改位于 themes/next/source/css/_common/components/post 目录下的 post-collapse.styl 文件,在文件前几行找到 @media 并修改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
@media (max-width: 767px) {
.post-letters-count { display: none;}

.posts-collapse {
margin: 0 20px;

.post-title, .post-meta {
display: block;
width: auto;
text-align: left;
}
}
}

后记

至此我们就成功地为 Hexo NexT 主题添加了字数统计功能。对于其他主题尤其是并非使用 swig 模板引擎的主题,可以参照插件的 sample 进行修改:https://www.npmjs.com/package/hexo-wordcount

本文由 Eason Yang 创作,采用署名 4.0 国际(CC BY 4.0)创作共享协议进行许可,详细声明

Buy me a cup of coffee.