# Hexo 博客访问量统计配置指南

本文介绍如何为 Hexo 博客配置访问量统计功能，包括 Valine 统计和不蒜子统计两种方案。

# 🎯 方案选择

# 1. 不蒜子统计（推荐新手）

优点：

配置简单，无需注册
轻量级，加载速度快
免费使用

缺点：

功能相对简单
数据存储在第三方服务

# 2. Valine + LeanCloud 统计

优点：

功能丰富，同时支持评论和统计
数据可控，存储在自己的 LeanCloud 应用中
可自定义样式和功能

缺点：

需要注册 LeanCloud 账号
配置相对复杂

# 🚀 快速配置

# 不蒜子统计配置

在主题配置文件中启用：

# 不蒜子统计
busuanzi:
  enable: true
  site_uv: true    # 站点总访客数
  site_pv: true    # 站点总访问量
  page_pv: true    # 页面访问量

自动加载脚本：

不蒜子统计会自动加载，无需额外配置。

# LeanCloud + Valine 配置

注册 LeanCloud 账号：
- 访问 LeanCloud 控制台
- 注册账号并创建应用
获取应用信息：
- 在应用设置中找到 App ID 和 App Key
- 复制这两个值
配置 Valine：

valine:
  appId: 你的_APP_ID
  appKey: 你的_APP_KEY
  placeholder: ヾ(≧∇≦*)ゝ 说点什么吧~
  pageSize: 10
  lang: zh-CN
  visitor: true # 开启访问量统计

# 📊 自定义样式

# CSS 样式定制

/* 访问量统计样式 */
.site-stats {
  text-align: center;
  padding: 20px;
  background: var(--color-bg-code);
  border-radius: 8px;
}

.stats-item {
  display: inline-block;
  margin: 0 15px;
  padding: 10px 15px;
  background: var(--color-bg);
  border-radius: 5px;
}

.stats-count {
  font-size: 1.4em;
  font-weight: bold;
  color: var(--color-primary);
}

# JavaScript 功能扩展

// 自定义统计功能
function addCustomStats() {
  // 添加页面加载时间统计
  const loadTime = performance.now();
  console.log(`页面加载时间: ${loadTime.toFixed(2)}ms`);
  
  // 添加用户停留时间统计
  let startTime = Date.now();
  window.addEventListener('beforeunload', function() {
    const stayTime = Date.now() - startTime;
    console.log(`页面停留时间: ${(stayTime / 1000).toFixed(2)}s`);
  });
}

# 🔧 高级配置

# 1. 数据备份

定期备份 LeanCloud 中的统计数据：

// 导出统计数据
function exportStatsData() {
  // 连接到 LeanCloud
  // 查询统计数据
  // 导出为 JSON 格式
}

# 2. 数据分析

创建简单的数据分析面板：

<div class="analytics-panel">
  <h3>访问趋势</h3>
  <canvas id="statsChart"></canvas>
</div>

# 3. 性能优化

// 延迟加载统计脚本
function lazyLoadStats() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadStatsScript();
        observer.unobserve(entry.target);
      }
    });
  });
  
  const statsElement = document.querySelector('.stats-container');
  if (statsElement) {
    observer.observe(statsElement);
  }
}

# 📈 数据监控

# 设置访问量目标

const STATS_GOALS = {
  daily: 100,    // 日访问量目标
  monthly: 3000, // 月访问量目标
  yearly: 36000  // 年访问量目标
};

function checkGoals(currentStats) {
  // 检查是否达到目标
  // 发送通知或记录日志
}

# 异常监控

function monitorStats() {
  // 监控统计服务是否正常
  // 检测异常访问模式
  // 自动报警机制
}

# 🎨 界面美化

# 动画效果

.stats-count {
  transition: all 0.3s ease;
}

.stats-count:hover {
  transform: scale(1.1);
  color: var(--color-accent);
}

# 图表展示

使用 Chart.js 或其他图表库展示访问趋势：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 创建访问量趋势图
const ctx = document.getElementById('statsChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
    datasets: [{
      label: '月访问量',
      data: [1200, 1900, 3000, 5000, 2000, 3000],
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  }
});
</script>

# 🔒 隐私保护

// 征得用户同意后再启用统计
function requestStatsConsent() {
  if (!localStorage.getItem('stats-consent')) {
    // 显示同意对话框
    showConsentDialog();
  } else {
    // 启用统计功能
    enableStats();
  }
}

# 数据匿名化

// 对 IP 地址进行匿名化处理
function anonymizeIP(ip) {
  return ip.replace(/\.\d+$/, '.xxx');
}

# 📝 总结

通过以上配置，你的 Hexo 博客就拥有了完整的访问量统计功能。建议：

新手用户：先使用不蒜子统计，简单易用
进阶用户：配置 LeanCloud + Valine，功能更丰富
高级用户：自定义统计功能，满足特殊需求

记住定期备份统计数据，确保数据安全！

本文配置基于 Shoka 主题，其他主题可能需要适当调整