前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >hexo next 主题添加字数统计(2018)

hexo next 主题添加字数统计(2018)

作者头像
Cell
发布2022-02-25 13:45:40
8960
发布2022-02-25 13:45:40
举报
文章被收录于专栏:Cell的前端专栏

2018/11/1 说明 next 主题好像更新了,现在自带的可以用了,如果可以用了,以下教程可以忽略!!!

最近有几个小伙伴问我博客的字数统计怎么实现的,怎么网上的教程不管用啊?一开始我搭建博客的时候也遇到了类似的问题,按照 github 上 wordcount 的 readme 操作后,并没有什么用,我打开 post 相关配置文件并没有发现发现 wordcount 这个关键词,next 本身似乎也并没有在主题配置文件提供选项(或许是个人原因),所以只好自己动手加一个了。为了不重复回答问题,先做个原创记录。转载请注明出处。在此抛转引玉,如果有更好的方法请在留言区提出,我会及时更改。同时也希望小伙伴多发扬折腾精神,多专研,少提问,毕竟还是 RTFSC 大法好!(Read the fucking source code)

安装

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

1 2 3 4

npm i --save hexo-wordcount # Node 版本 7.6.0 之前,请安装 2.x 版本 (Node.js v7.6.0 and previous) npm install hexo-wordcount@2 --save

post 添加

打开hexo\themes\hexo-theme-next\layout\_macro路径下的 post.swig 文件,既然没有字数统计那么我们就加一个,简单暴力地直接在阅读数后面加上一条就好了,在文件类搜索关键词busuanzi, 我用的是不蒜子,如果用的了 leancloud 的搜 leancloud 就好了,其他类似。找到这段代码后

1 2 3 4 5 6 7 8 9 10

{% if not is_index and theme.busuanzi_count.enable and theme.busuanzi_count.post_views %} <span class="post-meta-divider">|</span> <span class="post-meta-item-icon" {% if not theme.post_meta.item_text %} title="{{ __('post.views') }}" {% endif %}> <i class="fa fa-{{ theme.busuanzi_count.post_views_icon }}"></i> {% if theme.post_meta.item_text %} {{__('post.views') + __('symbol.colon') }} {% endif %} <span class="busuanzi-value" id="busuanzi_value_page_pv" ></span> </span> {% endif %}

endif上面,即本文代码块那个空行处添加以下代码

1 2

<span class="post-meta-divider">|</span> <span title="{{ __('post.wordcount') }}"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i></span>字数: {{ wordcount(post.content) }}</span>

全站添加

打开hexo\themes\hexo-theme-next\layout\_partials路径下 footer.swig 文件,在你喜欢的位置添加以下代码

1 2 3 4

<div class="theme-info"> <div class="powered-by"></div> <span class="post-count">全站共 {{ totalcount(site) }} 字</span> </div>

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-08-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装
  • post 添加
  • 全站添加
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档