头像 余温Gueen
头像
余温Gueen
-- : -- : --
切换主题色
-- : -- : --
博客 hugo-teek +5 网站统计统计分析不蒜子Umami配置说明 2684 字 11 分钟 -- 次

网站统计页面配置说明

最后更新于:

📊 网站统计页面概述

Hugo-Teek 主题提供完善的网站统计功能，支持多种统计服务接入，包括不蒜子访问统计、Umami网站分析、51.LA统计组件等，帮助博主全面了解站点访问情况。

✨ 统计功能特性

🎨 展示特性

  • 📈 实时数据：显示今日/昨日/本月访客数和访问量
  • 🎯 多维度：支持页面浏览量(PV)和独立访客数(UV)统计
  • 🌐 第三方集成：支持Umami、不蒜子、51.LA等多种统计服务
  • 📱 卡片展示：侧边栏站点统计卡片自动展示站点数据

⚙️ 配置特性

  • 🔌 灵活开关：每种统计服务均可独立启用/禁用
  • 🎨 样式定制：支持数字格式、主题颜色等自定义
  • 🔗 外部链接：可链接到详细的统计后台查看更多信息
  • 📊 数据合并：支持多种统计服务同时使用

📁 配置文件路径

网站统计功能涉及以下配置文件：

1# hugo-teek-site/config/themes/hugo-teek/services.toml
2# 包含不蒜子、Umami等统计服务的配置
1# hugo-teek-site/config/themes/hugo-teek/services.toml
2# 51.LA统计组件配置
1# hugo-teek-site/config/themes/hugo-teek/homepage.toml
2# 首页侧边栏站点统计卡片开关
1# hugo-teek-site/config/teek-plugins/menus.toml
2# 添加统计后台入口菜单

配置优先级

1配置合并顺序（优先级从低到高）：
21️⃣ config/themes/{theme}/services.toml（主题默认统计配置）
32️⃣ 运行时通过管理后台修改的配置

📈 不蒜子统计配置

启用不蒜子统计

不蒜子是一款轻量级的网站访问统计工具，支持显示今日/昨日/本月的访客数和访问量：

 1# config/themes/hugo-teek/services.toml
 2[analytics]
 3  [analytics.busuanzi]
 4    enabled = true                    # ◀️ 总开关：启用/禁用不蒜子统计
 5    url = "https://busuanzi-eo.xxdevops.cn/busuanzi.eo.js"
 6    api = "https://busuanzi-eo.xxdevops.cn/api/count"
 7    type = "eo"                       # ◀️ 版本类型：eo（推荐）| classic
 8    prefix = "busuanzi"
 9    style = "comma"                   # ◀️ 数字格式：comma（千分位）| none
10    pjax = false
11    page_pv = true                    # ◀️ 显示页面浏览量
12    site_pv = true                    # ◀️ 显示站点总浏览量
13    site_uv = true                    # ◀️ 显示站点独立访客数
1  enabled = true          # ◀️ 总开关，设为 false 禁用不蒜子统计
2  type = "eo"             # ◀️ EO版本支持更多功能，classic为传统版本
3  style = "comma"         # ◀️ comma=千分位格式(1,234)，none=纯数字(1234)
4  page_pv = true          # ◀️ 是否显示当前页面浏览量
5  site_pv = true          # ◀️ 是否显示站点总浏览量
6  site_uv = true          # ◀️ 是否显示站点独立访客数

不蒜子显示效果

1今日访客数 1 | 今日访问量 387 | 昨日访客数 1 | 昨日访问量 1724 | 本月访客数 1 | 本月访问量 2110
1本文总阅读量 128 次

不蒜子字段详细说明

配置项必填说明可选值
enabled✅总开关true / false
type❌版本类型eo（推荐）/ classic
style❌数字显示格式comma（千分位）/ none
url✅JS文件地址不蒜子服务URL
api✅API端点地址计数API地址
page_pv❌页面浏览量true / false
site_pv❌站点总浏览量true / false
site_uv❌站点独立访客true / false

🌐 Umami网站分析配置

启用Umami分析

Umami是一款开源的网站分析工具，提供详细的访问数据分析：

1# config/themes/hugo-teek/services.toml
2[analytics]
3  [analytics.umami]
4    enabled = true        # ◀️ 总开关：启用/禁用 Umami 分析
5    url = "https://umami.xxdevops.cn"
6    websiteId = "a50c01fa-f866-488d-a328-3ac73aa639f7"
1  enabled = true          # ◀️ 设为 true 启用 Umami 统计代码注入
2  url = "https://..."     # ◀️ Umami 服务地址
3  websiteId = "..."       # ◀️ 网站ID，在 Umami 后台获取

Umami后台入口配置

在导航栏添加Umami统计后台入口，方便快速查看详细数据：

 1# config/teek-plugins/menus.toml
 2[[main]]
 3  name = "📊 统计后台"
 4  parent = "about"
 5  url = "https://umami.xxdevops.cn/"
 6  weight = 33.0
 7  [main.params]
 8    icon = "bar-chart"
 9    external = true       # ◀️ 标记为外部链接
