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

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

news 2025/6/21 6:02:07

背景

最近把个人博客迁移到了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）统计数据增加初始值

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

编程日记 2023/8/13 6:55:11

WebStorm

WebStorm 介绍下载安装Activation 介绍 WebStorm是由JetBrains公司开发的一款集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要专注于前端开发和Web开发。它旨在提供一套强大的工具和功能&#xff0c;以支持开发者在前端项目中编写、调试和维护代码。 JetBrains官网: …...

编程日记 2023/8/13 6:54:11

代码随想录算法训练营day59

文章目录 Day59 下一个更大元素II题目思路代码 接雨水题目思路代码 Day59 下一个更大元素II 503. 下一个更大元素 II - 力扣&#xff08;LeetCode&#xff09; 题目 给定一个循环数组&#xff08;最后一个元素的下一个元素是数组的第一个元素&#xff09;&#xff0c;输出每…...

编程日记 2023/8/13 6:53:10

大模型训练时间估算

文章目录 开激活重计算不开激活重计算开激活重计算 GPU利用率一般在 0.3 - 0.55 之间，假定为0.45 4090 理论性能：FP16：82.58 TFLOPS 不开激活重计算 我们来说一下系数8或6是怎么来的： 对于每个模型参数，都进行2次浮点数计算，即计算Y = AB 时，先将元素按位相乘，再按位相…...

编程日记 2023/8/13 6:52:08

函数的模拟实现

题一&#xff1a; 模拟实现strncpy #include <stdio.h>void my_strncpy(char* arr2, char* arr1, size_t num){int i 0;for (i 0; i < num; i){*(arr2 i) *(arr1 i);}}int main(){char arr1[] "hello liangzai";char arr2[10] { 0 };//strncpy(ar…...

编程日记 2023/8/13 6:51:06

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

文章目录 查询链接问题请求超时原因解决谷歌浏览器超时问题办法&#xff08;失败了&#xff09;谷歌浏览器不支持设置请求超时时间&#xff08;谷歌浏览器到底有没限制请求超时&#xff1f;貌似没有限制&#xff1f;&#xff09;看能否脱离浏览器请求&#xff0c;我们查看关键代…...

编程日记 2023/8/13 6:50:05

什么是 CSRF 攻击？

概念 CSRF 攻击指的是跨站请求伪造攻击&#xff0c;攻击者诱导用户进入一个第三方网站&#xff0c;然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态&#xff0c;那么攻击者就可以利用这个登录状态&#xff0c;绕过后台的用户验证&#xff0c;冒充用…...

编程日记 2023/8/13 6:49:04

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

文章目录 [内网渗透]CFS三层靶机渗透网络拓扑图靶机搭建Target10x01.nmap主机探活0x02.端口扫描0x03.ThinkPHP5 RCE漏洞拿shell0x04.上传msf后门(reverse_tcp)反向连接拿主机权限 内网渗透Target2&#xff08;1&#xff09;路由信息探测&#xff08;2&#xff09;msf代理配置&a…...

编程日记 2023/8/13 6:48:01

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

一、目的 kettle8.2在Linux上安装好可以启动界面、并且可以连接MySQL、Hive、ClickHouse等数据库后&#xff0c;准备在Linux上启动kettle的carte服务 二、实施步骤 &#xff08;一&#xff09;carte服务文件路径 kettle的Linux运行的carte服务文件是carte.sh &#xff08;二…...

编程日记 2023/8/13 6:47:00

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

文章目录 0 赛题思路1 竞赛信息2 竞赛时间3 建模常见问题类型3.1 分类问题3.2 优化问题3.3 预测问题3.4 评价问题 4 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 竞赛信息 全国大学生数学建模…...

编程日记 2023/8/13 6:45:59

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

ChatGLM2-6B 是开源中英双语对话模型 ChatGLM-6B 的第二代版本&#xff0c;在保留了初代模型对话流畅、部署门槛较低等众多优秀特性的基础之上&#xff0c;ChatGLM2-6B 引入了如下新特性&#xff1a; 更强大的性能&#xff1a;基于 ChatGLM 初代模型的开发经验&#xff0c;全面…...

