Hexo建站日记（一）——访客和阅读数统计

发表于 | 阅读次数：

之前给博客添加了在页脚显示访客人数和文章阅读量的功能，于是打算就此开一个系列，详细地记录我的博客的搭建过程，拟了这第一篇建站日记。因为一直没有时间把它补充完整，这篇草稿在文件夹里躺了好几周，越来越觉得碍眼（强迫症），终于逼着自己把它写完发出来。把之前做一半的事情重新拾掇起来并不是一件舒服的事，希望以后能一开始就坚持下来，加油！

访客和阅读统计

大部分静态博客的访客统计使用的都是不蒜子（busuanzi），一个轻量级的计数服务，可以将计数直接显示在博客的页脚。不蒜子的引入有两种方法，最好不要同时使用，避免出现冲突。

添加脚本法

这个方法对 Hexo 所有的主题都是通用的。首先在themes/next/_config.yml中找到footer（header也可以，下同），添加counter的配置：

1
2
footer:
    counter: true

之后对themes/next/layout/_partials/footer.swig进行修改，加入不蒜子的脚本：

1
2
3
4
5
{% if theme.footer.counter %}
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span id="busuanzi_container_site_pv">这里填前缀（如总访问量）<span id="busuanzi_value_site_pv"></span>这里填后缀（如次）</span>
    <span id="busuanzi_container_site_uv">这里填前缀（如总访客数）<span id="busuanzi_value_site_uv"></span>这里填后缀（如人）</span>
{% endif %}

其中<script>标签引入busuanzi.js，是实现计数的必选步骤。网上有些较早的教程这里引入的 url 是dn-lbstatics.qbox.me，但是该域名 18 年已经过期了，应确保更换为busuanzi.ibruce.info。两个<span>标签分别实现站点总访问量（site_pv）和总访客数（site_uv）的显示，可以根据需求进行选择，也可以自定义前后缀和 icon。

文章阅读数的统计只需要将以下代码复制到需要显示的位置，例如要显示在博文标题下的话，以 Next 主题为例，应该添加到themes/next/layout/_macro/page.swig或者themes/next/layout/page.swig中（这里的添加位置很多教程并没有写清楚，我找了一下应该是这两个文件，但我是通过第二种方法配置的）：

1
2
3
<span id="busuanzi_container_page_pv">
  这里填前缀（如总阅读量）<span id="busuanzi_value_page_pv"></span>这里填后缀（如次）
</span>

直接配置法

Next 主题已经集成了对不蒜子的支持，因此可以直接通过配置的方式使用。在themes/next/_config.yml中找到如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:

将enable选项改为true即可，同样也可以进行计数内容的定制。然而我配置之后发现并不能正常显示计数结果，研究后发现是 Next 内置的不蒜子还在使用旧域名。这里需要修改themes/next/layout/_third-party/analytics/busuanzi_counter.swig，将<script>标签的 url 改为新域名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  {% if theme.busuanzi_count.site_uv %}
    <span id="busuanzi_container_site_uv" style='display:none'>
      {{ theme.busuanzi_count.site_uv_header }}
      <span id="busuanzi_value_site_uv"></span>
      {{ theme.busuanzi_count.site_uv_footer }}
    </span>
  {% endif %}

  {% if theme.busuanzi_count.site_pv %}
    <span id="busuanzi_container_site_pv" style='display:none'>
      {{ theme.busuanzi_count.site_pv_header }}
      <span id="busuanzi_value_site_pv"></span>
      {{ theme.busuanzi_count.site_pv_footer }}
    </span>
  {% endif %}

</div>
{% endif %}

这里我按照不蒜子官方的推荐，在原来id为busuanzi_value_site_pv的<span>标签外套了一层busuanzi_container_site_pv标签，作用是当计数服务出错时自动隐藏计数标签，保持美观。

百度统计

百度统计是另一种访客统计方法。百度统计的结果需要登陆百度统计网站查看，不能直接显示在网站上，但能提供比不蒜子更详细的访客报告，包括访客来源、停留时间、停留页面等信息。

要使用百度统计服务，在官网注册之后，绑定需要统计的网站信息，在代码管理-代码获取中找到 js 的统计代码。其中hm.src = "https://hm.baidu.com/hm.js?xxxxxxxx"一行最后的xxxxxxxx即为统计的 id 。以我使用 Next 主题为例，只需要在themes/next/_config.yml中找到baidu_analytics，输入上述 id 即可，其他主题的配置可能会复杂一些。