📊 数据页面功能简介

Demius 主题的数据页面功能为您提供了一个综合的数据统计展示平台。通过集成 Umami 访问统计和 Hugo 站点数据，您可以轻松地向访客展示网站的各项数据指标，包括访问统计、文章数量、标签分类等信息。

主要特性

  • 📈 访问统计：集成 Umami 访问统计，实时展示网站访问数据
  • 📊 多维度数据：今日访客、今日浏览、昨日访客、昨日浏览、本月浏览、本年浏览
  • 📝 站点数据：文章总数、标签数量、分类数量、运行年份
  • 🎨 精美卡片：现代化的数据卡片设计，视觉效果佳
  • 🌈 渐变色图标：每个指标独特的渐变色图标
  • 💫 数字动画：数字递增动画效果，提升视觉体验
  • 📈 千分位格式：支持千分位格式化显示，便于阅读大数字
  • 🔄 自动更新：自动获取和刷新数据
  • 📱 响应式设计：完美适配各种设备尺寸
  • 🌙 暗色模式：自动适配明暗主题
  • ⚡ PJAX 兼容：支持无刷新切换页面

🚀 快速开始

1. 创建数据页面

在 content/ 目录下创建 data.md 文件：

---
title: "数据统计"
date: 2025-10-27T20:00:00+08:00
type: "data"
layout: "data"
comments: false
slug: "data"
---

欢迎来到数据统计页面！这里展示了网站的各项数据指标。

2. 配置 Umami 统计

在 hugo.toml 文件中配置 Umami 统计：

[params.analytics]
  [params.analytics.umami]
    enable = true                          # 是否启用Umami统计
    scriptUrl = "https://umami.demius.tech/script.js"  # Umami统计脚本地址
    websiteId = "30e2c640-c868-4e89-a138-3c541c2049d5"  # 网站ID
    # 数据页面展示配置
    showInDataPage = true                  # 是否在数据页面显示统计数据
    apiUrl = "https://umamiapi.demius.tech/"  # 统计数据API地址

3. 配置导航菜单（可选）

在 hugo.toml 文件中添加数据页面到导航菜单：

[[menu.main]]
  name = "数据"
  url = "/data/"
  weight = 4
  parent = "statistics"  # 指定父级菜单为"统计"
  [menu.main.params]
    icon = "/img/icons/data.svg"

4. 访问数据页面

构建网站后，访问 /data 路径即可查看数据统计页面。

📝 配置详解

页面 Front Matter

数据页面使用以下 Front Matter 配置：

字段 类型 必填 说明
title string ✅ 页面标题（如：“数据统计”）
date string ✅ 页面创建日期（格式：YYYY-MM-DDTHH:mm:ss+08:00）
type string ✅ 页面类型：data
layout string ✅ 页面布局：data
comments boolean ❌ 是否启用评论（默认禁用）
slug string ❌ 页面 URL 路径（如：“data”）

Umami 统计配置

配置项 类型 必填 说明
enable boolean ✅ 是否启用 Umami 统计
scriptUrl string ✅ Umami 统计脚本地址（格式：https://your-umami-domain/script.js）
websiteId string ✅ 在 Umami 后台创建网站后获得的唯一ID
showInDataPage boolean ❌ 是否在数据页面显示统计数据（默认 false）
apiUrl string ❌ 统计数据 API 地址（用于数据页面获取访问统计）
useForPostViews boolean ❌ 是否使用 Umami API 获取文章浏览量（默认 true）

📊 数据指标说明

Umami 访问统计（需配置 API）

当 showInDataPage = true 且配置了 apiUrl 后，数据页面会显示以下访问统计数据：

1. 今日访客（UV）

  • 说明：今天的独立访客数
  • 单位：UV（Unique Visitors）
  • 图标：用户图标（紫色渐变）
  • 数据来源：Umami API

2. 今日浏览（PV）

  • 说明：今天的页面浏览量
  • 单位：PV（Page Views）
  • 图标：眼睛图标（粉红渐变）
  • 数据来源：Umami API

3. 昨日访客（UV）

  • 说明：昨天的独立访客数
  • 单位：UV（Unique Visitors）
  • 图标：用户群图标（蓝青渐变）
  • 数据来源：Umami API

4. 昨日浏览（PV）

  • 说明：昨天的页面浏览量
  • 单位：PV（Page Views）
  • 图标：图表图标（绿青渐变）
  • 数据来源：Umami API

5. 本月浏览（PV）

  • 说明：本月累计浏览量
  • 单位：PV（Page Views）
  • 图标：日历图标（粉黄渐变）
  • 数据来源：Umami API

6. 本年浏览（PV）

  • 说明：本年累计浏览量
  • 单位：PV（Page Views）
  • 图标：面积图图标（青紫渐变）
  • 数据来源：Umami API

站点数据（自动获取）

数据页面会自动显示以下站点数据：

1. 文章总数

  • 说明：网站发布的文章总数
  • 计算方式：统计所有 Type 为 posts 的页面
  • 图标：文件图标