编程日记 2023/8/13 6:44:58

Unity特效总览

一、粒子 Unity中的粒子组件叫做Particle System。 粒子系统顾名思义&#xff0c;与“微粒”有关。粒子系统会生成和发射很多粒子&#xff0c;通过控制粒子的生成数量、大小、角度、速度、贴图和颜色等众多属性&#xff0c;可以实现或真实或炫酷的各种效果。其中&#xff0c;…...

编程日记 2023/8/13 6:43:57

Unity中人物控制器

在Unity中控制器是很常见的功能&#xff0c;一般的人物控制器有两种方法&#xff0c;一种是通过代码实现&#xff0c;另外一种就是通过Unity中的API实现。   这里主要介绍第一种方法。 首先对控制器步骤进行分析。 步骤1&#xff1a;通过方向键控制人物移动。 步骤2&#xff…...

编程日记 2023/8/13 6:42:56

零钱兑换-输出组合数

1.暴力递归 &#xff08;1&#xff09;剩余金额小于0&#xff0c;无解 剩余金额等于0&#xff0c;有解 剩余金额大于0&#xff0c;继续递归 &#xff08;2&#xff09;从大的硬币到小的硬币&#xff0c;可以减少循环次数 #include <bits/stdc.h> using namespace std;…...

编程日记 2023/8/13 6:41:55

Mybatis 小结

一、Mybatis 基本构成 MyBatis的整体分为基础支持层、核心处理层、接口。 1.1、基础支持层 1.1.1、数据源模块 MyBatis自身提供了相应的数据源实现&#xff0c;也提供了与第三方接口数据源集成的接口&#xff0c;这些功能都位于数据源模块之中。 1.1.2、事务管理模块 …...

编程日记 2023/8/13 6:40:54

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

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 Cartopy基础入门 【Cartopy】库的安装和天地图瓦片加载 【Cartopy】【Cartopy】如何更好的确定边界显示 【Cartopy】【Cartopy】如何丝滑的加载Geojso…...

编程日记 2023/8/13 6:39:53

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

TCPDF生成PDF文件&#xff0c;含jpjraph生成雷达图 依赖自行安装 "tecnickcom/tcpdf": "^6.6","amenadiel/jpgraph": "4"雷达图生成 中文字体添加安装 没有封装&#xff0c;只作为测试案例展示 // 创建新的PDF文档$pdf new \TCPD…...

编程日记 2023/8/13 6:38:52

Flink-串讲面试题

1. 概念 有状态的流式计算框架 可以处理源源不断的实时数据&#xff0c;数据以event为单位&#xff0c;就是一条数据。 2. 开发流程 先获取执行环境env&#xff0c;然后添加source数据源&#xff0c;转换成datastream&#xff0c;然后使用各种算子进行计算&#xff0c;使用s…...

编程日记 2023/8/13 6:37:50

如何培养对技术的热爱

这篇博文主要针对计算机专业相关的同学&#xff0c;对于理工科专业的同学有一定的借鉴意义&#xff0c;对于其他专业的同学&#xff0c;还请自行取舍。 背景 初学计算机&#xff0c;可能并不是每个人都能对其产生兴趣&#xff0c;更不要说从其中获得快乐。对于如何培养兴趣&a…...

编程日记 2023/8/13 6:36:49

Vue响应式数据的原理

在 vue2 的响应式中&#xff0c;存在着添加属性、删除属性、以及通过下标修改数组&#xff0c;但页面不会自动更新的问题。而这些问题在 vue3 中都得以解决。 vue3 采用了 proxy 代理&#xff0c;用于拦截对象中任意属性的变化&#xff0c;包括&#xff1a;属性的读写、属性的…...

编程日记 2023/8/13 6:35:48

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/6/19 5:53:20

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/6/21 5:04:30

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/6/20 16:24:43

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/6/20 1:37:17

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/6/20 1:38:46

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/6/17 23:00:16

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/6/17 11:16:41

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/6/15 14:45:38

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/6/16 16:14:08

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/6/21 5:15:17