当前位置：首页 > news >正文

给不蒜子（busuanzi）统计数据增加初始值

news 2025/10/3 0:12:04

背景

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

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

busuanzi:site_uv: truesite_pv: truepage_pv: true

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

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

<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个：

...
}), 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不关注：

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里面即可：

...
<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中：

# 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代码压缩成一行，也是方便这里配置。

给不蒜子（busuanzi）统计数据增加初始值

背景

分析

解决

相关文章：

给不蒜子（busuanzi）统计数据增加初始值

WebStorm

代码随想录算法训练营day59

大模型训练时间估算

函数的模拟实现

CSDN博客批量查询质量分https://yma16.inscode.cc/请求超时问题（设置postman超时时间）（接口提供者设置了nginx超时时间）

什么是 CSRF 攻击？

[内网渗透]CFS三层靶机渗透

一百五十一、Kettle——Linux上安装的kettle8.2开启carte服务以及配置子服务器

2023高教社杯数学建模A题 B题C题 D题 E题思路代码分析

从ChatGLM2-6B来看大模型扩展上下文和加速推理相关技术

Unity特效总览

Unity中人物控制器

零钱兑换-输出组合数

Mybatis 小结

【Cartopy】库的安装和瓦片加载（天地图、高德等）

TCPDF生成PDF文件，含jpjraph生成雷达图

Flink-串讲面试题

如何培养对技术的热爱

Vue响应式数据的原理

使用VSCode开发Django指南

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

基于FPGA的PID算法学习———实现PID比例控制算法

阿里云ACP云计算备考笔记 (5)——弹性伸缩

【磁盘】每天掌握一个Linux命令 - iostat

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

Caliper 配置文件解析：config.yaml

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

iview框架主题色的应用

tomcat指定使用的jdk版本