2.10 添加计数器

这里使用的是不蒜子 - 极简网页计数器，这里要感谢「不如」大大写的hexo你的博客 | 不如这篇博客，好多人开始自定义自己的博客或者说开始使用Hexo作为自己的博客都是看了不如大大的这篇文章，这篇文章在当时来说，内容量还是相当大的。

好了，不多说了，这篇文章不蒜子 | 不如其实已经讲得很清楚了，但是下面还是简单针对自定义的这个主题简要介绍一下。

1. 添加js文件

最基本的计数功能其实也是需要数据库的支持的，但是Hexo的博客属于静态页面，想实现计数功能，基本上都要借助于外部的服务，就像多说评论，无觅推荐等等功能一样，首先要引入一个js文件。

打开主题目录下layout/_partial/after_footer.ejs文件，将下面一段js引用加入其中。

<!-- 不蒜子-计数服务 -->
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

2. 在首页添加总访问量

打开主题目录下layout/_partial/footer.ejs文件，添加下面代码

...
    <div id="footer-info" class="inner">
      &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %><br>
      <%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a>
      <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
    </div>
...

显示如下图：

你可能发现咋上来就是显示了766340次，也许你操作的时候远不止这个数了，那是因为不蒜子服务是通过URL来统计的，使用localhost:4000来调试页面的计数都会统计进去，所以有个问题就是别老换域名以及页面URL，不然数据就失真了。

3. 在文章页添加访问量

修改layout/_partial/article.ejs中添加如下代码（注意添加位置）

...
 <footer class="article-footer">
      <a data-url="<%- url_for(post.path) %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %></a>
      <% if (post.comments && theme.duoshuo_short_name){ %>
        <a href="<%- url_for(post.path) %>#comments" class="article-comment-link"><%= __('comment') %></a>
      <% } %>
      <%- partial('post/tag') %>
      <% if (!index){ %>
        <span id="busuanzi_container_page_pv" style="color: #999; margin-left: 30px">
          &阅读量<span id="busuanzi_value_page_pv"></span>次
        </span>
      <% } %>
    </footer>
...

添加在文章末尾tag旁边，并且不在首页显示，得到的效果如下：

显示的位置以及显示的样式，都可以通过修改css来改变，自己可以下去自定义一下。同样，这里显示的数字也是根据URL来统计的。