支持清单页面使用示例

💝 支持清单功能简介

Demius 主题的支持清单功能为您提供了一个优雅的支持者管理和展示方案。通过分组管理和等级系统，您可以轻松组织和展示支持您的朋友们的打赏记录，并显示统计信息，让支持者感受到您的感激之情。

主要特性

📊 统计信息：显示总打赏金额、支持人数、最后更新日期
🏆 等级系统：支持金牌、银牌、铜牌、普通四个等级
📖 分组管理：支持创建多个支持者分组（主题赞助者、内容创作支持、技术交流支持等）
👤 详细信息：支持者头像、名称、打赏金额、日期、留言
🎨 等级徽章：不同等级显示不同的徽章和边框颜色
🖼️ 头像展示：每个支持者支持头像图片
💬 留言显示：支持显示支持者的留言
📱 响应式设计：完美适配各种设备
🌙 暗色模式：自动适配明暗主题
📋 数据管理：通过YAML文件管理数据

🚀 快速开始

1. 创建支持清单页面

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

---
title: "支持清单"
date: 2025-10-29T17:00:00+08:00
type: "supporters"
layout: "supporters"
comments: true
---

感谢所有支持本站和主题的朋友们 ❤️

你们的支持是我持续创作和维护的最大动力！

2. 配置支持清单数据

在项目根目录的 data/ 文件夹下创建 supporters.yaml 文件：

# 总统计
statistics:
  totalAmount: 3680      # 总打赏金额
  totalCount: 15         # 总支持人数
  updateDate: "2025-10-29"  # 最后更新日期

# 支持者分组
groups:
  - name: "主题赞助者"
    description: "感谢这些朋友对 Demius 主题的喜爱和支持"
    supporters:
      - name: "张小明"
        avatar: "https://via.placeholder.com/100?text=ZXM"
        amount: 520
        date: "2025-10-15"
        message: "主题太棒了！简洁又美观，非常喜欢！"
        level: "gold"  # gold(金牌) | silver(银牌) | bronze(铜牌) | normal(普通)

3. 访问支持清单

构建网站后，访问 /supporters 路径即可查看支持清单。

📝 配置详解

统计信息结构

statistics:
  totalAmount: 3680      # 总打赏金额（数字，单位：元）
  totalCount: 15         # 总支持人数（数字）
  updateDate: "2025-10-29"  # 最后更新日期（格式：YYYY-MM-DD）

分组结构

每个分组包含以下字段：

字段	类型	必填	说明
`name`	string	✅	分组名称（如：主题赞助者、内容创作支持、技术交流支持等）
`description`	string	❌	分组描述（可选）
`supporters`	array	✅	支持者列表

支持者数据结构

每个支持者包含以下字段：

字段	类型	必填	说明
`name`	string	✅	支持者名称
`avatar`	string	✅	头像图片 URL
`amount`	number	✅	打赏金额（数字，单位：元）
`date`	string	❌	打赏日期（格式：YYYY-MM-DD）
`message`	string	❌	支持者留言（可选）
`level`	string	❌	支持者等级：`gold`（金牌）、`silver`（银牌）、`bronze`（铜牌）、`normal`（普通）

等级系统

支持者等级系统：

金牌（gold）：🏆 金牌徽章，金色边框和渐变背景
银牌（silver）：🥈 银牌徽章，银色边框和渐变背景
铜牌（bronze）：🥉 铜牌徽章，铜色边框和渐变背景
普通（normal）：⭐ 支持者徽章，灰色边框和渐变背景

💡 使用示例

示例 1：主题赞助者分组

