hexo-wordcount实现文章标题栏显示更多的文章信息(精)

发表于   |   分类于   |   阅读次数   |   字数统计: 2,093(字)   |   阅读时长: 12(分)

摘要

本文介绍Hexo一款插件hexo-wordcount，让你的文章标题位置更加富含信息，本插件可以为文章标题位置添加，文章字数，文章预计阅读时间。

HEXO-建站系列
HEXO-优化系列
HEXO-进阶系列

正文

实现过程

  1. 安装hexo-wordcount插件
  2. 配置themes\next\layout\_macro\post.swig

安装WORDCOUNT

1
npm install hexo-wordcount --save

通过以上安装后，你可以在你的模板文件后者.md文件加入以下相关的标签实现本插件的功能
字数统计:WordCount
阅读时长预计:Min2Read
总字数统计: TotalCount

相关代码

字数统计

1
<span class="post-count">{{ wordcount(post.content) }}</span>

阅读时长预计

1
<span class="post-count">{{ min2read(post.content) }}</span>

总字数统计

1
<span class="post-count">{{ totalcount(site, '0,0.0a') }}</span>

小结

你可以把以上代码放到你显示相关统计的Post页面，实现文章的信息显示，如果你希望在标题栏显示相关文章信息，继续阅读本章！

文章标题栏

本部分带你学会如何在每个文章的标题栏，显示相关文章的信息，我们这主要设置的是文章字数、文章阅读时长

修改post.swig模板
模板位置：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
34
         {# 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>
#以上部分为：字数统计、阅读时长插入代码

总结

通过以上操作，你可以为你的文章标题添加更多的相关信息。

结语

如果你还需要了解更多技术文章信息，请继续关注Jory博客

看一看，共同关注，共同分享与讨论！