0x00 前言

Hexo博客框架版本（hexo vesion）：5.3.0

Next主题版本：v5.1.4

最后更新日期：2022-08-15

0x01 实现方法

1.安装脚本

打开themes\next\layout\_partial\footer.swig文件，在首行添加如下代码：

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
1

注意，有的文章添加的src为"//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"，该域名已过期，所以要更换至上述域名，在参考其他的相关文章时需要注意该问题。

该代码也可以添加到header中。

2.安装标签

1）显示站点总访问量

pv方式，统计单个用户连续点击N篇文章，记录N次访问量：
打开themes\next\layout\_partial\footer.swig文件，在文件后添加：

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
1
2
3

uv方式，统计单个用户连续点击N篇文章，但只记录1次访问量：
打开themes\next\layout\_partial\footer.swig文件，在文件后添加：

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

2）显示单页面访问量

pv方式，单个用户点击1篇访问量，记录1次阅读量：

<span id="busuanzi_container_page_pv">
  本文总阅读量<span id="busuanzi_value_page_pv"></span>次
</span>
1
2
3

3.运行效果

比如目前想要同时显示站点总访问量（pv方式）以及访客数（uv方式），则themes\next\layout\_partial\footer.swig的代码为：

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

本站总访问量<span id="busuanzi_value_site_pv"></span>次
 | 
本站访客数<span id="busuanzi_value_site_uv"></span>人次


1
2
3
4
5
6
7
8
9
10

运行效果如下：

4.增加旋转等待特效（可选）

有时候在打开网站时会发现页面只显示“本站总访问量 次 | 本站访客数 人次”，没有数字内容，这是因为数据信息还未传送过来，需要等待一段时间及不蒜子执行完毕才会显示我们想要的数字内容（标签）。在等待期间只显示文字内容可能有些突兀，所以我们可以选择添加font-awesome字体以及修改不蒜子标签，这样在数字显示前，原本数字的位置会显示旋转特效。

添加font-awesome字体：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
或
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
1
2
3

修改不蒜子标签：

本站总访问量<span id="busuanzi_value_site_pv"><i class="fa fa-spinner fa-spin"></i></span>次
 | 
本站访客数<span id="busuanzi_value_site_uv"><i class="fa fa-spinner fa-spin"></i></span>人次
1
2
3

所以，在添加font-awesome字体以及修改不蒜子标签之后的themes\next\layout\_partial\footer.swig的代码显示为：

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
……
……
……
本站总访问量<span id="busuanzi_value_site_pv"><i class="fa fa-spinner fa-spin"></i></span>次
 | 
本站访客数<span id="busuanzi_value_site_uv"><i class="fa fa-spinner fa-spin"></i></span>人次

1
2
3
4
5
6
7
8
9
10

以上。

参考文档：
http://ibruce.info/2015/04/04/busuanzi/