groups:
  - name: "主题赞助者"
    description: "感谢这些朋友对 Demius 主题的喜爱和支持"
    supporters:
      - name: "张小明"
        avatar: "https://via.placeholder.com/100?text=ZXM"
        amount: 520
        date: "2025-10-15"
        message: "主题太棒了！简洁又美观，非常喜欢！"
        level: "gold"
        
      - name: "李华"
        avatar: "https://via.placeholder.com/100?text=LH"
        amount: 200
        date: "2025-10-20"
        message: "感谢作者的辛苦付出，继续加油！"
        level: "silver"
        
      - name: "王小美"
        avatar: "https://via.placeholder.com/100?text=WXM"
        amount: 100
        date: "2025-10-22"
        message: "主题很好用，支持一下~"
        level: "bronze"
        
      - name: "陈大力"
        avatar: "https://via.placeholder.com/100?text=CDL"
        amount: 66
        date: "2025-10-25"
        message: "666，很流畅的使用体验"
        level: "normal"

示例 2：内容创作支持分组

groups:
  - name: "内容创作支持"
    description: "感谢这些朋友对博客内容的认可"
    supporters:
      - name: "赵子龙"
        avatar: "https://via.placeholder.com/100?text=ZZL"
        amount: 300
        date: "2025-09-10"
        message: "文章写得很好，干货满满！"
        level: "silver"
        
      - name: "刘备"
        avatar: "https://via.placeholder.com/100?text=LB"
        amount: 188
        date: "2025-09-15"
        message: "学到了很多，感谢分享"
        level: "bronze"
        
      - name: "关羽"
        avatar: "https://via.placeholder.com/100?text=GY"
        amount: 88
        date: "2025-09-20"
        message: "内容很实用👍"
        level: "normal"

示例 3：技术交流支持分组

groups:
  - name: "技术交流支持"
    description: "感谢这些朋友在技术上的交流和帮助"
    supporters:
      - name: "诸葛亮"
        avatar: "https://via.placeholder.com/100?text=ZGL"
        amount: 666
        date: "2025-08-01"
        message: "一起进步，共同成长！"
        level: "gold"
        
      - name: "周瑜"
        avatar: "https://via.placeholder.com/100?text=ZY"
        amount: 250
        date: "2025-08-15"
        message: "代码质量很高，学习了"
        level: "silver"
        
      - name: "孙权"
        avatar: "https://via.placeholder.com/100?text=SQ"
        amount: 128
        date: "2025-08-20"
        message: "感谢解答技术问题"
        level: "bronze"

示例 4：完整配置示例

# data/supporters.yaml
# 支持者清单数据
# 记录那些支持本站和主题的朋友们

# 总统计
statistics:
  totalAmount: 3680      # 总打赏金额
  totalCount: 15         # 总支持人数
  updateDate: "2025-10-29"  # 最后更新日期

