背景

最近把个人博客迁移到了Hexo框架，并使用了Butterfly主题，得益于博客框架的易用性和主题功能的丰富程度，感觉非常的香。我对比了很多Hexo主题，这一个算是在功能、审美、文档等各方面几乎完美符合我需求的。

Butterfly很贴心地集成了不蒜子计数工具，可以统计网站的访问数据（人数，次数等）。只需要修改主题config文件即可开启：

1
2
3
4
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

即便没有使用Hexo框架和Butterfly主题，用不蒜子计数也是很简单的。

这个工具存在快十年了，其首页的标语就是“两行代码，搞定计数”。感觉这位作者也是个有情怀的开发者，维护服务器给大家免费使用这么多年。

1
2
<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>

但是，有个小问题，如果你的网站首次集成这个脚本，计数自然是从0开始的，对于很多已经运行很久的网站，不能很客观的展示数据，我们更想要的是能够从一个初始值开始计数。比如我的个人博客在本次大更新之前，就有大约十万访问量了，我希望可以从十万开始统计数据。

不蒜子本身暂时还不支持我这个需求，所以我们只能自己写JS来搞定了。

分析

首先我们看一下不蒜子的源码是怎么实现统计和展示数据的，打开上述脚本中的js文件，可以发现代码还是不多的，格式化美化之后才60多行。从源码片段中可以得知，主要数据就3个：

1
2
3
4
5
6
7
8
9
10
...
}), bszTag = {
    bszs: ["site_pv", "page_pv", "site_uv"],
    texts: function (a) {
        this.bszs.map(function (b) {
            var c = document.getElementById("busuanzi_value_" + b);
            c && (c.innerHTML = a[b])
        })
    },
...

分别是site_pv对应网站访问总次数，page_pv对应每个子页面的访问次数，site_uv对应网站访问的人数，并通过给元素的innerHTML赋值来展示数据。

了解完源码，我们就有大致解决思路了，监听对应元素的加载和变化，在真实数据赋值时，加上自己需要的初始值。

解决

直接上JS代码，此处我按个人需求只更改网站的uv和pv，子页面的pv不关注：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
document.addEventListener("DOMContentLoaded", function () {
    const uvE = document.getElementById('busuanzi_value_site_uv');
    const pvE = document.getElementById('busuanzi_value_site_pv');
    const uvObs = new MutationObserver((mutationsList) => {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                uvObs.disconnect();
                mutation.target.innerHTML = parseInt(mutation.target.innerHTML) + 100000;
                break;
            }
        }
    });
    const pvObs = new MutationObserver((mutationsList) => {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                pvObs.disconnect();
                mutation.target.innerHTML = parseInt(mutation.target.innerHTML) + 300000;
                break;
            }
        }
    });
    const config = {
        childList: true
    };
    uvObs.observe(uvE, config);
    pvObs.observe(pvE, config);
});

首先我们监听DOMContentLoaded事件，在HTML加载完成后，从DOM树中拿到busuanzi_value_site_uv和busuanzi_value_site_pv，再分别监听它们的元素属性变化。比如我这里当uv变化时，就加上一个初始值10万，pv变化时，就加上30万。最终结果就是自定义的这个初始值加上不蒜子的真实统计数据。

把上述代码压缩成一行后加入到script标签中，再添加到HTML的head里面即可：

1
2
3
4
5
...
<head>
  <script>document.addEventListener("DOMContentLoaded",function(){const e=document.getElementById("busuanzi_value_site_uv"),t=document.getElementById("busuanzi_value_site_pv"),n=new MutationObserver(e=>{for(let t of e)if("childList"===t.type){n.disconnect(),t.target.innerHTML=parseInt(t.target.innerHTML)+1e5;break}}),i=new MutationObserver(e=>{for(let t of e)if("childList"===t.type){i.disconnect(),t.target.innerHTML=parseInt(t.target.innerHTML)+3e5;break}}),r={childList:!0};n.observe(e,r),i.observe(t,r)});</script>
</head>
...

对于使用Butterfly主题的博主来说，可直接修改主题配置文件中的inject，框架会自动插入代码到head中：

1
2
3
4
5
6
7
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
  # - <link rel="stylesheet" href="/xxx.css">
    - <script>...</script>

之所以把JS代码压缩成一行，也是方便这里配置。