Hexo-文章字数统计与阅读时长

96
莫显辉
2018.05.09 23:12* 字数 265

使用hexo-wordcount在Hexo中增加文章字数统计与阅读时长。

起因

昨晚写俩小时的总结,想知道自己一共写了多少字,然后进行了ctrl-copen wordctrl-v统计……

自己博客增加一个字数统计的功能。以maupassant主题pug语法为例,其他语法可以看npm hexo-wordcount

流程

  1. 安装hexo-wordcount插件
npm i --save hexo-wordcount
  1. 在maupassant主题下的新建一个wordcount.pug文件
themes\maupassant\layout\_partial\wordcount.pug
  1. wordcount.pug文件增加内容:
span(class="post-time")
  span.post-meta-item-text= " | "
  span(class="post-meta-item-icon")
    i(class="fa fa-keyboard-o")
    // span.post-meta-item-text= " 字数统计:"
    span.post-count= ' '+wordcount(page.content)
    span.post-meta-item-text= ' 字'
span(class="post-time")   |  
  span(class="post-meta-item-icon")
      i(class="fa fa-hourglass-half")
      // span.post-meta-item-text= " 阅读时长:"
      span.post-count= ' '+min2read(page.content)
      span.post-meta-item-text= " 分钟"
  1. themes\maupassant\layout\post.pug文件中引入wordcount.pug文件(我自定义的位置在busuanzidisqus之间)
if theme.busuanzi == true
  script(src='https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js', async)
  span#busuanzi_container_page_pv= ' | '
    span#busuanzi_value_page_pv
    span= ' ' + __('Hits')
include _partial/wordcount.pug
if theme.disqus

效果

可以看我的博客

hexo-wordcount.png

后续

已重新对代码进行了规范化,并向maupassant-hexo提交了PR,增加了该部分功能。如果有需要,可以看本次修改内容PR #384

参考文章

  1. 『博客搭建』—— hexo 博客小功能添加-评论、萌妹纸、相册、字数统计...
  2. Pug 中文文档
  3. npm hexo-wordcount
前端挖过的坑
Web note ad 1