给不蒜子（busuanzi）统计数据增加初始值
背景
最近把个人博客迁移到了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框架，并使用了Butterfly主题，得益于博客框架的易用性和主题功能的丰富程度，感觉非常的香。我对比了很多Hexo主题，这一个算是在功能、审美、文档等各方面几乎完美符合我需求的。 Butterfly很贴心…...
WebStorm
WebStorm 介绍下载安装Activation 介绍 WebStorm是由JetBrains公司开发的一款集成开发环境（IDE），主要专注于前端开发和Web开发。它旨在提供一套强大的工具和功能，以支持开发者在前端项目中编写、调试和维护代码。 JetBrains官网: …...
代码随想录算法训练营day59
文章目录 Day59 下一个更大元素II题目思路代码 接雨水题目思路代码 Day59 下一个更大元素II 503. 下一个更大元素 II - 力扣（LeetCode） 题目 给定一个循环数组（最后一个元素的下一个元素是数组的第一个元素），输出每…...
大模型训练时间估算
文章目录 开激活重计算不开激活重计算开激活重计算 GPU利用率一般在 0.3 - 0.55 之间，假定为0.45 4090 理论性能：FP16：82.58 TFLOPS 不开激活重计算 我们来说一下系数8或6是怎么来的： 对于每个模型参数，都进行2次浮点数计算，即计算Y = AB 时，先将元素按位相乘，再按位相…...
函数的模拟实现
题一： 模拟实现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…...
CSDN博客批量查询质量分https://yma16.inscode.cc/请求超时问题（设置postman超时时间）（接口提供者设置了nginx超时时间）
文章目录 查询链接问题请求超时原因解决谷歌浏览器超时问题办法（失败了）谷歌浏览器不支持设置请求超时时间（谷歌浏览器到底有没限制请求超时？貌似没有限制？）看能否脱离浏览器请求，我们查看关键代…...
什么是 CSRF 攻击？
概念 CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用…...
[内网渗透]CFS三层靶机渗透
文章目录 [内网渗透]CFS三层靶机渗透网络拓扑图靶机搭建Target10x01.nmap主机探活0x02.端口扫描0x03.ThinkPHP5 RCE漏洞拿shell0x04.上传msf后门(reverse_tcp)反向连接拿主机权限 内网渗透Target2（1）路由信息探测（2）msf代理配置&a…...
一百五十一、Kettle——Linux上安装的kettle8.2开启carte服务以及配置子服务器
一、目的 kettle8.2在Linux上安装好可以启动界面、并且可以连接MySQL、Hive、ClickHouse等数据库后，准备在Linux上启动kettle的carte服务 二、实施步骤 （一）carte服务文件路径 kettle的Linux运行的carte服务文件是carte.sh （二…...
2023高教社杯数学建模A题 B题C题 D题 E题思路代码分析
文章目录 0 赛题思路1 竞赛信息2 竞赛时间3 建模常见问题类型3.1 分类问题3.2 优化问题3.3 预测问题3.4 评价问题 4 建模资料 0 赛题思路 （赛题出来以后第一时间在CSDN分享） https://blog.csdn.net/dc_sinor?typeblog 1 竞赛信息 全国大学生数学建模…...
从ChatGLM2-6B来看大模型扩展上下文和加速推理相关技术
ChatGLM2-6B 是开源中英双语对话模型 ChatGLM-6B 的第二代版本，在保留了初代模型对话流畅、部署门槛较低等众多优秀特性的基础之上，ChatGLM2-6B 引入了如下新特性： 更强大的性能：基于 ChatGLM 初代模型的开发经验，全面…...
Unity特效总览
一、粒子 Unity中的粒子组件叫做Particle System。 粒子系统顾名思义，与“微粒”有关。粒子系统会生成和发射很多粒子，通过控制粒子的生成数量、大小、角度、速度、贴图和颜色等众多属性，可以实现或真实或炫酷的各种效果。其中，…...
Unity中人物控制器
在Unity中控制器是很常见的功能，一般的人物控制器有两种方法，一种是通过代码实现，另外一种就是通过Unity中的API实现。 这里主要介绍第一种方法。 首先对控制器步骤进行分析。 步骤1：通过方向键控制人物移动。 步骤2ÿ…...
零钱兑换-输出组合数
1.暴力递归 （1）剩余金额小于0，无解 剩余金额等于0，有解 剩余金额大于0，继续递归 （2）从大的硬币到小的硬币，可以减少循环次数 #include <bits/stdc.h> using namespace std;…...
Mybatis 小结
一、Mybatis 基本构成 MyBatis的整体分为基础支持层、核心处理层、接口。 1.1、基础支持层 1.1.1、数据源模块 MyBatis自身提供了相应的数据源实现，也提供了与第三方接口数据源集成的接口，这些功能都位于数据源模块之中。 1.1.2、事务管理模块 …...
【Cartopy】库的安装和瓦片加载（天地图、高德等）
原文作者：我辈李想 版权声明：文章原创，转载时请务必加上原文超链接、作者信息和本声明。 Cartopy基础入门 【Cartopy】库的安装和天地图瓦片加载 【Cartopy】【Cartopy】如何更好的确定边界显示 【Cartopy】【Cartopy】如何丝滑的加载Geojso…...
TCPDF生成PDF文件，含jpjraph生成雷达图
TCPDF生成PDF文件，含jpjraph生成雷达图 依赖自行安装 "tecnickcom/tcpdf": "^6.6","amenadiel/jpgraph": "4"雷达图生成 中文字体添加安装 没有封装，只作为测试案例展示 // 创建新的PDF文档$pdf new \TCPD…...
Flink-串讲面试题
1. 概念 有状态的流式计算框架 可以处理源源不断的实时数据，数据以event为单位，就是一条数据。 2. 开发流程 先获取执行环境env，然后添加source数据源，转换成datastream，然后使用各种算子进行计算，使用s…...
如何培养对技术的热爱
这篇博文主要针对计算机专业相关的同学，对于理工科专业的同学有一定的借鉴意义，对于其他专业的同学，还请自行取舍。 背景 初学计算机，可能并不是每个人都能对其产生兴趣，更不要说从其中获得快乐。对于如何培养兴趣&a…...
Vue响应式数据的原理
在 vue2 的响应式中，存在着添加属性、删除属性、以及通过下标修改数组，但页面不会自动更新的问题。而这些问题在 vue3 中都得以解决。 vue3 采用了 proxy 代理，用于拦截对象中任意属性的变化，包括：属性的读写、属性的…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接：344. 反转字符串 双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全（Thread Safety） 线程安全是指在多线程环境下，某个函数、类或代码片段能够被多个线程同时调用时，仍能保证数据的一致性和逻辑的正确性…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享 文件木马：https://w…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣（LeetCode） 思路 右视图是指从树的右侧看，对于每一层，只能看到该层最右边的节点。实现思路是： 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
Webpack性能优化：构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果：Webpack 4比Webpack 3构建时间降低60%-98%。原因： V8引擎优化（for of替代forEach、Map/Set替代Object）。默认使用更快的md4哈希算法。AST直接从Loa…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...