Fork me on GitHub

Hexo博客之文章计数实现

添加文章计数功能,实现文章数字统计、阅读时长统计功能

安装插件

使用hexo-wordcount来实现以上功能.

1
$ npm install hexo-wordcount --save

实现以下功能:

  • 字数统计 WordCount
  • 阅读时长预计 Min2Read
  • 阅读速度 Set Reading Speed
  • 总字数统计 TotalCount

配置

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

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

但是调试过程中发现wordcount,min2read项设置true后,生成页面报错,最后参考其他资料自定义添加了该功能。
修改themes\next\layout_macro\post.swig模板,插入的代码以下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
         {# LeanCould PageView #}
{% if theme.leancloud_visitors.enable %}
<span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
<span class="post-meta-item-text">{{__('post.visitors')}} </span>
<span class="leancloud-visitors-count"></span>
</span>
{% endif %}

# 以下部分为:字数统计、阅读时长插入代码
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">字数统计:</span>
<span class="post-count">{{ wordcount(post.content) }}(字)</span>

</span>

<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">阅读时长:</span>
<span class="post-count">{{ min2read(post.content) }}(分)</span>

</span>
# 以上部分为:字数统计、阅读时长插入代码

效果展示

======================================================
希望各位朋友支持一下

本文作者:dongsheng
本文地址https://mds1455975151.github.io/archives/437f9945.html
版权声明:转载请注明出处!

坚持技术分享,您的支持将鼓励我继续创作!