Hexo添加字数统计、阅读时长

本文介绍如何在Hexo博客中启用及自定义文章字数统计与预计阅读时长显示功能,包括配置步骤及所需插件安装方法。

统计插件

配置

NexT 主题默认已经集成了文章【字数统计】、【阅读时长】统计功能,如果我们需要使用,只需要在主题配置文件 _config.yml 中打开 wordcount 统计功能即可。如下所示:

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true         # 单篇 字数统计 min2read: true # 单篇 阅读时长 totalcount: false # 网站 字数统计 separated_meta: true 

修改完成主题配置文件后,启动服务预览:

hexo server

访问 http://localhost:4000/ 链接,如果出现字数统计和阅读时长失效的情况,一般是因为没有安装 hexo-wordcount 插件,查看 Hexo 插件:

hexo --debug
安装

如果没有安装 hexo-wordcount 插件,先安装该插件:

npm i --save hexo-wordcount

*** Node 版本 7.6.0 之前,请安装 2.x 版本 (Node.js v7.6.0 and previous) ,安装命令如下:***

npm install hexo-wordcount@2 --save

安装完成后,重新执行启动服务预览就可以了。

显示文字

用 Sublime Text 工具打开 post.swig 文件,路径如下:xxx_blog/themes/next/layout/_macro/post.swig

修改【字数统计】,找到如下代码:

<span title="{{ __('post.wordcount') }}">
    {{ wordcount(post.content) }}
</span> 

添加 “字” 到 {{ wordcount(post.content) }} 后面,修改后为:

<span title="{{ __('post.wordcount') }}">
    {{ wordcount(post.content) }} 字
</span> 

同理,我们修改【阅读时长】,修改后如下:

<span title="{{ __('post.min2read') }}">
    {{ min2read(post.content) }} 分钟
</span> 

修改完成后,重新执行启动服务预览就可以了。修改后,效果如下图所示:

 
统计插件效果截图.png

原文链接:http://sessionch.com/hexo/hexo-common-plug.html
相关文章:Hexo中Markdown对处理特殊字符的处理方法



作者:sessionCh
链接:https://www.jianshu.com/p/baea8c95e39b
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
Hexo是一个基于Node.js的静态博客框架,广泛应用于个人博客和文档网站的构建。为了提升用户体验和博客的互动性,许多用户希望能够统计文章的阅读量。Hexo有许多插件可以帮助实现这一功能,其中比较流行的包括: 1. **hexo-wordcount**: - 这是一个内置的插件,可以统计文章的单词数和字符数。虽然它不是专门用于统计阅读量的,但可以通过一些自定义配置来实现简单的阅读量统计。 2. **hexo-reading-time**: - 这个插件主要用于估算文章的阅读时间,但也可以结合其他插件使用来统计阅读量。 3. **busuanzi**: - 这是一个第三方的统计服务,可以通过在页面上添加脚本代码来统计访问量。结合Hexo的模板引擎,可以在文章页面显示阅读量。 4. **LeanCloud**: - LeanCloud是一个云服务平台,提供数据存储和统计功能。通过在Hexo博客中集成LeanCloud,可以实现更复杂的阅读量统计功能。 5. **不蒜子**: - 这是一个轻量级的第三方统计服务,适合不需要复杂功能的用户。通过在页面中引入不蒜子的脚本,可以在文章页面显示阅读量。 ### 如何使用hexo-reading-time插件 1. **安装插件**: ```bash npm install hexo-reading-time --save ``` 2. **配置插件**: 在Hexo的配置文件`_config.yml`中添加以下配置: ```yaml reading_time: minute: 分钟 minute_plural: 分钟 word: 字 word_plural: 字 ``` 3. **在模板中使用**: 在你的模板文件(如`themes/your-theme/layout/_partial/article.ejs`)中添加以下代码: ```ejs <span class="reading-time"> <%= reading_time(post.content) %> </span> ``` ### 使用busuanzi统计阅读量 1. **引入busuanzi脚本**: 在你的模板文件(如`themes/your-theme/layout/_partial/head.ejs`)中添加以下代码: ```html <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> ``` 2. **在文章页面显示阅读量**: 在文章模板文件(如`themes/your-theme/layout/_partial/article.ejs`)中添加以下代码: ```ejs <span id="busuanzi_container_page_pv"> 本文总阅读量<span id="busuanzi_value_page_pv"></span>次 </span> ``` ### 使用LeanCloud统计阅读量 1. **注册LeanCloud账号**并创建应用。 2. **安装hexo-leancloud-counter-security**插件: ```bash npm install hexo-leancloud-counter-security --save ``` 3. **配置插件**: 在`_config.yml`中添加以下配置: ```yaml leancloud_counter_security: enable_sync: true app_id: your_app_id app_key: your_app_key server_url: your_server_url ``` 4. **在模板中使用**: 在文章模板文件(如`themes/your-theme/layout/_partial/article.ejs`)中添加以下代码: ```ejs <span id="busuanzi_container_page_pv"> 本文总阅读量<span id="busuanzi_value_page_pv"></span>次 </span> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值