S.X.Zhang

hexo页脚添加访客人数和总访问量

发表于 更新于 分类于 阅读次数：
本文字数： 4k 阅读时长 ≈ 4 分钟

解决过程中参考的博客：https://chrischen0405.github.io/2018/09/11/post20180911/

1.配置方式使用不蒜子计数

打开主题的配置文件/theme/next/_config.yml，找到如下配置：

1
2
3
4
5
6
7
8
9
10
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye

将enable的值由false改为true，便可以看到页脚出现访问量。

2.脚本方法使用不蒜子计数

1.安装脚本（必选）

要使用不蒜子必须在页面中引入busuanzi.js，代码如下：

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

本人使用的是next主题，所以在themes/next/layout/_partial/footer.swig中添加上述脚本，也可以把脚本添加在header中，如果使用的是其他主题，大致也是一样的，不过可能后缀是ejs，没有影响。

2.安装标签（可选）

要显示站点总访问量，复制以下代码添加到你需要显示的位置。有两种算法可选：

算法a：pv的方式，单个用户连续点击n篇文章，记录n次访问量。

本站总访问量次

算法b：uv的方式，单个用户连续点击n篇文章，只记录1次访客数。

1
2
3
<span id="busuanzi_container_site_uv">
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

3.安装教程

一般显示站点访问量在页脚，所以我们选择在footer.swig中添加标签，同时我们还可以通过修改主题配置来方便选择是否显示访问量，步骤如下：首先，我们在next主题下的_config.yml中加入以下配置：

1
2
# visitors count
counter: true

之后可以更改counter的值为false来隐藏页脚的访问量统计，然后，我们在themes/next/layout/_partial/footer.swig中添加以下代码：

1
2
3
4
5
6
{% 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 class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_uv">本站访客数<span id="busuanzi_value_site_uv"></span>人</span>
{% endif

这样便可以在底部显示访问量了，并且可以通过更改主题配置中的参数来选择是否显示访问量，只要引入busuanzi.js之后，即使不显示访问量也会统计。

注意事项

  • 两种方法选择一种使用即可，都使用可能会出现无法显示的问题
  • 使用hexo s部署在本地预览效果的时候，uv数和pv数会过大，这是由于不蒜子用户使用一个存储空间，所以使用localhost:4000进行本地预览的时候会导致数字异常，这是正常现象，只需要将博客部署至云端即可恢复正常。

    • 踩过的坑

    1.打开busuanzi后页面底部的客人数和总访问量无法显示

    试了很多解决方法无效，造成这个问题的原因很多。解决我的问题的办法是:

    将\themes\next6\layout_partials\footer.swig里面的这段

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="powered-by">
      <i class="fa fa-user-md"></i>
      <span id="busuanzi_value_site_uv">
    	本站总访客数:<span id="busuanzi_value_site_uv"></span>&nbsp;&nbsp;|
      </span>
      <i class="fa fa-eye"></i>
      <span id="busuanzi_value_site_pv">
          本站总访问量<span id="busuanzi_value_site_pv"></span>次
      </span>
    </div>

    改为

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="powered-by">
      <i class="fa fa-user-md"></i>
      <span>
    	本站总访客数:<span id="busuanzi_value_site_uv"></span>&nbsp;&nbsp;|
      </span>
      <i class="fa fa-eye"></i>
      <span>
          本站总访问量<span id="busuanzi_value_site_pv"></span>次
      </span>
    </div>

    删除“本站总访客数”和“本站总访问量” 前面那个span里面的”id=”busuanzi_value_site_uv”

    2.博客页面的浏览量使用leancloud不起作用

    具体leancloud怎么设置参考网上各种教程即可，但是之后遇到了博客页面的浏览量一直为0， 如图1(这是修复之后才有变化)，而且leancloud里的Counter一直没有数据，但leancloud有显示网站的访问次数。

    解决办法:

    1. 找到themes\next6\layout_third-party\statistics\lean-analytics.swig
    2. 文件内搜索addCount(Counter); 
      1
      2
      3
      4
      5
      6
      7
      if (CONFIG.page.isPost) {
           if (CONFIG.hostname !== location.hostname) return;
           addCount(Counter);
         } else if (document.querySelectorAll('.post-title-link').length >= 1) {
           showTime(Counter);
         }
       }
      3.删掉if (CONFIG.hostname !== location.hostname) return; 
      1
      2
      3
      4
      5
      6
      7
      if (CONFIG.page.isPost) {
       
       addCount(Counter);
      } else if (document.querySelectorAll('.post-title-link').length >= 1) {
           showTime(Counter);
         }
       }