📖 访问统计实现细节

🔍 技术架构

1. Busuanzi (不蒜子) - 核心统计引擎

┌─────────────────────────────────────────┐
│        您的个人主页 (GitHub Pages)       │
├─────────────────────────────────────────┤
│         _includes/footer/custom.html    │
│                                         │
│   ┌─────────────────────────────────┐  │
│   │  Busuanzi 统计显示界面          │  │
│   │                                 │  │
│   │ 📊 本站总访问量：123            │  │
│   │ 👤 本站访客数：45              │  │
│   └─────────────────────────────────┘  │
│                ↓                        │
│   busuanzi.ibruce.info/api/pageviews   │
│   (异步加载，不阻塞页面)               │
└─────────────────────────────────────────┘

工作流程：

页面加载时，busuanzi.pure.mini.js 在后台执行
脚本向 Busuanzi API 服务器发送请求
API 返回该网站的访问统计数据
JavaScript 异步更新页面显示

关键代码：

// _includes/footer/custom.html 第 75 行
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

// HTML 标签（自动填充数据）
<span id="busuanzi_value_site_pv">加载中...</span>    <!-- 访问量 -->
<span id="busuanzi_value_site_uv">加载中...</span>    <!-- 访客数 -->

2. 地理位置统计 (Ipapi) - 可选功能

┌──────────────────────────────────────────┐
│     访问者来自全球不同地点                 │
│                                          │
│  访问者 A (China) ─┐                     │
│  访问者 B (USA)   ├─→ Ipapi API ──→ 获取国家信息
│  访问者 C (Japan) ┘                      │
│                                          │
│  在您的网页显示：                         │
│  🌍 来自 China (CN)                      │
│  🌍 来自 USA (US)                        │
│  🌍 来自 Japan (JP)                      │
└──────────────────────────────────────────┘

工作流程（需启用）：

访问者打开您的网页
JavaScript 调用 ipapi.co API
API 根据访问者 IP 地址返回国家信息
显示 “🌍 来自 [国家名称] ([国家代码])”

关键代码（被注释，可选启用）：

fetch('https://ipapi.co/json/')
  .then(response => response.json())
  .then(data => {
    // data.country_name: 国家名称 (如 "China")
    // data.country_code: 国家代码 (如 "CN")
    // 更新页面显示
  })

📊 数据流向

场景 1：用户访问您的网站（启用 Busuanzi）

时间线：
────────────────────────────────────────────────────────────

T0: 用户打开网页
    ↓
T1: 浏览器加载 HTML
    ↓
T2: 加载 CSS 和基础脚本（页面可见但统计数据空白）
    ↓
T3: Busuanzi JS 脚本异步加载（< 1 秒）
    ↓ 发送请求到 busuanzi.ibruce.info
    ↓
T4: 服务器返回统计数据（1-3 秒）
    ↓
T5: 页面更新显示访问数和访客数 ✓

（整个过程不影响网页主体内容的显示）

场景 2：查看访问者来源国家（启用 Ipapi）

访问者 IP: 203.208.*.* (来自中国)
    ↓
Ipapi API 识别
    ↓
返回: {"country_name": "China", "country_code": "CN"}
    ↓
页面显示: 🌍 来自 China (CN)

🛠️ 集成方式详解

核心文件改动

文件: `_includes/footer/custom.html`

添加内容概览：

62 行注释和说明文档
访问统计 HTML 结构（15 行）
Busuanzi 脚本加载（1 行）
地理位置脚本（可选，14 行）

<!-- 新增部分结构 -->
<div style="...">
  <!-- Busuanzi 显示区域 -->
  <span id="busuanzi_container_site_pv">
    📊 本站总访问量：<span id="busuanzi_value_site_pv">
  </span>
  
  <!-- 地理位置显示区域（可选） -->
  <p id="geo-location-info">
</div>

<!-- Busuanzi 脚本 -->
<script async src="https://busuanzi.ibruce.info/..."></script>

<!-- 地理位置脚本（可选） -->
<script>
  fetch('https://ipapi.co/json/')
    ...
</script>

⚡ 性能影响分析

加载时间

组件	加载时间	阻塞页面	备注
Busuanzi	1-3 秒	❌ 否	异步加载
Ipapi	< 1 秒	❌ 否	异步加载
总体影响	几毫秒	❌ 否	用户感知不到

带宽影响

Busuanzi JS: ~5 KB (gzip)
Ipapi 数据: ~500 B (JSON)
总计: ~6 KB 额外请求（相对于全页面可忽略）

