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-选择器
页面信息
location:
protocol
: host
: hostname
: origin
: pathname
: href
: document:
referrer
: navigator:
platform
: userAgent
: