给不蒜子（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 代理，用于拦截对象中任意属性的变化，包括：属性的读写、属性的…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计 通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台，覆盖应用全生命周期测试需求，主要提供五大核心能力： 测试类型检测目标关键指标功能体验基…...
macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
Java 二维码
Java 二维码 **技术：**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...
Webpack性能优化：构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果：Webpack 4比Webpack 3构建时间降低60%-98%。原因： V8引擎优化（for of替代forEach、Map/Set替代Object）。默认使用更快的md4哈希算法。AST直接从Loa…...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题，无需引入，直接可…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 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…...
Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...