10    target = "_blank"     # ◀️ 在新窗口打开
1[[main]]
2  name = "📊 网站统计"
3  url = "https://umami.xxdevops.cn/"
4  weight = 10
5  [main.params]
6    icon = "bar-chart"
7    external = true
8    target = "_blank"

📋 51.LA统计组件配置

启用51.LA统计组件

51.LA提供可视化统计组件，可在页脚展示精美的访问统计：

1# config/themes/hugo-teek/services.toml
2[footer]
3  [footer.analytics]
4    la_widget_enabled = true    # ◀️ 总开关：启用/禁用 LA 统计组件
5    la_widget_id = "3LmZHLhDZIDpMaT0"
6    la_widget_theme = "#1690FF,#333333,#999999,#007BFF,#FFFFFF,#1690FF,12"
1  la_widget_enabled = true                    # ◀️ 设为 true 显示统计组件
2  la_widget_id = "你的组件ID"                  # ◀️ 在 51.LA 后台获取
3  la_widget_theme = "#1690FF,#333333,..."     # ◀️ 主题颜色配置（7个颜色值）

51.LA主题颜色说明

1la_widget_theme 格式：颜色1,颜色2,颜色3,颜色4,颜色5,颜色6,字体大小
2
3颜色1: 主色调（标题、边框）
4颜色2: 数字颜色
5颜色3: 标签颜色
6颜色4: 链接颜色
7颜色5: 背景颜色
8颜色6: 悬停颜色
9字体大小: 数字（单位：像素）
1# 蓝色主题（默认）
2la_widget_theme = "#1690FF,#333333,#999999,#007BFF,#FFFFFF,#1690FF,12"
3
4# 深色主题
5la_widget_theme = "#333333,#FFFFFF,#CCCCCC,#1690FF,#1A1A1A,#333333,12"
6
7# 绿色主题
8la_widget_theme = "#52C41A,#333333,#999999,#389E0D,#FFFFFF,#52C41A,12"

📊 站点统计卡片配置

启用站点统计卡片

站点统计卡片展示在首页侧边栏，显示文章数、分类数、标签数等站点数据：

1# config/themes/hugo-teek/homepage.toml
2[params.homeSidebar.siteInfo]
3    enabled = true        # ◀️ 设为 true 显示站点统计卡片
 1# ========================================
 2# 首页配置 (Homepage Configuration)
 3# ========================================
 4[params.homeSidebar]
 5
 6  # ========================================
 7  # 站点统计卡片 (Site Info Card)
 8  # ========================================
 9  # 显示站点统计信息（文章数、分类数等）
10  [params.homeSidebar.siteInfo]
11    enabled = true        # ◀️ 开关：启用/禁用站点统计卡片

站点统计卡片显示内容

1📄 文章总数：站点所有已发布文章数量
2📂 分类数量：站点所有分类数量
3🏷️ 标签数量：站点所有标签数量
4✏️ 总字数：所有文章字数总和（显示为 k 单位）
5📅 运行天数：站点自创建以来的运行天数
 1┌─────────────────────────────┐
 2│ 📊 站点统计                   │
 3├─────────────────────────────┤
 4│                             │
 5│   📄 文章      128 篇        │
 6│   📂 分类       12 个        │
 7│   🏷️ 标签       56 个        │
 8│   ✏️ 总字数    256k 字       │
 9│                             │
10│   本站运行 365 天            │
11│                             │
12└─────────────────────────────┘

站点启动日期配置

运行天数统计需要配置站点启动日期：

1# config/teek-plugins/site.toml
2[params]
3  # 站点启动日期（用于统计和展示）
4  siteStartDate = "2024-11-11"
1  siteStartDate = "2024-11-11"    # ◀️ 格式：YYYY-MM-DD
2                                  # 运行天数从该日期计算至今

📋 完整配置示例

典型博客统计配置

 1# ========================================
 2# 文件1: config/themes/hugo-teek/services.toml
 3# 统计服务配置
 4# ========================================
 5[analytics]
 6
 7  # 不蒜子访问统计
 8  [analytics.busuanzi]
 9    enabled = true
10    url = "https://busuanzi-eo.xxdevops.cn/busuanzi.eo.js"
11    api = "https://busuanzi-eo.xxdevops.cn/api/count"
12    type = "eo"
13    prefix = "busuanzi"
14    style = "comma"
15    pjax = false
16    page_pv = true
17    site_pv = true
18    site_uv = true
19
20  # Umami 网站分析
21  [analytics.umami]
22    enabled = true
23    url = "https://umami.xxdevops.cn"
24    websiteId = "a50c01fa-f866-488d-a328-3ac73aa639f7"
25
26# 51.LA 统计组件
27[footer]
28  [footer.analytics]
29    la_widget_enabled = true
30    la_widget_id = "3LmZHLhDZIDpMaT0"
31    la_widget_theme = "#1690FF,#333333,#999999,#007BFF,#FFFFFF,#1690FF,12"
1# ========================================
2# 文件2: config/themes/hugo-teek/homepage.toml
3# 首页站点统计卡片
4# ========================================
5[params.homeSidebar.siteInfo]
6    enabled = true
1# ========================================
2# 文件3: config/teek-plugins/site.toml
3# 站点基础信息
4# ========================================
5[params]
6  siteStartDate = "2024-11-11"
 1# ========================================
 2# 文件4: config/teek-plugins/menus.toml
 3# 导航栏统计后台入口
 4# ========================================
 5[[main]]
 6  name = "📊 统计后台"
 7  parent = "about"
 8  url = "https://umami.xxdevops.cn/"
 9  weight = 33.0
