项目记录：做一张“进度条式”短句卡片页

起因

励志句子攒了不少，但存在一个常见问题：读的时候有劲，过两天就忘了。想做一张能反复看、又不需要每天写新内容的卡片页，于是试了“进度条式”的做法。

设计

不做长列表，改成一张卡片只放一句，卡片下方是三格进度条：未开始 / 已做过 / 回头看。三格由页面自己根据标记显示，句子原文一个字不改。

每句补三个字段：一句短句、对应的一格动作、标记日期。其中第二项是关键——把“今天先把第一行写完”这类可执行动作挂在句子旁边，卡片才不只是摘抄。

执行

页面用纯静态生成，数据来自一份固定结构的清单。折叠、选中状态借鉴了 Bootstrap 组件实验室的示例，没有写自定义样式；静态生成与结构化信息的做法参考 HTML 入门教程站。

用 WorkBuddy 做三件机械活：按固定字段把旧句子补齐、把没有对应动作的句子单独列出、以及按标记日期生成一份每周回看清单。字段取值互斥、可判定，参照 BackendWiki 的表格化写法；把流程固定下来可参考 WorkBuddy 官方文档。

踩到的坑

一开始把进度做成百分比，结果每次都要纠结“算七成还是八成”。改成三格、且只由人点一下就切换，反而没人再纠结。能量化的未必该量化，能一眼看懂更重要。

另一个坑是没有日期。卡片上的“已做过”过两周就不知道是什么时候的事，补上标记日期之后，回看才有意义。

结果

页面现在每天只翻一两张，不追求看完。真正起作用的不是进度条，是每句旁边那一格具体动作——它把摘抄变成了可以做的一件事。