浏览器兼容性

✅ Chrome 90+
✅ Firefox 88+
✅ Safari 14+
✅ Edge 90+
✅ 移动浏览器（现代版本）

🔐 隐私和安全

数据收集范围

✅ 收集数据：
  - 页面访问次数
  - 访问者的国家（仅 Ipapi 启用时）
  - 访问日期和时间

❌ 不收集数据：
  - 访问者个人身份信息
  - 访问者 IP 地址（Ipapi 仅用于获取国家）
  - 访问者浏览行为
  - Cookie 或本地存储

第三方服务

服务	数据用途	隐私政策
Busuanzi	访问量统计	无个人信息存储
Ipapi	地理位置	仅获取国家代码

📈 显示位置和样式

当前位置

Your Sitemap Link
─────────────────────────────────────────
📊 本站总访问量：123 | 👤 本站访客数：45
🌍 来自 China (CN)  [仅在启用时显示]
─────────────────────────────────────────
© 2025 Yu Liu, Powered by Jekyll...

自定义样式参数

<div style="
  margin-top: 20px;           /* 距离上方元素的距离 */
  padding-top: 20px;          /* 内部顶部间距 */
  border-top: 1px solid #e0e0e0;  /* 上方分隔线 */
  text-align: center;         /* 居中对齐 */
  font-size: 0.9em;           /* 字体大小 */
  color: #666;                /* 字体颜色 */
">

🔄 更新和维护

依赖关系

您的网站
    ↓
_includes/footer/custom.html
    ├─→ Busuanzi CDN (busuanzi.ibruce.info)
    ├─→ Ipapi CDN (ipapi.co) [可选]
    └─→ 本地 CSS 和 JS 库

可能的故障点

故障点	影响	解决方案
Busuanzi 服务宕机	显示”加载中…”	等待服务恢复或切换至 Google Analytics
Ipapi 服务宕机	不显示国家信息	等待服务恢复
网络连接不稳定	数据加载缓慢	无法避免，但使用异步加载不影响主页

🎯 进阶配置选项

隐藏特定统计

<!-- 隐藏访问量，只显示访客数 -->
<span style="display:none;">
  <span id="busuanzi_container_site_pv">...</span>
</span>

<span id="busuanzi_container_site_uv">
  👤 本站访客数：<span id="busuanzi_value_site_uv">
</span>

修改显示格式

<!-- 原格式 -->
📊 本站总访问量：123

<!-- 改为 -->
🌐 Page Views: 123

添加其他统计来源

// 示例：添加更新时间戳
document.getElementById('busuanzi_value_site_pv').innerHTML += 
  ' (更新于: ' + new Date().toLocaleTimeString() + ')';

Yu Liu

📖 访问统计实现细节

📖 访问统计实现细节

🔍 技术架构

1. Busuanzi (不蒜子) - 核心统计引擎

2. 地理位置统计 (Ipapi) - 可选功能

📊 数据流向

场景 1：用户访问您的网站（启用 Busuanzi）

场景 2：查看访问者来源国家（启用 Ipapi）

🛠️ 集成方式详解

核心文件改动

文件: `_includes/footer/custom.html`

⚡ 性能影响分析

加载时间

带宽影响

浏览器兼容性

🔐 隐私和安全

数据收集范围

第三方服务

📈 显示位置和样式

当前位置

自定义样式参数

🔄 更新和维护

依赖关系

可能的故障点

🎯 进阶配置选项

隐藏特定统计

修改显示格式

添加其他统计来源

📚 参考资源

官方文档

源代码位置

相关链接

Yu Liu

📖 访问统计实现细节

🔍 技术架构

1. Busuanzi (不蒜子) - 核心统计引擎

2. 地理位置统计 (Ipapi) - 可选功能

📊 数据流向

场景 1：用户访问您的网站（启用 Busuanzi）

场景 2：查看访问者来源国家（启用 Ipapi）

🛠️ 集成方式详解

核心文件改动

文件: _includes/footer/custom.html

⚡ 性能影响分析

加载时间

带宽影响

浏览器兼容性

🔐 隐私和安全

数据收集范围

第三方服务

📈 显示位置和样式

当前位置

自定义样式参数

🔄 更新和维护

依赖关系

可能的故障点

🎯 进阶配置选项

隐藏特定统计

修改显示格式

添加其他统计来源

📚 参考资源

官方文档

源代码位置

相关链接

文件: `_includes/footer/custom.html`