# 支持者分组
groups:
  - name: "主题赞助者"
    description: "感谢这些朋友对 Demius 主题的喜爱和支持"
    supporters:
      - name: "张小明"
        avatar: "https://via.placeholder.com/100?text=ZXM"
        amount: 520
        date: "2025-10-15"
        message: "主题太棒了！简洁又美观，非常喜欢！"
        level: "gold"
        
      - name: "李华"
        avatar: "https://via.placeholder.com/100?text=LH"
        amount: 200
        date: "2025-10-20"
        message: "感谢作者的辛苦付出，继续加油！"
        level: "silver"
        
      - name: "王小美"
        avatar: "https://via.placeholder.com/100?text=WXM"
        amount: 100
        date: "2025-10-22"
        message: "主题很好用，支持一下~"
        level: "bronze"
        
      - name: "陈大力"
        avatar: "https://via.placeholder.com/100?text=CDL"
        amount: 66
        date: "2025-10-25"
        message: "666，很流畅的使用体验"
        level: "normal"

  - name: "内容创作支持"
    description: "感谢这些朋友对博客内容的认可"
    supporters:
      - name: "赵子龙"
        avatar: "https://via.placeholder.com/100?text=ZZL"
        amount: 300
        date: "2025-09-10"
        message: "文章写得很好，干货满满！"
        level: "silver"
        
      - name: "刘备"
        avatar: "https://via.placeholder.com/100?text=LB"
        amount: 188
        date: "2025-09-15"
        message: "学到了很多，感谢分享"
        level: "bronze"
        
      - name: "关羽"
        avatar: "https://via.placeholder.com/100?text=GY"
        amount: 88
        date: "2025-09-20"
        message: "内容很实用👍"
        level: "normal"

  - name: "技术交流支持"
    description: "感谢这些朋友在技术上的交流和帮助"
    supporters:
      - name: "诸葛亮"
        avatar: "https://via.placeholder.com/100?text=ZGL"
        amount: 666
        date: "2025-08-01"
        message: "一起进步，共同成长！"
        level: "gold"
        
      - name: "周瑜"
        avatar: "https://via.placeholder.com/100?text=ZY"
        amount: 250
        date: "2025-08-15"
        message: "代码质量很高，学习了"
        level: "silver"
        
      - name: "孙权"
        avatar: "https://via.placeholder.com/100?text=SQ"
        amount: 128
        date: "2025-08-20"
        message: "感谢解答技术问题"
        level: "bronze"

  - name: "其他支持者"
    description: "感谢所有支持本站的朋友"
    supporters:
      - name: "曹操"
        avatar: "https://via.placeholder.com/100?text=CC"
        amount: 520
        date: "2025-07-10"
        message: "网站设计很棒！"
        level: "gold"
        
      - name: "吕布"
        avatar: "https://via.placeholder.com/100?text=LB2"
        amount: 99
        date: "2025-07-20"
        message: "支持一下站长"
        level: "normal"
        
      - name: "貂蝉"
        avatar: "https://via.placeholder.com/100?text=DC"
        amount: 200
        date: "2025-07-25"
        message: "界面很美观♥"
        level: "silver"
        
      - name: "司马懿"
        avatar: "https://via.placeholder.com/100?text=SMY"
        amount: 188
        date: "2025-08-05"
        message: "功能很强大"
        level: "bronze"
        
      - name: "黄忠"
        avatar: "https://via.placeholder.com/100?text=HZ"
        amount: 88
        date: "2025-08-25"
        message: "加油！"
        level: "normal"

🎨 样式特性

统计信息卡片

页面顶部显示三个统计卡片：

💰 总打赏金额：显示所有支持者的总打赏金额
👥 支持人数：显示总支持人数
📅 最后更新：显示最后更新日期

支持者卡片

每个支持者以精美的卡片形式展示，包含：

等级徽章：根据等级显示不同的徽章（🏆金牌、🥈银牌、🥉铜牌、⭐支持者）
头像：支持者头像图片，圆形显示
名称：支持者名称
打赏金额：💝 图标 + 金额（¥XXX）
日期：打赏日期
留言：💬 图标 + 留言内容（如果有）

等级系统样式

金牌：金色渐变背景徽章，金色边框和头像边框
银牌：银色渐变背景徽章，银色边框和头像边框
铜牌：铜色渐变背景徽章，铜色边框和头像边框
普通：灰色渐变背景徽章，灰色边框和头像边框

分组展示

每个分组显示分组名称和描述（如果有）
分组内的支持者以网格布局展示
支持多个分组，清晰分类

📱 响应式支持

支持清单页面完全支持响应式设计：

桌面端：多列网格布局（4-5列）
平板端：3列网格布局
手机端：2列网格布局，优化触摸体验

🌙 暗色模式

支持清单页面自动适配明暗主题：

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

🔧 自定义配置

修改页面内容

编辑 content/supporters.md 文件，可以添加页面介绍文字：

---
title: "支持清单"
date: 2025-10-29T17:00:00+08:00
type: "supporters"
layout: "supporters"
comments: true
---

感谢所有支持本站和主题的朋友们 ❤️

你们的支持是我持续创作和维护的最大动力！

### 支持方式

如果您觉得本站或主题对您有帮助，可以通过以下方式支持：

