在Snippet主题中添加字数统计

1.前言

　　这篇博文的前提是大家已经配置好了自己的Hexo博客，而且大家对Hexo博客搭建的命令行有了一定的了解。

　　本文讲的会比较简洁，因为插件的教程也很简单。

2.寻找插件并安装

　　Hexo框架的官网上不仅有各种主题，还有各类插件以增强博客网站的功能。

　　进入Hexo的插件页面，Plugins | Hexo，插件很多，界面如下图所示。

　　搜索插件 hexo-wordcount 。可以在他们的搜索框中搜索，还可以在浏览器中按 Ctrl+F 组合键寻找。点击链接就可以进入插件的Github页面了，一般开发插件的人都会在里面写一个Readmd.md作为插件的使用文档。

　　不想花功夫寻找这个插件的，可以点旁边的这个链接。【GitHub - willin/hexo-wordcount: A Word Count Plugin for Hexo】

**安装**

　　（以我自己习惯为例，不一定非得按他们的教程来）

　　进入你的博客主目录，例如我的是 C:\blogs\ 。单击鼠标右键，选择 Git Bash Here ，在弹出的命令行窗口中输入以下命令行。

1	cnpm install hexo-wordcount

　　使用 cnpm 是为了使用国内的源，这样安装速度更快一些。至于如何使用 cnpm ，可以参考整个“博客搭建教程”系列。

　　安装成功之后，你的博客目录中 node_modules 文件夹会显示刚刚装好的插件。我的路径是 C:\blogs\node_modules 。已经安装的插件如下图红色方框所示。

3.插入代码

　　【GitHub - willin/hexo-wordcount: A Word Count Plugin for Hexo】

　　这个链接包含的教程里，请看到里边的 Demo 小节，有三种网站文件分别为 Swig 、 Ejs 、 Jade 。还是以我的博客主目录为例，进入主题文件夹的布局目录 layout ，我的是 C:\blogs\themes\snippet\layout，如下图所示。

　　其它的目录里也是ejs文件，说明我这个Snippet主题需要使用教程里的Ejs代码，如下。

1
2
3

<span class="post-count"><%= wordcount(post.content) %></span>
<span class="post-count"><%= min2read(post.content) %></span>
<span class="post-count"><%= totalcount(site) %></span>

　　这3行分别表示当前文章的字数、阅读时长（单位：分钟）和全站所有文章的字数。

　　如果要更改阅读速度，可以把 min2read 表达式改成 min2read(post.content, {cn: 300, en: 160})， cn: 300 表示中文每分钟估计阅读300字； en: 160 表示英文每分钟估计阅读160个单词。这是为了便于根据文章字数和阅读速度计算阅读时长。
　　
　　接下来找到名为 article-meta.ejs 的文件，在 layout\_partial 目录下。例如我的是 C:\blogs\themes\snippet\layout\_partial 。如下图所示。

　　打开这个文件。

笔者注：这种文本文件最好用Notepad++，VSCode等工具打开，用记事本根本看不清楚。

　　在以下代码段的省略号处插入上面的代码。

<span class="fa-wrap">
    <i class="fa fa-clock-o"></i>
    <span class="date-meta">
        <%- date(post.date, format) %></span>
</span>
………………………………
………………………………
………………………………
<% if(theme.visit_counter.page) {%>
<span class="fa-wrap">
    <i class="fa fa-eye"></i>
    <span id="busuanzi_value_page_pv"></span>
</span>
<% } %>
<% } %>

　　插入了之后是下面这个样子（最好注意一下缩进，为了方便看和美观）。

<span class="fa-wrap">
    <i class="fa fa-clock-o"></i>
    <span class="date-meta">
        <%- date(post.date, format) %></span>
</span>

<!---------------- 插入代码开始 ---------------->
<!-- 当前文章字数 -->
<span class="post-count">
    <%= wordcount(post.content) %>
</span>
<!-- 阅读时间 -->
<span class="post-count">
    <%= min2read(post.content) %>
</span>
<!-- 全站总字数 -->
<span class="post-count">
    <%= totalcount(site) %>
</span>
<!---------------- 插入代码结束 ---------------->

<% if(theme.visit_counter.page) {%>
<span class="fa-wrap">
    <i class="fa fa-eye"></i>
    <span id="busuanzi_value_page_pv"></span>
</span>
<% } %>
<% } %>

4.效果

　　会在文章标题那一块儿显示字数、阅读时间和全站文章总字数。效果如下图所示。

　　比如这篇文章字数大概在1.1K，即1100字左右，阅读需要约4分钟，全站文章总计72.6K，即72600字左右。（注意：这个数字是我这篇博文没写完之前的）

　　这个插件统计字数包括了链接和代码，没有把标点符号、空格、内嵌html代码计算进去，因此还是有一定参考意义的，对自己的文章篇幅做到心中有数。

笔者注：如果你在文章使用了Hexo的加密插件加密后发现文字统计错误，不要担心，这是正常现象，因为加密插件的确保护了你的文章。

5.最后补充

　　相信已经有读者看出来了，第4章中的效果光显示个数字实在是不知道啥意思。所以我在这章补充一下在这些数字之前添加一个图标表示数值的意思。

**在统计数字前添加图标**

　　添加图标其实很简单，我个人觉得比 文章字数：1.1K 字 这种更美观，而且不会占位置。

　　因此插入代码为：（第9、14行插入了键盘、沙漏图标）

　　插入图标的代码可以参考网站：【Font-Awesome】

<span class="fa-wrap">
    <i class="fa fa-clock-o"></i>
    <span class="date-meta">
        <%- date(post.date, format) %></span>
</span>

<!---------------- 插入代码开始 ---------------->
<!-- 当前文章字数 -->
<i class="fa fa-keyboard-o"></i> <!-- 键盘图标 -->
<span class="post-count">
    <%= wordcount(post.content) %> 字
</span>
<!-- 阅读时间 -->
<i class="fa fa-hourglass-half"></i> <!-- 沙漏图标 -->
<span class="post-count">
    <%= min2read(post.content) %> 分钟
</span>
<!-- 全站总字数 -->
<span class="post-count">
    <%= totalcount(site) %>
</span>
<!---------------- 插入代码结束 ---------------->

<% if(theme.visit_counter.page) {%>
<span class="fa-wrap">
    <i class="fa fa-eye"></i>
    <span id="busuanzi_value_page_pv"></span>
</span>
<% } %>
<% } %>