安装 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”>
|
<span>{{ wordcount(post.content) }} 字</span>
|
<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 主题添加了字数统计功能。
GDCA一直以“构建网络信任体系，服务现代数字生活”的宗旨，致力于提供全球化的数字证书认证服务。其自主品牌——信鉴易®TrustAUTH® SSL证书系列，为涉足互联网的企业打造更安全的生态环境，建立更具公信力的企业网站形象。
