Hexo集成WordCount插件

简介

Hexo WordCount是Hexo的文章字数统计插件。

安装

1
2
$ cd hexo-blog
$ npm i --save hexo-wordcount

note:

使用

需要在三个位置显示插件

  1. 首页每个文章文章名下方(文章字数,阅读用时)
  2. 文章详情页文章名下方(文章字数,阅读用时)
    upload successful
  3. 所有页面页脚(博客文章总字数)
    upload successful

在主题对应的代码处添加如下代码
html代码

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
//文章字数,阅读用时
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="far fa-keyboard"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count"><%= wordcount(post.content) %>字&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
</span>
</span>
<span class="post-time">
<span class="post-meta-item-icon">
<i class="far fa-clock"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count"><%= min2read(post.content) %></span>
</span>
</span>
</div>
//博客文章总字数
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="far fa-keyboard"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count"><%= wordcount(site) %>字&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
</span>
</span>
</div>

jade代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//文章字数,阅读用时
div(style='margin-top:10px;')
span.post-time
span.post-meta-item-icon
i.far.fa-keyboard
span.post-meta-item-text 字数统计:
span.post-count= wordcount(item.content)
span.post-meta-item-text 字&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
span.post-time
span.post-meta-item-icon
i.far.fa-clock
span.post-meta-item-text 阅读时长:
span.post-count= min2read(item.content)
span.post-meta-item-text 分
//博客文章总字数
div(style='margin-top:10px;')
span.post-time
span.post-meta-item-icon
i.far.fa-keyboard
span.post-meta-item-text 字数统计:
span.post-count= totalcount(site)
span.post-meta-item-text 字

以apollo主题为例
apollo/layout/mixins/post.jade中对应位置添加jade代码,实现

  1. 首页每个文章文章名下方(文章字数,阅读用时)
  2. 文章详情页文章名下方 (文章字数,阅读用时)

apollo/layout/partial/copyright.jade中对应位置添加jade代码,实现

  1. 所有页面页脚(博客文章总字数)

引入Font Awesome

插件使用了Font Awesome,所以需要在所有显示插件的html页面中添加如下代码
upload successful

1
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

以apollo主题为例
apollo/layout/partial/head.jade中对应位置添加jade代码

1
link(rel='stylesheet', href='https://use.fontawesome.com/releases/v5.1.0/css/all.css')