赞赏名单 (Reward List)

在「关于页」等独立页面的正文中用 rewardlist 标签列出赞赏者，即可渲染出手账便签风格的赞赏名单卡片。每张卡片都是带和纸胶带、轻微歪斜的彩色纸条，右上角展示圆形头像。

版本要求

{% rewardlist %} / {% rewardlistfrom %} 标签需要主题 v0.6.0 及以上；更早的版本请使用下方的手写 HTML 结构。

标签写法

一行一位，字段用 | 分隔，顺序为 昵称 | 金额 | 日期 | 头像。只有昵称必填，中间的字段可以留空（昵称 || 2026-01-01）：

{% rewardlist %}
晓美焰 | ¥100 | 2026-08-14
鹿目圆 | ¥50 | 2026-08-09 | /images/madoka.jpg
巴麻美
{% endrewardlist %}

不填头像时，卡片右上角会自动显示昵称首字。

从数据文件读取

名单较长时可以放进站点数据文件，用 rewardlistfrom 读取。参数是数据路径：第一段是 source/_data/ 下的文件名，其余是文件内的键（写法与 stackalbumnav 相同）。字段为 name / amount / date / avatar：

# source/_data/rewards.yml
list:
  - name: 晓美焰
    amount: ¥100
    date: 2026-08-14
  - name: 鹿目圆
    amount: ¥50
    date: 2026-08-09
    avatar: /images/madoka.jpg

{% rewardlistfrom rewards.list %}

汇总行

两个标签都会在名单下方输出一行汇总（人数与最近的日期）。在标签名或数据路径后加 nototal 可以去掉：

{% rewardlist nototal %}
...
{% endrewardlist %}

{% rewardlistfrom rewards.list nototal %}

手写 HTML 结构

标签输出的就是下面这段结构，所以也可以在 Markdown 页面中直接手写：

<div class="reward-list">
  <div class="reward-list__item reward-list__item--p1">
    <img class="reward-list__avatar no-zoom" src="/images/donor.jpg" alt="昵称" loading="lazy" referrerpolicy="no-referrer">
    <span class="reward-list__name">昵称</span>
    <div class="reward-list__bottom">
      <span class="reward-list__amount">¥100</span>
      <time class="reward-list__date">2026-01-01</time>
    </div>
  </div>
</div>
<p class="reward-list__total">共 <strong>1</strong> 人 · 最新更新时间：<time datetime="2026-01-01">2026-01-01</time></p>

文本头像回退写法

如果没有赞助者的图片头像，可以省略 <img>，改用 .reward-list__avatar--text 展示昵称首字符：

<span class="reward-list__avatar reward-list__avatar--text" aria-hidden="true">昵</span>

视觉与特性

• 金额档位自动配色（人民币纸币色）： 客户端脚本会自动解析 .reward-list__amount 中的金额数字并匹配对应的纸币色徽章，无需手动编写金额颜色类：
  • ≥ 100：红色（reward-list__amount--100）
  • ≥ 50：绿色（reward-list__amount--50）
  • ≥ 20：棕黄色（reward-list__amount--20）
  • ≥ 10：蓝色（reward-list__amount--10）
  • ≥ 5：紫色（reward-list__amount--5）
  • ≥ 1：橄榄绿（reward-list__amount--1） (如需手动指定，也可直接在元素上添加上述类名覆盖自动判断)
• 循环便签纸色：支持 reward-list__item--p1 至 reward-list__item--p5 五种纸色档位（红 / 蓝 / 绿 / 橙 / 紫），顶部胶带颜色会随纸色自动切换。
• 防灯箱放大：头像图片带有 no-zoom 类名，避免被 Fancybox 包裹后破坏右上角贴纸定位。
• 响应式与深色模式：桌面端自动多列网格排布，窄屏自动切换为单列；完整适配深色模式与 prefers-reduced-motion。