当前位置 : 首页 » 文章分类 :  开发  »  Hexo博客(18)添加字数和阅读时长统计

Hexo博客(18)添加字数和阅读时长统计

hexo-wordcount插件提供了字数统计和阅读时长预计功能,项目地址:https://www.npmjs.com/package/hexo-wordcount


Hexo博客安装hexo-wordcount字数和阅读时长统计插件

进入博客根目录,使用npm安装hexo-wordcount字数统计插件
npm install --save hexo-wordcount
加–save参数可以将安装信息写入package.json,方便以后可能需要再次安装。
其实这个插件非常简单,就是几行js,安装完成后可以在hexo根目录的node_modules文件夹中找到hexo-wordcount文件夹,里面的index.js就是插件全部内容。


文章页侧边栏添加字数和阅读时长数据

使用也很方便,项目页 https://www.npmjs.com/package/hexo-wordcount 中有介绍,我使用的free2mind主题使用ejs模版,找到对应代码,略作样式修改,添加到文章侧边栏模版themes\free2mind\layout_partial\post\meta.ejs中,如下:

<!-- hexo-wordcount 字数统计 -->
<div class="meta-widget">
<i class="fa fa-bar-chart"></i>
<span class="post-count"><%= wordcount(item.content) %></span>字
</div>

<!-- hexo-wordcount 阅读时长预计 -->
<div class="meta-widget">
<i class="fa fa-hourglass-half"></i>
阅读预计<span class="post-count"><%= min2read(item.content) %></span>分钟
</div>  

首页文章列表标题上方添加字数和阅读时长数据

以我使用的free2mind主题为例,themes\free2mind\layout_partial\index.ejs模版是首页上的文章列表,将代码添加到文章日期的span后面即可:

<!-- 文章日期 -->
<span class="entry-date">
    <span class="fa fa-calendar" aria-hidden="true"></span>
    <%= item.date.format(config.date_format) %>                              
</span>

<!-- 2017.6.4,masikkk新增,hexo-wordcount 字数统计 -->
<span class="entry-date">
    <span class="fa fa-bar-chart" aria-hidden="true"></span>
    <span class="post-count"><%= wordcount(item.content) %></span>字                      
</span>        

<!-- 2017.6.4,masikkk新增,hexo-wordcount 阅读时长预计 -->
<span class="entry-date">
    <span class="fa fa-hourglass-half" aria-hidden="true"></span>
    <span class="post-count"><%= min2read(item.content) %></span>分钟                      
</span>    

上一篇 CSS-选择器

下一篇 Hexo博客(17)使用FontAwesome字体图标

阅读
评论
559
阅读预计2分钟
创建日期 2017-10-08
修改日期 2017-12-03
类别
标签

页面信息

location:
protocol:
host:
hostname:
origin:
pathname:
href:
document:
referrer:
navigator:
platform:
userAgent:

评论