Hexo个人博客之yilia主题阅读量和文章字数统计

前言：关于yilia的配置修改我已近写在上一篇文章中了，本文章主要讲的是文章阅读量和文章字数统计

1. 添加不蒜子统计文章访问量

• 打开D:\blog_hexo\themes\yilia\layout\_partial\footer.ejs，用以下代码替换

<footer id="footer">
 <div class="outer">
   <div id="footer-info">
     <div class="footer-left">
       &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
     </div>
     <div class="footer-right">
         <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
     </div>
   </div>
   <div calss="count-span">
     <span id="busuanzi_container_site_pv">
         总访问量: <span id="busuanzi_value_site_pv"></span>
   </div>
 </div>
</footer>


<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

• 打开D:\blog_hexo\themes\yilia\layout\_partial\article.ejs，在<header class="article-header"> 里加如下代码:

    <!-- 添加代码 -->
    <% if ( !index ){ %>
        <span class="archive-article-date">
            阅读量 <span id="busuanzi_value_page_pv"></span>
        </span>
    <% } %>

更改之后的效果

2. 添加统计

2.1 安装字数统计插件

npm i –save hexo-wordcount

2.2 在D:\blog_hexo\themes\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>

2.3 在D:\blog_hexo\themes\yilia\layout\_partial\article.ejs中添加

        <!-- 需要添加的位置 -->
        <!-- 开始添加字数统计-->
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>
        <!-- 添加完成 -->

重新运行后的效果