安装 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证书系列,为涉足互联网的企业打造更安全的生态环境,建立更具公信力的企业网站形象。