【Win10】Hexo 搭建个人主页 (九)添加字数统计和阅读时长功能

前言

本篇博文是关于添加字数统计和阅读时长功能。


如果对于搭建等其它方面有需要了解的,读者可以阅读前几篇比较优质的文章:

推荐阅读:【Win10】搭建个人博客 Hexo框架 (自制)

推荐阅读:【Win10】搭建个人博客 Hexo框架(部署到 github 上并 导入美化样式 )

推荐阅读:【Win10】Hexo 搭建个人主页 (一)解决所有文章,缺失模块问题

推荐阅读:【Win10】Hexo 搭建个人主页 (二)配置图片资源

推荐阅读:【Win10】Hexo 搭建个人主页 (三)文章显示摘要

推荐阅读:【Win10】Hexo 搭建个人主页 (四)文章显示目录

推荐阅读:【Win10】Hexo 搭建个人主页 (五)增加归档菜单

推荐阅读:【Win10】Hexo 搭建个人主页 (六)修改代码块样式

推荐阅读:【Win10】Hexo 搭建个人主页 (七)增加不蒜子统计

推荐阅读:【Win10】Hexo 搭建个人主页 (八)添加Gitment评论系统

准备工作
1.安装 hexo-wordcount

先安装相关插件,终端输入以下命令:

npm i –save hexo-wordcount
2.文件配置

theme\yilia\layout\_partial\post下创建word.ejs文件:

<div style="margin-top:10px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text">  字数统计: </span>
        <span class="post-count"><%= wordcount(post.content) %></span>
      </span>
    </span>

    <span class="post-time">
      &nbsp; | &nbsp;
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text">  阅读时长: </span>
        <span class="post-count"><%= min2read(post.content) %></span>
      </span>
    </span>
</div>

然后在 themes/yilia/layout/_partial/article.ejs中添加

<div class="article-inner">
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
        <% if (!post.noDate){ %>
        <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
        <!-- 需要添加的位置 -->
        <!-- 开始添加字数统计-->
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>
        <!-- 添加完成 -->

        <% } %>
      </header>
3. 开启功能

在站点的_config.yml中添加下面代码

# 是否开启字数统计
#不需要使用,直接设置值为false,或注释掉
word_count: true
效果

在这里插入图片描述

学如逆水行舟,不进则退
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一百个Chocolate

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值