- 💰 打赏支持
- 📝 内容创作支持
- 🔧 技术交流支持
- ⭐ 其他支持方式

可以在这里添加更多的介绍文字，支持 Markdown 格式。

添加评论功能

在页面 Front Matter 中设置 comments: true 即可启用评论功能（需要配置评论系统）。

💡 使用技巧

1. 分组组织

按支持类型分类：主题赞助者、内容创作支持、技术交流支持等
按时间分类：2025年、2024年等
按金额分类：大额支持、小额支持等
根据个人习惯灵活组织

2. 等级管理

金牌：大额支持者（如 500元以上）
银牌：中等支持者（如 200-500元）
铜牌：小额支持者（如 100-200元）
普通：其他支持者（如 100元以下）

3. 头像管理

使用合适的头像尺寸（建议 100x100 或更大）
图片格式建议使用 JPG 或 WebP
将头像保存到 static/img/supporters/ 目录
提供备用头像（错误时显示默认图片 /img/404.jpg）

4. 统计信息更新

定期更新 statistics 中的 totalAmount（总打赏金额）
更新 totalCount（总支持人数）
更新 updateDate（最后更新日期）

5. 留言管理

为支持者添加留言，增加个性化
留言内容要简洁、真诚
可以感谢支持者的具体贡献

6. 日期管理

记录每个支持者的打赏日期
日期格式：YYYY-MM-DD
方便后续的感谢和回访

📋 完整示例

# data/supporters.yaml
# 支持者清单数据
# 记录那些支持本站和主题的朋友们

# 总统计
statistics:
  totalAmount: 3680      # 总打赏金额
  totalCount: 15         # 总支持人数
  updateDate: "2025-10-29"  # 最后更新日期

# 支持者分组
groups:
  - name: "主题赞助者"
    description: "感谢这些朋友对 Demius 主题的喜爱和支持"
    supporters:
      - name: "张小明"
        avatar: "https://via.placeholder.com/100?text=ZXM"
        amount: 520
        date: "2025-10-15"
        message: "主题太棒了！简洁又美观，非常喜欢！"
        level: "gold"
        
      - name: "李华"
        avatar: "https://via.placeholder.com/100?text=LH"
        amount: 200
        date: "2025-10-20"
        message: "感谢作者的辛苦付出，继续加油！"
        level: "silver"
        
      - name: "王小美"
        avatar: "https://via.placeholder.com/100?text=WXM"
        amount: 100
        date: "2025-10-22"
        message: "主题很好用，支持一下~"
        level: "bronze"
        
      - name: "陈大力"
        avatar: "https://via.placeholder.com/100?text=CDL"
        amount: 66
        date: "2025-10-25"
        message: "666，很流畅的使用体验"
        level: "normal"

  - name: "内容创作支持"
    description: "感谢这些朋友对博客内容的认可"
    supporters:
      - name: "赵子龙"
        avatar: "https://via.placeholder.com/100?text=ZZL"
        amount: 300
        date: "2025-09-10"
        message: "文章写得很好，干货满满！"
        level: "silver"
        
      - name: "刘备"
        avatar: "https://via.placeholder.com/100?text=LB"
        amount: 188
        date: "2025-09-15"
        message: "学到了很多，感谢分享"
        level: "bronze"
        
      - name: "关羽"
        avatar: "https://via.placeholder.com/100?text=GY"
        amount: 88
        date: "2025-09-20"
        message: "内容很实用👍"
        level: "normal"

  - name: "技术交流支持"
    description: "感谢这些朋友在技术上的交流和帮助"
    supporters:
      - name: "诸葛亮"
        avatar: "https://via.placeholder.com/100?text=ZGL"
        amount: 666
        date: "2025-08-01"
        message: "一起进步，共同成长！"
        level: "gold"
        
      - name: "周瑜"
        avatar: "https://via.placeholder.com/100?text=ZY"
        amount: 250
        date: "2025-08-15"
        message: "代码质量很高，学习了"
        level: "silver"
        
      - name: "孙权"
        avatar: "https://via.placeholder.com/100?text=SQ"
        amount: 128
        date: "2025-08-20"
        message: "感谢解答技术问题"
        level: "bronze"

  - name: "其他支持者"
    description: "感谢所有支持本站的朋友"
    supporters:
      - name: "曹操"
        avatar: "https://via.placeholder.com/100?text=CC"
        amount: 520
        date: "2025-07-10"
        message: "网站设计很棒！"
        level: "gold"
        
      - name: "吕布"
        avatar: "https://via.placeholder.com/100?text=LB2"
        amount: 99
        date: "2025-07-20"
        message: "支持一下站长"
        level: "normal"
        
      - name: "貂蝉"
        avatar: "https://via.placeholder.com/100?text=DC"
        amount: 200
        date: "2025-07-25"
        message: "界面很美观♥"
        level: "silver"
        
      - name: "司马懿"
        avatar: "https://via.placeholder.com/100?text=SMY"
        amount: 188
        date: "2025-08-05"
        message: "功能很强大"
        level: "bronze"
        
      - name: "黄忠"
        avatar: "https://via.placeholder.com/100?text=HZ"
        amount: 88
        date: "2025-08-25"
        message: "加油！"
        level: "normal"