10  [main.params]
11    icon = "bar-chart"
12    external = true
13    target = "_blank"

⚙️ 通过管理后台配置

使用 Hugo Teek Admin

Hugo-Teek 提供可视化管理后台，可图形化配置统计服务：

1make dev-admin
2# 访问: http://localhost:8080
11️⃣ 登录管理后台
22️⃣ 进入「外观管理」->「服务配置」
33️⃣ 开启/关闭不蒜子、Umami等统计服务
44️⃣ 填写对应的配置参数（URL、ID等）
55️⃣ 保存后自动生成配置

配置方式对比

配置方式适用场景难度灵活性
管理后台快速调整、可视化编辑⭐ 简单⭐⭐⭐
手动编辑批量修改、版本控制⭐⭐ 中等⭐⭐⭐⭐⭐

🔧 常见问题

统计数据不显示或显示异常

1原因：enabled 未启用或网络问题
2解决：
31️⃣ 检查 services.toml 中 [analytics.busuanzi] enabled = true
42️⃣ 确认 url 和 api 地址可正常访问
53️⃣ 检查浏览器控制台是否有 JS 加载错误
64️⃣ 确认网络连接正常，不蒜子服务可达
1原因：websiteId 错误或配置未生效
2解决：
31️⃣ 检查 websiteId 是否与 Umami 后台一致
42️⃣ 确认 url 地址正确（包含 https://）
53️⃣ 在 Umami 后台确认网站已添加
64️⃣ 检查浏览器开发者工具 Network 面板是否有请求
1原因：widget_id 错误或 enabled 未开启
2解决：
31️⃣ 检查 la_widget_enabled = true
42️⃣ 确认 la_widget_id 从 51.LA 后台正确获取
53️⃣ 检查主题颜色格式是否正确（7个颜色值）
64️⃣ 确认 51.LA 统计代码已正确部署
1原因：enabled 设为 false 或启动日期未配置
2解决：
31️⃣ 检查 homepage.toml 中 siteInfo.enabled = true
42️⃣ 确认 site.toml 中 siteStartDate 已配置
53️⃣ 检查首页布局是否包含侧边栏
64️⃣ 重启开发服务器：make dev

配置生效检查清单

1✅ 配置文件路径正确
2✅ TOML 语法无误（使用在线 TOML 验证器检查）
3✅ 启用开关设为 true
4✅ 必填字段（url、api、websiteId等）已填写
5✅ 站点启动日期格式正确（YYYY-MM-DD）
6✅ 运行 make dev 或 make build 重新合并配置
7✅ 浏览器强制刷新（Ctrl+F5）清除缓存

📝 配置模板速查

常用统计配置模板

 1# config/themes/hugo-teek/services.toml
 2[analytics]
 3  [analytics.busuanzi]
 4    enabled = true
 5    url = "https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
 6    api = "https://busuanzi.ibruce.info/api/count"
 7    type = "classic"
 8    style = "comma"
 9    site_pv = true
10    site_uv = true
1# config/themes/hugo-teek/services.toml
2[analytics]
3  [analytics.umami]
4    enabled = true
5    url = "https://umami.example.com"
6    websiteId = "your-website-id"
1# config/themes/hugo-teek/services.toml
2[footer]
3  [footer.analytics]
4    la_widget_enabled = true
5    la_widget_id = "your-widget-id"
6    la_widget_theme = "#1690FF,#333333,#999999,#007BFF,#FFFFFF,#1690FF,12"
 1# config/themes/hugo-teek/services.toml
 2[analytics]
 3  [analytics.busuanzi]
 4    enabled = true
 5    url = "https://busuanzi-eo.xxdevops.cn/busuanzi.eo.js"
 6    api = "https://busuanzi-eo.xxdevops.cn/api/count"
 7    type = "eo"
 8    style = "comma"
 9    site_pv = true
10    site_uv = true
11  
12  [analytics.umami]
13    enabled = true
14    url = "https://umami.xxdevops.cn"
15    websiteId = "your-website-id"
16
17[footer]
18  [footer.analytics]
19    la_widget_enabled = true
20    la_widget_id = "your-widget-id"
21    la_widget_theme = "#1690FF,#333333,#999999,#007BFF,#FFFFFF,#1690FF,12"

🎉 网站统计页面配置完成！

如有问题，请在 Hugo-Teek项目仓库 的 Issues 中反馈

📡
👤 作者: 余温Gueen
🔗 链接: https://wiki.xxdevops.cn/hobby/gthgs
🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 余温Gueen Blog！
推荐使用微信支付
微信支付二维码
推荐使用支付宝
支付宝二维码
最新文章