2. 标签数量

  • 说明：网站使用的标签总数
  • 计算方式：统计所有标签的数量
  • 图标：标签图标

3. 分类数量

  • 说明：网站使用的分类总数
  • 计算方式：统计所有分类的数量
  • 图标：文件夹图标

4. 运行年份

  • 说明：网站运行的当前年份
  • 计算方式：使用当前系统年份
  • 图标：日历图标

💡 使用示例

示例 1：基础配置

[params.analytics]
  [params.analytics.umami]
    enable = true
    scriptUrl = "https://umami.demius.tech/script.js"
    websiteId = "30e2c640-c868-4e89-a138-3c541c2049d5"
    showInDataPage = true
    apiUrl = "https://umamiapi.demius.tech/"

效果： 启用 Umami 统计，并在数据页面显示访问统计数据

示例 2：仅启用统计跟踪

[params.analytics]
  [params.analytics.umami]
    enable = true
    scriptUrl = "https://umami.demius.tech/script.js"
    websiteId = "30e2c640-c868-4e89-a138-3c541c2049d5"
    showInDataPage = false  # 不在数据页面显示统计数据

效果： 启用 Umami 统计跟踪，但不显示在数据页面

示例 3：完整配置

[params.analytics]
  [params.analytics.umami]
    enable = true                          # 启用Umami统计
    scriptUrl = "https://umami.demius.tech/script.js"  # Umami统计脚本地址
    websiteId = "30e2c640-c868-4e89-a138-3c541c2049d5"  # 网站ID
    # 数据页面展示配置
    showInDataPage = true                  # 在数据页面显示统计数据
    apiUrl = "https://umamiapi.demius.tech/"  # 统计数据API地址
    # 文章浏览量配置
    useForPostViews = true                 # 使用Umami API获取文章浏览量

效果： 完整的 Umami 统计配置，包括统计跟踪、数据页面展示和文章浏览量

🎨 样式特性

数据卡片

  • 网格布局：访问统计卡片使用 3 列网格布局（桌面端），2 列布局（平板端），单列布局（手机端）
  • 卡片样式：圆角卡片，带阴影效果
  • 渐变色图标：每个指标使用独特的渐变色图标背景
  • 数字动画：数字从 0 递增到实际值，带缓动动画效果
  • 千分位格式：大数字自动添加千分位分隔符（如：1,234,567）

站点数据卡片

  • 网格布局：4 列网格布局（桌面端），2 列布局（平板端），单列布局（手机端）
  • 图标样式：简洁的单色图标
  • 数值显示：直接显示数值，无动画效果

加载状态

  • 骨架屏：数据加载时显示骨架屏（--）
  • 错误提示：API 请求失败时显示错误提示信息
  • 自动重试：页面刷新时自动重新获取数据

📱 响应式支持

数据页面完全支持响应式设计：

  • 桌面端 (>768px)：
    • 访问统计：3 列网格布局
    • 站点数据：4 列网格布局
  • 平板端 (481-768px)：
    • 访问统计：2 列网格布局
    • 站点数据：2 列网格布局
  • 手机端 (<480px)：
    • 访问统计：单列布局
    • 站点数据：单列布局

🌙 暗色模式

数据页面自动适配明暗主题：

  • 亮色模式：清新的卡片样式，浅色背景
  • 暗色模式：优雅的深色背景，减少夜间阅读疲劳

🔧 API 配置说明

Umami API 要求

数据页面需要 Umami API 端点来提供统计数据。API 需要返回以下格式的 JSON 数据：

{
  "today_uv": 123,
  "today_pv": 456,
  "yesterday_uv": 98,
  "yesterday_pv": 321,
  "last_month_pv": 9876,
  "last_year_pv": 123456
}

API 字段说明

字段 类型 说明
today_uv number 今日独立访客数
today_pv number 今日页面浏览量
yesterday_uv number 昨日独立访客数
yesterday_pv number 昨日页面浏览量
last_month_pv number 本月累计浏览量
last_year_pv number 本年累计浏览量

API 配置要点

  1. CORS 支持：API 必须配置 CORS 跨域访问权限
  2. 缓存机制：建议实现缓存机制，减少对 Umami 服务器的请求压力
  3. 错误处理：API 需要返回适当的错误信息

💡 使用技巧

1. Umami 部署

  • Docker 部署：使用 Docker Compose 快速部署 Umami 服务
  • Vercel 部署：在 Vercel 上部署 Umami（推荐使用 Vercel Postgres）
  • 自建服务器：在自有服务器上部署 Umami

2. API 配置

  • 安全性：API 端点建议添加认证机制
  • 缓存：实现缓存机制，减少对 Umami 服务器的请求
  • 错误处理：妥善处理 API 错误情况，提供友好的错误提示

3. 数据更新

  • 自动更新：页面刷新时自动更新数据
  • 手动刷新：用户刷新页面即可获取最新数据
  • 更新频率：建议 API 缓存 10-15 分钟，平衡实时性和性能