❓ 常见问题

Q: 如何添加新的支持者？

A: 在对应分组的 supporters 数组下添加新的支持者对象。

Q: 如何添加新的分组？

A: 在 data/supporters.yaml 文件中的 groups 数组下添加新的分组对象。

Q: 如何更新统计信息？

A: 修改 statistics 中的 totalAmount、totalCount 和 updateDate 字段。

Q: 如何设置支持者等级？

A: 在支持者对象中添加 level 字段，设置为 gold、silver、bronze 或 normal。

Q: 等级是如何划分的？

A: 等级划分没有固定标准，可以根据打赏金额、贡献程度等灵活设置。建议：

金牌：大额支持者（如 500元以上）
银牌：中等支持者（如 200-500元）
铜牌：小额支持者（如 100-200元）
普通：其他支持者（如 100元以下）

Q: 头像无法显示怎么办？

A: 检查头像 URL 是否正确，确保图片文件存在于指定位置。主题会自动处理图片加载失败的情况，显示默认图片 /img/404.jpg。

Q: 如何添加支持者留言？

A: 在支持者对象中添加 message 字段，设置留言内容。

Q: 留言是必填的吗？

A: 不是，message 字段是可选的。如果没有留言，可以不添加该字段。

Q: 日期格式是什么？

A: 日期格式为 YYYY-MM-DD，例如：2025-10-29。

Q: 分组描述是必填的吗？

A: 不是，description 字段是可选的。如果没有描述，可以不添加该字段。

Q: 如何移动支持者到其他分组？

A: 将支持者数据从一个分组的 supporters 数组剪切并粘贴到另一个分组的 supporters 数组。

🔗 相关文档

💝 技术说明

数据来源

支持清单功能的数据来源于手动编辑的 YAML 文件（data/supporters.yaml），支持灵活的分组和等级管理。

等级系统

金牌（gold）：🏆 金色渐变背景徽章，金色边框
银牌（silver）：🥈 银色渐变背景徽章，银色边框
铜牌（bronze）：🥉 铜色渐变背景徽章，铜色边框
普通（normal）：⭐ 灰色渐变背景徽章，灰色边框

功能特性

✅ 统计信息：自动计算并显示总打赏金额、支持人数、最后更新日期
✅ 分组管理：支持多个分组，灵活组织
✅ 等级系统：四个等级，不同样式展示
✅ 响应式设计：完美适配各种设备
✅ 暗色模式：自动适配明暗主题
✅ PJAX 兼容：支持无刷新切换

希望这个支持清单功能能够帮助您更好地展示和支持者之间的互动！💝