4. 性能优化

  • API 缓存：使用缓存减少 API 请求
  • 懒加载：统计数据在页面加载后异步获取
  • 错误降级：API 不可用时，仍显示站点数据

📋 完整配置示例

# ===== Umami统计配置 =====
[params.analytics]
  [params.analytics.umami]
    enable = true                          # 是否启用Umami统计
    scriptUrl = "https://umami.demius.tech/script.js"  # Umami统计脚本地址
    websiteId = "30e2c640-c868-4e89-a138-3c541c2049d5"  # 网站ID
    # 数据页面展示配置
    showInDataPage = true                  # 是否在数据页面显示统计数据
    apiUrl = "https://umamiapi.demius.tech/"  # 统计数据API地址
    # 文章浏览量配置
    useForPostViews = true                 # 是否使用Umami API获取文章浏览量（默认true，API不可用时自动切换到localStorage方案）

---
title: "数据统计"
date: 2025-10-27T20:00:00+08:00
type: "data"
layout: "data"
comments: false
slug: "data"
---

## 📊 网站数据统计

欢迎来到数据统计页面！这里展示了网站的各项数据指标。

### 访问统计

通过 Umami 统计系统实时获取网站访问数据，包括今日访客、今日浏览、昨日数据等。

### 站点数据

展示网站的静态数据，包括文章总数、标签数量、分类数量等。

❓ 常见问题

Q: 数据页面不显示访问统计？

A: 检查以下几点：

  1. ✅ showInDataPage = true
  2. ✅ apiUrl 已配置
  3. ✅ API 端点可以正常访问
  4. ✅ API 返回正确的 JSON 格式
  5. ✅ API 配置了 CORS 跨域访问权限

Q: 统计数据加载失败？

A: 检查以下几点：

  1. ✅ API 地址正确
  2. ✅ API 服务器正常运行
  3. ✅ API 配置了 CORS 跨域访问权限
  4. ✅ 浏览器控制台是否有错误信息
  5. ✅ API 返回的数据格式是否正确

Q: 如何配置 Umami API？

A: 需要创建一个 API 端点来提供统计数据。可以参考 docs/umami-analytics-guide.md 中的 PHP API 示例，或者使用其他语言（Node.js、Python 等）实现。

Q: 站点数据不正确？

A: 站点数据是从 Hugo 站点直接获取的，确保：

  1. ✅ 文章页面的 type 设置为 posts
  2. ✅ 标签和分类已正确设置
  3. ✅ 清除缓存并重新构建网站

Q: 可以添加其他数据指标吗？

A: 可以！修改 themes/demius/layouts/data.html 模板，在"其他数据"区域添加新的数据卡片。

Q: 如何禁用访问统计？

A: 设置 showInDataPage = false 即可。站点数据仍会正常显示。

Q: API 不可用时的降级方案？

A: 如果 API 不可用，访问统计部分会显示错误提示，但站点数据仍会正常显示。不会影响页面的其他功能。

Q: 数据更新频率是多少？

A: 数据在页面加载时获取一次。如果需要更新数据，刷新页面即可。建议 API 实现缓存机制（如 10-15 分钟缓存），减少对 Umami 服务器的请求压力。

Q: 如何自定义数据卡片样式？

A: 可以通过以下方式：

  1. 修改主题 CSS：编辑 themes/demius/assets/css/_data-page.css
  2. 添加自定义 CSS：在 static/css/ 目录下创建自定义样式文件
  3. 覆盖样式：使用更高优先级的选择器覆盖默认样式

Q: 可以添加更多 Umami 统计指标吗？

A: 可以！需要：

  1. 修改 API 返回的数据格式，添加新指标
  2. 修改 themes/demius/layouts/data.html 模板，添加新的数据卡片
  3. 修改 themes/demius/assets/js/_data-page.js，添加新指标的数据更新逻辑

🔗 相关文档

📊 技术说明

数据来源

数据页面的数据来源于两部分：

  1. Umami 访问统计：通过自定义 API 端点从 Umami 服务器获取
  2. 站点数据：从 Hugo 站点直接获取（文章、标签、分类数量等）

功能特性

  • ✅ 访问统计：6 个访问统计指标（需配置 API）
  • ✅ 站点数据：4 个站点数据指标（自动获取）
  • ✅ 数字动画：递增动画效果
  • ✅ 千分位格式：自动格式化大数字
  • ✅ 响应式设计：完美适配各种设备
  • ✅ 暗色模式：自动适配明暗主题
  • ✅ PJAX 兼容：支持无刷新切换页面
  • ✅ 错误处理：API 错误时显示友好提示

API 要求

  • 数据格式：JSON
  • CORS 支持：必须配置跨域访问权限
  • 缓存机制：建议实现缓存（10-15 分钟）
  • 错误处理：返回适当的错误信息

希望这个数据页面功能能够帮助您更好地展示网站的各项数据指标！📊