chore(spec): 5i 勾选 T1

Spec: 2026-11-02_blog-5i-fonts-polish Co-authored-by: GLM-5.3
fix(fonts): 字体切换真加载——按内容诉求注入，含瞬间排版类作用域缺口（5i T1）
2026-11-03 11:28:51 +08:00 · 2026-11-03 11:28:51 +08:00 · 2026-11-03 11:24:29 +08:00 · 2026-11-03 11:24:28 +08:00 · 2026-11-03 11:18:36 +08:00 · 2026-11-03 11:18:35 +08:00
29 changed files with 1288 additions and 318 deletions
@@ -0,0 +1,92 @@
+# Phase 5i：字体加载根治、交互缺陷修复与书架/开源页再设计 - 项目范围
+
+<!-- spec-format: 2 -->
+
+## 1. 问题定义
+- **项目目标**：①**字体切换全部失效的根因修复**（不是字体没做，是加载门禁错了）②按需扩展更多字族 ③Artalk「加载失败」误报与瞬间评论区配色脱同步 ④图库灯箱右上关闭被遮挡点不动，且右侧文字要能换字体/颜色 ⑤取消「彩色 ≤3 处/页」限制 ⑥开源页项目墙恢复居中 ⑦书架页重做 ⑧GitHub README 的动效图与更多展示形式回归（自托管，不再外链）
+- **目标用户**：站长（写得更自由、字体真的能换）与读者（交互不再有假失败、书架更耐看）
+- **核心价值**：把「看起来能用」变成「真的能用」——本轮多数是用户实测踩到的静默失效，根因都在加载门禁与层级覆盖
+
+## 2. 假设与待确认
+
+### 2.1 已确认事实（本轮实测取证，2026-11-02）
+- **字体失效根因**：`src/layouts/BaseLayout.astro:76` 把 serif/kai/kuaile/hwmc 四份字体 CSS 全部关在 `track === 'reading'` 里；技术轨与全站页面（默认 `track='tech'`）从不加载它们 → `.font-kai` 计算值虽为 `"LXGW WenKai Screen"` 但该 @font-face 不在文档字体集内（`document.fonts` 实测仅 Noto Sans/JetBrains），浏览器回退系统宋体/衬线，表现为「字体没换」
+- **汇文明朝链路**：`/fonts/subset/hwmc/fonts.css` 由 public 手工切片提供（339 片 unicode-range），仅在阅读轨被 preload；技术轨整条链路不加载
+- **Artalk 误报根因**：`ArtalkComments.astro:126` `if (document.getElementById('artalk-lib')) return initArtalk();` —— 软导航后脚本标签已在但 `window.Artalk` 尚未就绪，走 `initArtalk()` → `!lib` → `showRetry(true)` 永久显示失败提示；而评论随后正常渲染（用户所见「总显示失败但实际正常」）
+- **瞬间评论区配色脱同步**：Artalk 主题变量块选择器是 `#artalk-container` 与 `body .atk-layer-wrap`；瞬间的容器 id 为 `mom-atk-<slug>`，不在作用域内 → 回落到 Artalk 默认色
+- **灯箱关闭失灵根因**：`#lb-close` 位于 (1220,16,44×44)，`document.elementFromPoint` 命中的是 `.lb-meta.lb-l2`（右侧信息栏压在按钮上），点击被信息栏吃掉 → `lb.close()` 永不触发（生产实测 `open` 保持 true）
+- 书架页现状：色脊卡 + 年份分组网格；信息密度低、悬停无反馈、无简介/评分等可读线索
+- README 动效资源清单（7 类）：readme-typing-svg、github-readme-stats、streak-stats、activity-graph、贡献蛇（daily Action 产出的 SVG）、shields 徽章、komarev 访客
+
+### 2.2 关键假设
+- 字体按「内容实际用到的字族」按需加载即可兼顾体积与正确性（构建期扫正文/页面文案里的 `font-*` 类）
+- README 动效图均为 SVG（含 SMIL/CSS 动画），可在构建期抓取并自托管，运行时零第三方请求，动效保留
+- 灯箱信息栏与关闭钮的层叠冲突用 z-index + 命中区域划分即可解，无需改结构
+
+### 2.3 待确认问题
+- [ ] 字体扩展款式（用户选：宋系 / 楷系 / 手写系 / 现代黑系各补几款）
+- [ ] 书架重做方向（A 色脊墙精修 / B 封面网格 / C 书脊展开卡）
+- [ ] README 动效图确认「构建期抓取 + 自托管」路线
+
+### 2.4 可选解释与取舍
+- 字体：只按需加载，不做「全站全字族常开」（那会把单页体积拉到数 MB）
+- README 动效：自托管后仍保留原服务生成逻辑（GitHub Action / 第三方接口），只是把产物入仓并在构建期更新
+- 彩色限制取消后仍保留「灰阶外壳」红线（导航/页脚/按钮/背景不染色），只取消正文次数限制
+
+### 2.5 已证伪路径
+- 「字族没做」判断错误：@font-face 与切片文件都在，问题在加载门禁（本轮实测推翻）
+- 外链 README 图直接保留：既有 502/超时与外链依赖问题（上一阶段已判弃），改自托管
+
+## 3. 功能范围
+
+### 3.1 核心功能（MVP）
+- [ ] T1 字族按需加载根治 + 字族扩展机制：BaseLayout 由「轨道门禁」改为「内容诉求驱动」，扫描正文与页面文案中的 `font-*` 类决定加载哪些字体 CSS；补字体扩展清单与接入流程
+- [ ] T2 Artalk 误报与配色同步：失败提示改为「真失败才提示」（脚本 onerror / 库未就绪超时且未挂载才提示），重置挂载状态机；主题变量覆盖全部 Artalk 实例容器（含瞬间逐条）
+- [ ] T3 灯箱：右上关闭恢复可点（层级与命中区域），右侧信息栏文字支持 markdown + 排版类（字体/颜色）
+- [ ] T4 取消彩色强调次数限制（文档 + 后台 hint + 示例文章同步）
+- [ ] T5 开源页项目墙恢复居中排版
+- [ ] T6 书架页重做（按用户选定方向）
+- [ ] T7 README 动效图自托管与展示创新（typing / stats / streak / activity-graph / snake 等构建期抓取入仓，配合原生数据卡与热力图组合呈现）
+
+### 3.2 扩展功能
+- 字体扩展的实际接入（款式待用户定）
+
+### 3.3 不在范围内
+- 换 CMS、评论系统替换、Artalk 服务端改造
+
+## 4. 最小实现路径
+- 最简可行：字体先修门禁（用现有 6 族验证通过），再谈扩展；灯箱只改层级与命中；README 动效先接 3 类（typing / stats / snake），验证体积与稳定性后再补
+- 暂不引入：字体子集化的自动重跑编排、灯箱信息栏的富文本编辑器 UI
+- 不做的抽象：通用「动效资源托管」服务
+
+## 5. 技术决策
+- 技术栈：Astro 7.4.4 + @fontsource（自托管字体 CSS）+ Artalk v2 + 构建期 SVG 抓取缓存（复用 README 缓存模式）
+- 证据协议：evidence: runs
+- 本轮允许改动：src/layouts/BaseLayout.astro、src/styles/{global,tokens}.css、src/components/{ArtalkComments,MomentComments}.astro、src/components/geek/{ViewMeta,ProjectWall,GithubProfile}.astro、src/components/pages/{GalleryPage,BooksPage}.astro、src/pages/{gallery,books}.astro、src/lib/{projects,site-content}.ts、content/site/*.yaml、content/photos/*.json（caption 富文本）、content/.github-assets/（新缓存目录）、public/admin/*、scripts/build-perf/*、infra/deploy/build.sh、docs/*、tests/e2e.mjs
+- 本轮不应触碰：nginx/ESA、构建发布链主干顺序、双语路由结构、Artalk 服务端配置
+- Git integration branch：`spec/2026-11-02_blog-5i-fonts-polish`
+
+### 5.1 验证策略
+- 范围级别：package
+- 变更对象：字体加载策略、Artalk 挂载状态机与主题作用域、灯箱层级与富文本、书架与开源页版式、自托管动效资源
+- 快速检查：`pnpm astro build`（node26）+ `python3 scripts/build-perf/config-check.py .`
+- 集成检查：E2E（当前 46 项，本包新增字族加载/灯箱关闭/Artalk 误报断言）+ content-lint 0/0/0
+- 全项目检查：生产实测五条（字体真加载 `document.fonts` 命中、灯箱点关闭真关、评论失败提示不再误报、瞬间评论区配色与页面一致、开源页动效图零外链）；**升级条件**——仅当改动触及 BaseLayout 字体策略或 Artalk 挂载状态机时升级为全站视觉复核，本包因两者都动，已排一轮视觉终审
+
+## 6. 成功标准与验证方式
+- [ ] 技术轨文章里的 `.font-kai/.font-song/.font-huiwen/.font-kuaile` 真加载对应字体（`document.fonts` 命中且渲染变化） -> verify: task_0001
+- [ ] 评论失败提示只在真失败时出现，正常挂载不提示 -> verify: task_0002
+- [ ] 瞬间评论区配色与页面主题一致（明暗双态） -> verify: task_0003
+- [ ] 灯箱右上关闭按钮点击必关（含缩放/信息栏展开态） -> verify: task_0004
+- [ ] 灯箱右侧文字支持字体与颜色类 -> verify: task_0005
+- [ ] 彩色强调不再有限次约束且文档同步 -> verify: task_0006
+- [ ] 开源页项目墙内容居中 -> verify: task_0007
+- [ ] 书架页信息密度与视觉达设计稿并过视觉终审 -> verify: task_0008
+- [ ] README 动效图自托管且生产零第三方请求 -> verify: task_0009
+
+## 7. 风险与约束
+- 灰阶外壳红线不变，仅取消正文彩色次数限制
+- 自制切片/新增字体必须守单页增量 ≤150KB 阈值，超阈值只做子集化或降级为系统回退
+- README 动效自托管：抓取失败必须回落（隐藏该块，绝不炸构建），且产物必须入仓保证构建确定性
+- Artalk 状态机改动需覆盖三条触发路径（IO / 锚点 / 滚底），不得回归「评论区空着」
+- 多车道并行：BaseLayout、ArtalkComments、GalleryPage、BooksPage 各归单一车道，admin config 与 docs 由 orchestrator 统一改
@@ -0,0 +1,53 @@
+# Phase 5i：字体加载根治、交互缺陷修复与书架/开源页再设计 - 任务拆解
+
+## 使用规则
+- boundary/verify 齐备；verify 只读断言；车道工作树开发禁 git，收编由 orchestrator 统一提交
+- 构建一律 `export PATH="$HOME/.local/node/bin:$PATH"`（Node 26）+ `pnpm astro build`
+- E2E 口径：`pnpm astro build → cp -a dist /tmp/dist-e2e-5i → gz-server.py 18925 /tmp/dist-e2e-5i → E2E_BASE=http://127.0.0.1:18925 node tests/e2e.mjs`
+
+## 阶段一：实现
+
+- [x] T1 字族按需加载根治
+  - claim: worker-one
+  - boundary: src/layouts/BaseLayout.astro（去掉 `track === 'reading'` 的字体门禁，改为「本页内容实际用到的字族」驱动：构建期扫正文/页面文案里的 `font-kai|font-song|font-fangsong|font-huiwen|font-kuaile|font-serif` 决定注入哪几份字体 CSS；零命中时只加载 sans/mono）、src/lib/ 新增字体诉求探测工具
+  - verify: `grep -q "FONT_CSS\|neededFonts" src/layouts/BaseLayout.astro && E2E_BASE=http://127.0.0.1:18925 node tests/e2e.mjs 2>&1 | grep -qE "汇总: [0-9]+/[0-9]+ PASS"`
+
+- [x] T2 Artalk 失败误报修复
+  - claim: op-artalk
+  - boundary: src/components/ArtalkComments.astro（状态机重写：脚本 onerror 才是失败；`artalk-lib` 已存在但库未就绪时等 load 事件而非立即判失败；失败提示只在「确实未挂载且已超时」出现；`mounting` 在所有失败/成功路径复位）
+  - verify: `grep -q "onerror" src/components/ArtalkComments.astro && E2E_BASE=http://127.0.0.1:18925 node tests/e2e.mjs 2>&1 | grep -qE "汇总: [0-9]+/[0-9]+ PASS"`
+
+- [x] T3 瞬间评论区配色同步
+  - claim: op-artalk
+  - boundary: src/components/MomentComments.astro（Artalk 主题变量作用域覆盖瞬间容器 `[data-artalk-panel]`/`mom-atk-*`，复用文章页那套 `--at-color-*` 映射：建议抽出共享样式片段避免两份漂移）
+  - verify: `grep -qE "data-artalk-panel|mom-atk" src/components/MomentComments.astro && grep -q "at-color-bg" src/components/MomentComments.astro`
+
+- [x] T4 灯箱关闭修复 + 右侧文字可排版
+  - claim: orchestrator
+  - boundary: src/components/pages/GalleryPage.astro（关闭钮层级/命中区域；右侧信息栏不再拦截点击）、content/photos/*.json（caption 允许 markdown + 排版类）、必要时 src/lib/exif.ts 注释同步
+  - verify: `grep -q "lb-close" src/components/pages/GalleryPage.astro && E2E_BASE=http://127.0.0.1:18925 node tests/e2e.mjs 2>&1 | grep -qE "汇总: [0-9]+/[0-9]+ PASS"`
+
+- [x] T5 取消彩色强调次数限制
+  - claim: orchestrator
+  - boundary: docs/写作指南.md、docs/管理台.md、public/admin/config.yml（hint 里去掉「≤3 处」表述）、content/posts/writing-template.md + posts-en 同名（示例文章说明同步）
+  - verify: `! grep -rq "一页 ≤3 处\|≤3 处/页" docs/ content/posts/writing-template.md && grep -q "彩色" docs/写作指南.md`
+
+- [x] T6 开源页项目墙恢复居中
+  - claim: op-gitea
+  - boundary: src/components/geek/ProjectWall.astro（`align-items: center` + `text-align: center`，与用户审美偏好一致）
+  - verify: `grep -q "align-items: center" src/components/geek/ProjectWall.astro`
+
+- [ ] T7 书架页重做
+  - claim: orchestrator（方向待用户拍板）
+  - boundary: src/components/pages/BooksPage.astro、可选 content/site/books.yaml 新配置、src/i18n/ui.ts
+  - verify: `E2E_BASE=http://127.0.0.1:18925 node tests/e2e.mjs 2>&1 | grep -qE "汇总: [0-9]+/[0-9]+ PASS"`
+
+- [x] T8 README 动效图自托管与展示创新
+  - claim: op-gitea
+  - boundary: 新增 scripts/build-perf/fetch-readme-assets.mjs（构建期抓 typing/stats/streak/activity-graph/snake 等 SVG 到 content/.github-assets/，失败回落隐藏该块）、src/components/geek/GithubProfile.astro 或新增动效展示组件、build.sh 守卫挂载、docs 说明
+  - verify: `test -f scripts/build-perf/fetch-readme-assets.mjs && grep -q "github-assets" scripts/build-perf/fetch-readme-assets.mjs && python3 -c "import pathlib;p=pathlib.Path('dist/opensource/index.html').read_text();bad=[u for u in ['img.shields.io','readme-typing-svg','github-readme-stats','streak-stats','komarev'] if u in p];assert not bad,bad"`
+
+- [ ] T9 字族扩展（款式待用户拍板）
+  - claim: worker-one
+  - boundary: src/styles/tokens.css、src/styles/global.css、public/admin/typography-classes.js、public/fonts/（新增字体切片）、docs/写作指南.md 字体清单
+  - verify: `grep -c "font-" public/admin/typography-classes.js | awk '$1>=40'`
@@ -18,15 +18,15 @@ Use `##` for a section and `###` for a subsection. **Never use `#`** — the pos

 Leave a blank line between paragraphs. Inline you can use **bold**, *italic*, ~~strikethrough~~, `inline code`, and [ordinary links](https://astro.build).

-## 2. Colour emphasis: three per page at most
+## 2. Colour emphasis: as much as you need

-The rule comes from the design baseline: the shell is greyscale, so colour exists to weight one judgement in the body — three per page, maximum. More than that and it turns loud.
+Colour is **no longer capped** (the old "three per page" limit was lifted on 2026-11-02). The one rule that remains is the shell: navigation, footer, buttons and background stay greyscale — the shell is temperament, the body is expression.

 <span class="c-blue">First use: state one key conclusion in blue.</span> Then carry on normally.

 <span class="c-red">Second use: warn about a trap in red.</span> For example, “after changing a Markdown plugin you must clear `node_modules/.astro`, or the change silently does nothing”.

-<span class="c-green">Third use: confirm a working path in green.</span> After three, this section stays uncoloured.
+<span class="c-green">Confirm a working path in green.</span> If a whole paragraph deserves emphasis, mark the whole paragraph.

 There are eight hues (blue / teal / green / yellow / orange / red / pink / purple), each with a standard and a `-soft` variant, plus four greyscale classes (`ink-muted` / `ink-warm` / `ink-cool` / `ink-faint`) for lowering tone — those do not count against the colour budget.

@@ -84,7 +84,7 @@ Refer to variables inline like `posts`.

 | Capability | Syntax | Note |
 | --- | --- | --- |
-| Colour emphasis | `<span class="c-blue">` | three per page at most |
+| Colour emphasis | `<span class="c-blue">` | no limit (shell stays greyscale) |
 | Typeface | `<span class="font-kai">` | a whole page adds font weight |
 | Image | `![alt](./assets/<slug>/x.jpg)` | see the writing guide for size rules |
 | Video | frontmatter `video:` | lives in public/media, ≤50MB |
@@ -17,15 +17,15 @@ description: 一篇文章演示全站可用的排版能力：标题层级、彩

 段落之间空一行即可。行内可以**加粗**、*斜体*、~~删除线~~、`行内代码`，也可以放[普通链接](https://astro.build)。

-## 二、彩色强调：一页不超过三处
+## 二、彩色强调：想用多少用多少

-纪律来自设计基线：站点外壳是灰阶的，颜色只用来给正文某一个判断加重，一页最多三处。超过就变成花哨。
+颜色现在**没有次数限制**（2026-11-02 起取消了原来的「一页最多三处」）。唯一还守着的是外壳：导航、页脚、按钮、背景保持灰阶——外壳是气质，正文是表达。

 <span class="c-blue">第一处：一个关键结论用蓝色提出。</span> 后面照常叙述。

 <span class="c-red">第二处：需要警示的坑用红色。</span> 比如「改完 Markdown 插件必须清 `node_modules/.astro`，否则改动静默不生效」。

-<span class="c-green">第三处：确认可行的路径用绿色。</span> 三处之后，本节不再上色。
+<span class="c-green">确认可行的路径用绿色。</span> 想让整段都是重点也不必克制，把它们都标出来即可。

 可用色相共 8 组（blue / teal / green / yellow / orange / red / pink / purple），每组有标准与 `-soft` 两档；另有 4 个灰阶层级类（`ink-muted` / `ink-warm` / `ink-cool` / `ink-faint`）用于降调，不算彩色额度。

@@ -83,7 +83,7 @@ export function sortPosts<T extends Post>(posts: T[]): T[] {

 | 能力 | 写法 | 注意 |
 | --- | --- | --- |
-| 彩色强调 | `<span class="c-blue">` | 一页 ≤3 处 |
+| 彩色强调 | `<span class="c-blue">` | 不限次数（外壳仍灰阶） |
 | 换字族 | `<span class="font-kai">` | 整页换会拉字体体积 |
 | 图片 | `![说明](./assets/<slug>/x.jpg)` | 体积纪律见写作指南 |
 | 视频 | frontmatter `video:` | 放 public/media，≤50MB |
@@ -1,6 +1,6 @@
 tagline:
-  zh: 拥抱开源，热爱开源
-  en: Embracing open source, loving open source.
+  zh: 写作者 · 读者 · 快门按压者，拥抱开源。
+  en: Writer · Reader · Shutter-presser — embracing open source.
 latestPhotos: 4
 perTrackLimit: 6
 sections:
@@ -13,6 +13,9 @@ socials:
  - label: GitHub
    url: https://github.com/wait4xx
    icon: github
+  - label: RSS
+    url: /rss.xml
+    icon: rss
  - label: 邮件
    url: mailto:X@alumni.nudt.edu.cn
    icon: email
@@ -1,3 +1,14 @@
+# 打字机动效文案（档案卡顶部逐字轮播；每行双语，最多 6 行；留空用内置默认三行）
+typing:
+  - zh: 气象出身，写代码为乐
+    en: Trained in meteorology, coding for fun
+  - zh: 自托管一切能自托管的东西
+    en: Self-hosting whatever can be self-hosted
+  - zh: 拥抱开源，热爱开源
+    en: Embrace open source, love open source
+  - zh: 把读过的书、按下的快门都放进同一个工作台
+    en: Books read and shutters pressed, gathered in one workbench
+
 blurb:
  zh: 本站本身即开源：
  en: 'This site is itself open source:'
@@ -11,10 +11,10 @@ cp content/posts/writing-template.md content/posts/my-new-post.md
 # 改 frontmatter 的 title / pubDate / tags / description，删掉不需要的段落
 ```

-模板本身是一篇真文章（线上读：`/archives/writing-template/`），每节都在跑一种能力，你看到的效果就是源码的效果：标题层级、三处彩色强调、两族字体、引用、列表、代码窗条、表格、图片放大、链接卡片、`<details>` 折叠、分隔线。
+模板本身是一篇真文章（线上读：`/archives/writing-template/`），每节都在跑一种能力，你看到的效果就是源码的效果：标题层级、彩色强调、字族切换、引用、列表、代码窗条、表格、图片放大、链接卡片、`<details>` 折叠、分隔线。

 写之前只需记住三条纪律：
- **彩色 ≤3 处/页**：外壳是灰阶，颜色只用来给某个判断加重；超过就花哨
+- **彩色不限次数**（2026-11-02 用户拍板取消原「一页 ≤3 处」限制）：正文想用多少处颜色都可以；仍守的是另一条——**外壳灰阶**（导航/页脚/按钮/背景不染色），因为外壳是气质，正文是表达
 - **整页换字族要谨慎**：会给访问者拉一份中文字体（汇文明朝整页约 420KB，已子集化）
 - **折叠放细节不放结论**：`<details>` 里的内容可能永远没人展开

@@ -96,6 +96,12 @@ public/media/my-post/clip.mp4      ← 文件放这里

 见 `content/posts/media-sample.md`（draft 文章，仅构建验证用，不上线）。

+## 灯箱说明文字（图库 caption）
+
+图库照片的 `caption` 字段走同一套富文本管线：markdown（`**加粗**`、换行）+ 排版类（`<span class="c-blue font-kai">`）。灯箱里深底上的彩色会自动取暗底档。
+
+图库灯箱关闭：右上 `×`、`Esc`、点背景、点图（1× 时）都能关；缩放后移动鼠标召唤控件。
+
 ## 链接卡片（OG 预览卡）

 **一行只放一个链接、且它独立成段**时，构建期会抓取该页的 OG 信息渲染成卡片（标题 / 描述 / 站点图标 / 可选缩略图）：
@@ -30,8 +30,7 @@

 语义边界（刻意如此，别当 bug 报）：
 - **只影响列表顺序**：`pubDate` 不变、URL 不变、RSS 里的时间序列不变，订阅者不会看到时间错乱
- **支持多篇/多本同时置顶**：置顶组内部仍按日期倒序；书架页（/books）里每个置顶的书评都会排在前面并**默认展开**
- 书架页用「↑ + 横线」的回到顶部图标表示置顶（不写文字），与右侧展开箭头形状不同，不会混读
+- 多篇同时置顶时，置顶组内部仍按日期倒序
 - 关掉开关立即恢复时间序，没有"冷却期"

 ## 瞬间（5h 起与文章同级）
@@ -39,6 +39,13 @@ pnpm astro build
 [ -f scripts/build-perf/gen-sw-precache.mjs ] && node scripts/build-perf/gen-sw-precache.mjs dist || echo "[build] sw-precache 生成器未就绪，跳过"
 [ -f scripts/build-perf/inline-home-css.mjs ] && node scripts/build-perf/inline-home-css.mjs || echo "[build] inline-home 脚本未就绪，跳过"

+# README 动效资产（5i T8）：**不在此跑抓取**（避免发布链被外网抖动拖累），只做存在性守卫 + 缺资产告警
+if [ -f public/github-assets/manifest.json ]; then
+  echo "[build] github-assets 就绪：$(find public/github-assets -name '*.svg' | wc -l) 个自托管 SVG"
+else
+  echo "[build] WARN public/github-assets/manifest.json 缺失——开源页数据板将只显示原生统计（可手动跑 node scripts/build-perf/fetch-readme-assets.mjs 补齐）"
+fi
+
 # 内容 lint（T3）：断链/缺图在部署前拦截；CONTENT_LINT=skip|warn 逃生门见脚本头注
 [ -f scripts/build-perf/content-lint.mjs ] && node scripts/build-perf/content-lint.mjs dist || echo "[build] content-lint 未就绪，跳过"

@@ -535,6 +535,15 @@ collections:
        file: content/site/opensource.yaml
        format: yaml
        fields:
+          - label: 打字机动效文案（可选，≤6 条）
+            name: typing
+            widget: list
+            required: false
+            summary: '{{fields.zh}}'
+            hint: '档案卡顶部逐字打出的几行文案，2–6 条最佳；留空用内置默认。中英各一行，切换语言同步'
+            fields:
+              - { label: 中文, name: zh, widget: string }
+              - { label: English, name: en, widget: string }
          - label: 叙述（链接前）
            name: blurb
            widget: object
@@ -0,0 +1,22 @@
+{
+  "assets": {
+    "streak-light.svg": {
+      "source": "https://streak-stats.demolab.com/?user=wait4xx&hide_border=true&background=00000000&ring=3454d1&fire=3454d1&currStreakLabel=3454d1&currStreakNum=33343a&sideNums=33343a&sideLabels=8b8f98&dates=8b8f98",
+      "fetchedAt": "2026-11-03T03:07:28.521Z",
+      "label": "连续贡献",
+      "theme": "light"
+    },
+    "streak-dark.svg": {
+      "source": "https://streak-stats.demolab.com/?user=wait4xx&hide_border=true&background=00000000&ring=3454d1&fire=3454d1&currStreakLabel=3454d1&currStreakNum=c9ccd4&sideNums=c9ccd4&sideLabels=9aa0aa&dates=9aa0aa",
+      "fetchedAt": "2026-11-03T03:07:28.521Z",
+      "label": "连续贡献",
+      "theme": "dark"
+    },
+    "snake.svg": {
+      "source": "https://raw.githubusercontent.com/wait4xx/wait4xx/output/github-contribution-grid-snake.svg",
+      "fetchedAt": "2026-11-03T03:07:28.521Z",
+      "label": "贡献蛇",
+      "theme": "any"
+    }
+  }
+}
@@ -0,0 +1 @@
+<svg viewBox="-16 -32 880 192" width="880" height="192" xmlns="http://www.w3.org/2000/svg"><desc>Generated with https://github.com/Platane/snk</desc><style>:root{--cb:#1b1f230a;--cs:purple;--ce:#ebedf0;--c0:#ebedf0;--c1:#9be9a8;--c2:#40c463;--c3:#30a14e;--c4:#216e39}.c{shape-rendering:geometricPrecision;fill:var(--ce);stroke-width:1px;stroke:var(--cb);animation:none 35300ms linear infinite;width:12px;height:12px}@keyframes c0{4.52%{fill:var(--c1)}4.54%,100%{fill:var(--ce)}}.c.c0{fill:var(--c1);animation-name:c0}@keyframes c1{66.85%{fill:var(--c2)}66.87%,100%{fill:var(--ce)}}.c.c1{fill:var(--c2);animation-name:c1}@keyframes c2{3.67%{fill:var(--c1)}3.69%,100%{fill:var(--ce)}}.c.c2{fill:var(--c1);animation-name:c2}@keyframes c3{1.97%{fill:var(--c1)}1.99%,100%{fill:var(--ce)}}.c.c3{fill:var(--c1);animation-name:c3}@keyframes c4{2.82%{fill:var(--c1)}2.84%,100%{fill:var(--ce)}}.c.c4{fill:var(--c1);animation-name:c4}@keyframes c5{3.39%{fill:var(--c1)}3.41%,100%{fill:var(--ce)}}.c.c5{fill:var(--c1);animation-name:c5}@keyframes c6{2.26%{fill:var(--c1)}2.28%,100%{fill:var(--ce)}}.c.c6{fill:var(--c1);animation-name:c6}@keyframes c7{10.19%{fill:var(--c1)}10.21%,100%{fill:var(--ce)}}.c.c7{fill:var(--c1);animation-name:c7}@keyframes c8{9.06%{fill:var(--c1)}9.08%,100%{fill:var(--ce)}}.c.c8{fill:var(--c1);animation-name:c8}@keyframes c9{41.63%{fill:var(--c1)}41.65%,100%{fill:var(--ce)}}.c.c9{fill:var(--c1);animation-name:c9}@keyframes ca{12.74%{fill:var(--c1)}12.76%,100%{fill:var(--ce)}}.c.ca{fill:var(--c1);animation-name:ca}@keyframes cb{13.59%{fill:var(--c1)}13.61%,100%{fill:var(--ce)}}.c.cb{fill:var(--c1);animation-name:cb}@keyframes cc{14.15%{fill:var(--c1)}14.17%,100%{fill:var(--ce)}}.c.cc{fill:var(--c1);animation-name:cc}@keyframes cd{14.44%{fill:var(--c1)}14.46%,100%{fill:var(--ce)}}.c.cd{fill:var(--c1);animation-name:cd}@keyframes ce{21.8%{fill:var(--c1)}21.82%,100%{fill:var(--ce)}}.c.ce{fill:var(--c1);animation-name:ce}@keyframes cf{19.82%{fill:var(--c1)}19.84%,100%{fill:var(--ce)}}.c.cf{fill:var(--c1);animation-name:cf}@keyframes cg{20.67%{fill:var(--c1)}20.69%,100%{fill:var(--ce)}}.c.cg{fill:var(--c1);animation-name:cg}@keyframes ch{14.72%{fill:var(--c1)}14.74%,100%{fill:var(--ce)}}.c.ch{fill:var(--c1);animation-name:ch}@keyframes ci{21.52%{fill:var(--c1)}21.54%,100%{fill:var(--ce)}}.c.ci{fill:var(--c1);animation-name:ci}@keyframes cj{19.25%{fill:var(--c1)}19.27%,100%{fill:var(--ce)}}.c.cj{fill:var(--c1);animation-name:cj}@keyframes ck{15%{fill:var(--c1)}15.02%,100%{fill:var(--ce)}}.c.ck{fill:var(--c1);animation-name:ck}@keyframes cl{15.29%{fill:var(--c1)}15.31%,100%{fill:var(--ce)}}.c.cl{fill:var(--c1);animation-name:cl}@keyframes cm{44.18%{fill:var(--c2)}44.2%,100%{fill:var(--ce)}}.c.cm{fill:var(--c2);animation-name:cm}@keyframes cn{18.4%{fill:var(--c1)}18.42%,100%{fill:var(--ce)}}.c.cn{fill:var(--c1);animation-name:cn}@keyframes co{18.69%{fill:var(--c1)}18.71%,100%{fill:var(--ce)}}.c.co{fill:var(--c1);animation-name:co}@keyframes cp{16.14%{fill:var(--c1)}16.16%,100%{fill:var(--ce)}}.c.cp{fill:var(--c1);animation-name:cp}@keyframes cq{15.85%{fill:var(--c1)}15.87%,100%{fill:var(--ce)}}.c.cq{fill:var(--c1);animation-name:cq}@keyframes cr{23.5%{fill:var(--c1)}23.52%,100%{fill:var(--ce)}}.c.cr{fill:var(--c1);animation-name:cr}@keyframes cs{18.12%{fill:var(--c1)}18.14%,100%{fill:var(--ce)}}.c.cs{fill:var(--c1);animation-name:cs}@keyframes ct{89.79%{fill:var(--c4)}89.81%,100%{fill:var(--ce)}}.c.ct{fill:var(--c4);animation-name:ct}@keyframes cu{16.99%{fill:var(--c1)}17.01%,100%{fill:var(--ce)}}.c.cu{fill:var(--c1);animation-name:cu}@keyframes cv{76.19%{fill:var(--c4)}76.21%,100%{fill:var(--ce)}}.c.cv{fill:var(--c4);animation-name:cv}@keyframes cw{47.02%{fill:var(--c2)}47.04%,100%{fill:var(--ce)}}.c.cw{fill:var(--c2);animation-name:cw}@keyframes cx{35.4%{fill:var(--c1)}35.42%,100%{fill:var(--ce)}}.c.cx{fill:var(--c1);animation-name:cx}@keyframes cy{35.12%{fill:var(--c1)}35.14%,100%{fill:var(--ce)}}.c.cy{fill:var(--c1);animation-name:cy}@keyframes cz{26.34%{fill:var(--c1)}26.36%,100%{fill:var(--ce)}}.c.cz{fill:var(--c1);animation-name:cz}@keyframes c10{33.7%{fill:var(--c1)}33.72%,100%{fill:var(--ce)}}.c.c10{fill:var(--c1);animation-name:c10}@keyframes c11{33.98%{fill:var(--c1)}34%,100%{fill:var(--ce)}}.c.c11{fill:var(--c1);animation-name:c11}@keyframes c12{50.41%{fill:var(--c2)}50.43%,100%{fill:var(--ce)}}.c.c12{fill:var(--c2);animation-name:c12}@keyframes c13{78.46%{fill:var(--c4)}78.48%,100%{fill:var(--ce)}}.c.c13{fill:var(--c4);animation-name:c13}@keyframes c14{49.28%{fill:var(--c2)}49.3%,100%{fill:var(--ce)}}.c.c14{fill:var(--c2);animation-name:c14}@keyframes c15{27.47%{fill:var(--c1)}27.49%,100%{fill:var(--ce)}}.c.c15{fill:var(--c1);animation-name:c15}@keyframes c16{80.44%{fill:var(--c4)}80.46%,100%{fill:var(--ce)}}.c.c16{fill:var(--c4);animation-name:c16}@keyframes c17{27.75%{fill:var(--c1)}27.77%,100%{fill:var(--ce)}}.c.c17{fill:var(--c1);animation-name:c17}@keyframes c18{32.28%{fill:var(--c1)}32.3%,100%{fill:vLine truncated
@@ -0,0 +1,111 @@
+<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
+                style='isolation: isolate' viewBox='0 0 495 195' width='495px' height='195px' direction='ltr'>
+        <style>
+            @keyframes currstreak {
+                0% { font-size: 3px; opacity: 0.2; }
+                80% { font-size: 34px; opacity: 1; }
+                100% { font-size: 28px; opacity: 1; }
+            }
+            @keyframes fadein {
+                0% { opacity: 0; }
+                100% { opacity: 1; }
+            }
+        </style>
+        <defs>
+            <clipPath id='outer_rectangle'>
+                <rect width='495' height='195' rx='4.5'/>
+            </clipPath>
+            <mask id='mask_out_ring_behind_fire'>
+                <rect width='495' height='195' fill='white'/>
+                <ellipse id='mask-ellipse' cx='247.5' cy='32' rx='13' ry='18' fill='black'/>
+            </mask>
+            
+        </defs>
+        <g clip-path='url(#outer_rectangle)'>
+            <g style='isolation: isolate'>
+                <rect stroke='#000000' stroke-opacity='0' fill='#000000' fill-opacity='0' rx='4.5' x='0.5' y='0.5' width='494' height='194'/>
+            </g>
+            <g style='isolation: isolate'>
+                <line x1='165' y1='28' x2='165' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='#E4E2E2' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
+                <line x1='330' y1='28' x2='330' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='#E4E2E2' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
+            </g>
+            <g style='isolation: isolate'>
+                <!-- Total Contributions big number -->
+                <g transform='translate(82.5, 48)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#c9ccd4' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>
+                        344
+                    </text>
+                </g>
+
+                <!-- Total Contributions label -->
+                <g transform='translate(82.5, 84)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#9aa0aa' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.7s'>
+                        Total Contributions
+                    </text>
+                </g>
+
+                <!-- Total Contributions range -->
+                <g transform='translate(82.5, 114)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#9aa0aa' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.8s'>
+                        May 24, 2019 - Present
+                    </text>
+                </g>
+            </g>
+            <g style='isolation: isolate'>
+                <!-- Current Streak label -->
+                <g transform='translate(247.5, 108)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#3454d1' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>
+                        Current Streak
+                    </text>
+                </g>
+
+                <!-- Current Streak range -->
+                <g transform='translate(247.5, 145)'>
+                    <text x='0' y='21' stroke-width='0' text-anchor='middle' fill='#9aa0aa' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>
+                        Nov 3
+                    </text>
+                </g>
+
+                <!-- Ring around number -->
+                <g mask='url(#mask_out_ring_behind_fire)'>
+                    <circle cx='247.5' cy='71' r='40' fill='none' stroke='#3454d1' stroke-width='5' style='opacity: 0; animation: fadein 0.5s linear forwards 0.4s'></circle>
+                </g>
+                <!-- Fire icon -->
+                <g transform='translate(247.5, 19.5)' stroke-opacity='0' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>
+                    <path d='M -12 -0.5 L 15 -0.5 L 15 23.5 L -12 23.5 L -12 -0.5 Z' fill='none'/>
+                    <path d='M 1.5 0.67 C 1.5 0.67 2.24 3.32 2.24 5.47 C 2.24 7.53 0.89 9.2 -1.17 9.2 C -3.23 9.2 -4.79 7.53 -4.79 5.47 L -4.76 5.11 C -6.78 7.51 -8 10.62 -8 13.99 C -8 18.41 -4.42 22 0 22 C 4.42 22 8 18.41 8 13.99 C 8 8.6 5.41 3.79 1.5 0.67 Z M -0.29 19 C -2.07 19 -3.51 17.6 -3.51 15.86 C -3.51 14.24 -2.46 13.1 -0.7 12.74 C 1.07 12.38 2.9 11.53 3.92 10.16 C 4.31 11.45 4.51 12.81 4.51 14.2 C 4.51 16.85 2.36 19 -0.29 19 Z' fill='#3454d1' stroke-opacity='0'/>
+                </g>
+
+                <!-- Current Streak big number -->
+                <g transform='translate(247.5, 48)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#c9ccd4' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='animation: currstreak 0.6s linear forwards'>
+                        0
+                    </text>
+                </g>
+
+            </g>
+            <g style='isolation: isolate'>
+                <!-- Longest Streak big number -->
+                <g transform='translate(412.5, 48)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#c9ccd4' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.2s'>
+                        6
+                    </text>
+                </g>
+
+                <!-- Longest Streak label -->
+                <g transform='translate(412.5, 84)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#9aa0aa' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.3s'>
+                        Longest Streak
+                    </text>
+                </g>
+
+                <!-- Longest Streak range -->
+                <g transform='translate(412.5, 114)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#9aa0aa' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.4s'>
+                        Oct 19 - Oct 24
+                    </text>
+                </g>
+            </g>
+            
+        </g>
+    </svg>
@@ -0,0 +1,111 @@
+<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
+                style='isolation: isolate' viewBox='0 0 495 195' width='495px' height='195px' direction='ltr'>
+        <style>
+            @keyframes currstreak {
+                0% { font-size: 3px; opacity: 0.2; }
+                80% { font-size: 34px; opacity: 1; }
+                100% { font-size: 28px; opacity: 1; }
+            }
+            @keyframes fadein {
+                0% { opacity: 0; }
+                100% { opacity: 1; }
+            }
+        </style>
+        <defs>
+            <clipPath id='outer_rectangle'>
+                <rect width='495' height='195' rx='4.5'/>
+            </clipPath>
+            <mask id='mask_out_ring_behind_fire'>
+                <rect width='495' height='195' fill='white'/>
+                <ellipse id='mask-ellipse' cx='247.5' cy='32' rx='13' ry='18' fill='black'/>
+            </mask>
+            
+        </defs>
+        <g clip-path='url(#outer_rectangle)'>
+            <g style='isolation: isolate'>
+                <rect stroke='#000000' stroke-opacity='0' fill='#000000' fill-opacity='0' rx='4.5' x='0.5' y='0.5' width='494' height='194'/>
+            </g>
+            <g style='isolation: isolate'>
+                <line x1='165' y1='28' x2='165' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='#E4E2E2' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
+                <line x1='330' y1='28' x2='330' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='#E4E2E2' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
+            </g>
+            <g style='isolation: isolate'>
+                <!-- Total Contributions big number -->
+                <g transform='translate(82.5, 48)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#33343a' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>
+                        344
+                    </text>
+                </g>
+
+                <!-- Total Contributions label -->
+                <g transform='translate(82.5, 84)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#8b8f98' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.7s'>
+                        Total Contributions
+                    </text>
+                </g>
+
+                <!-- Total Contributions range -->
+                <g transform='translate(82.5, 114)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#8b8f98' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.8s'>
+                        May 24, 2019 - Present
+                    </text>
+                </g>
+            </g>
+            <g style='isolation: isolate'>
+                <!-- Current Streak label -->
+                <g transform='translate(247.5, 108)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#3454d1' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>
+                        Current Streak
+                    </text>
+                </g>
+
+                <!-- Current Streak range -->
+                <g transform='translate(247.5, 145)'>
+                    <text x='0' y='21' stroke-width='0' text-anchor='middle' fill='#8b8f98' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>
+                        Nov 3
+                    </text>
+                </g>
+
+                <!-- Ring around number -->
+                <g mask='url(#mask_out_ring_behind_fire)'>
+                    <circle cx='247.5' cy='71' r='40' fill='none' stroke='#3454d1' stroke-width='5' style='opacity: 0; animation: fadein 0.5s linear forwards 0.4s'></circle>
+                </g>
+                <!-- Fire icon -->
+                <g transform='translate(247.5, 19.5)' stroke-opacity='0' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>
+                    <path d='M -12 -0.5 L 15 -0.5 L 15 23.5 L -12 23.5 L -12 -0.5 Z' fill='none'/>
+                    <path d='M 1.5 0.67 C 1.5 0.67 2.24 3.32 2.24 5.47 C 2.24 7.53 0.89 9.2 -1.17 9.2 C -3.23 9.2 -4.79 7.53 -4.79 5.47 L -4.76 5.11 C -6.78 7.51 -8 10.62 -8 13.99 C -8 18.41 -4.42 22 0 22 C 4.42 22 8 18.41 8 13.99 C 8 8.6 5.41 3.79 1.5 0.67 Z M -0.29 19 C -2.07 19 -3.51 17.6 -3.51 15.86 C -3.51 14.24 -2.46 13.1 -0.7 12.74 C 1.07 12.38 2.9 11.53 3.92 10.16 C 4.31 11.45 4.51 12.81 4.51 14.2 C 4.51 16.85 2.36 19 -0.29 19 Z' fill='#3454d1' stroke-opacity='0'/>
+                </g>
+
+                <!-- Current Streak big number -->
+                <g transform='translate(247.5, 48)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#33343a' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='animation: currstreak 0.6s linear forwards'>
+                        0
+                    </text>
+                </g>
+
+            </g>
+            <g style='isolation: isolate'>
+                <!-- Longest Streak big number -->
+                <g transform='translate(412.5, 48)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#33343a' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.2s'>
+                        6
+                    </text>
+                </g>
+
+                <!-- Longest Streak label -->
+                <g transform='translate(412.5, 84)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#8b8f98' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.3s'>
+                        Longest Streak
+                    </text>
+                </g>
+
+                <!-- Longest Streak range -->
+                <g transform='translate(412.5, 114)'>
+                    <text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#8b8f98' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.4s'>
+                        Oct 19 - Oct 24
+                    </text>
+                </g>
+            </g>
+            
+        </g>
+    </svg>
@@ -16,7 +16,6 @@ if (MODE === 'skip') {
 const SKIP_PREFIX = ['/admin/', '/photos-originals/']; // admin=CMS 路由；photos-originals=部署期 rsync 叠加层（不在 dist，另有部署链保障）
 const SKIP_FILE = new Set(['/404.html']); // Astro 404 页不参与配对

-
 function walk(dir, out = []) {
  for (const e of readdirSync(dir)) {
    const p = join(dir, e);
@@ -49,8 +48,8 @@ const fails = [];
 const warns = [];

 for (const f of files) {
-  const rel = f.slice(DIST.length) || '/';
  const html = readFileSync(f, 'utf8');
+  const rel = f.slice(DIST.length) || '/';

  // 站内 <a href>：仅根相对路径；#锚点/mailto/tel/外部/data: 全跳过
  for (const m of html.matchAll(/<a\s[^>]*href="([^"]*)"/g)) {
@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+// README 动效资产抓取器（5i T8）：把只能靠外部生成的 SVG 数据卡抓成本地静态文件
+// 设计取舍：
+//   · 产物入仓（public/github-assets/）→ 构建确定性与离线可构建优先，不在 CI 里跑本脚本
+//   · 单资产失败保留旧文件；无旧文件则跳过（组件侧按存在性决定是否渲染该块）
+//   · 配色按站点 tokens 近似：透明底 + 文字 #33343a(亮)/#c9ccd4(暗) + 线条 #3454d1
+//   · manifest.json 记录来源 URL 与抓取时间（可追溯，不含任何凭据）
+// 用法：node scripts/build-perf/fetch-readme-assets.mjs [--force]
+import { mkdirSync, writeFileSync, existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const OUT_DIR = 'public/github-assets';
+const LOGIN = 'wait4xx';
+const TIMEOUT_MS = 10_000;
+const UA = 'wait4x-blog-assets/1.0 (+https://wait4x.online)';
+
+// 站点 tokens 近似值（与灰阶纪律一致：底透明，线条单一强调色）
+const ACCENT = '3454d1';
+const INK_LIGHT = '33343a';
+const INK_DARK = 'c9ccd4';
+const MUTED_LIGHT = '8b8f98';
+const MUTED_DARK = '9aa0aa';
+
+/** 同一张卡按明暗两套参数各存一份（组件内用 CSS 切换，零运行时请求） */
+const ASSETS = [
+  {
+    name: 'stats',
+    url: (theme) =>
+      `https://github-readme-stats.vercel.app/api?username=${LOGIN}` +
+      '&show_icons=true&hide_border=true&include_all_commits=true&count_private=true&rank_icon=github' +
+      `&bg_color=00000000&title_color=${ACCENT}&icon_color=${ACCENT}` +
+      `&text_color=${theme === 'dark' ? INK_DARK : INK_LIGHT}`,
+    label: 'GitHub 统计',
+  },
+  {
+    name: 'top-langs',
+    url: (theme) =>
+      `https://github-readme-stats.vercel.app/api/top-langs/?username=${LOGIN}` +
+      '&layout=compact&hide_border=true&langs_count=6' +
+      `&bg_color=00000000&title_color=${ACCENT}` +
+      `&text_color=${theme === 'dark' ? INK_DARK : INK_LIGHT}`,
+    label: '语言分布',
+  },
+  {
+    name: 'streak',
+    url: (theme) =>
+      `https://streak-stats.demolab.com/?user=${LOGIN}&hide_border=true` +
+      '&background=00000000' +
+      `&ring=${ACCENT}&fire=${ACCENT}&currStreakLabel=${ACCENT}` +
+      `&currStreakNum=${theme === 'dark' ? INK_DARK : INK_LIGHT}` +
+      `&sideNums=${theme === 'dark' ? INK_DARK : INK_LIGHT}` +
+      `&sideLabels=${theme === 'dark' ? MUTED_DARK : MUTED_LIGHT}` +
+      `&dates=${theme === 'dark' ? MUTED_DARK : MUTED_LIGHT}`,
+    label: '连续贡献',
+  },
+  {
+    // 贡献蛇：GitHub Action 生成，配色由 action 侧决定，无法传参 → 只抓一份
+    name: 'snake',
+    url: () => `https://raw.githubusercontent.com/${LOGIN}/${LOGIN}/output/github-contribution-grid-snake.svg`,
+    label: '贡献蛇',
+    single: true,
+  },
+];
+
+/** 10s 超时抓取；返回 SVG 文本或 null */
+async function grab(url) {
+  try {
+    const res = await fetch(url, {
+      headers: { 'User-Agent': UA, Accept: 'image/svg+xml,image/*;q=0.8,*/*;q=0.5' },
+      signal: AbortSignal.timeout(TIMEOUT_MS),
+    });
+    if (!res.ok) {
+      console.warn(`[assets] HTTP ${res.status}: ${url.slice(0, 90)}…`);
+      return null;
+    }
+    const text = await res.text();
+    if (!text.includes('<svg')) {
+      console.warn(`[assets] 非 SVG 响应，已跳过: ${url.slice(0, 90)}…`);
+      return null;
+    }
+    return text;
+  } catch (err) {
+    console.warn(`[assets] 抓取失败（${err.name === 'TimeoutError' ? '超时' : err.message}）: ${url.slice(0, 90)}…`);
+    return null;
+  }
+}
+
+const force = process.argv.includes('--force');
+mkdirSync(OUT_DIR, { recursive: true });
+const manifestPath = join(OUT_DIR, 'manifest.json');
+const manifest = existsSync(manifestPath) ? JSON.parse(readFileSync(manifestPath, 'utf8')) : { assets: {} };
+const now = new Date().toISOString();
+let ok = 0;
+let kept = 0;
+let skipped = 0;
+
+for (const asset of ASSETS) {
+  const themes = asset.single ? [null] : ['light', 'dark'];
+  for (const theme of themes) {
+    const fileName = theme ? `${asset.name}-${theme}.svg` : `${asset.name}.svg`;
+    const filePath = join(OUT_DIR, fileName);
+    const url = asset.url(theme);
+    const svg = await grab(url);
+    if (svg) {
+      writeFileSync(filePath, svg, 'utf8');
+      manifest.assets[fileName] = { source: url, fetchedAt: now, label: asset.label, theme: theme ?? 'any' };
+      console.log(`[assets] ✓ ${fileName} (${Math.round(svg.length / 1024)}KB)`);
+      ok += 1;
+    } else if (existsSync(filePath)) {
+      console.log(`[assets] ↺ ${fileName} 抓取失败，保留旧文件`);
+      kept += 1;
+    } else {
+      console.warn(`[assets] ⊘ ${fileName} 抓取失败且无旧文件 → 构建时将跳过该块`);
+      skipped += 1;
+    }
+  }
+}
+
+writeFileSync(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`, 'utf8');
+console.log(`[assets] 完成：新增/更新 ${ok}，保留旧文件 ${kept}，跳过 ${skipped}；manifest → ${manifestPath}`);
+process.exit(0);
@@ -8,6 +8,7 @@ interface Props {
 const { pageKey, pageTitle } = Astro.props;
 import { t } from '../i18n/ui';
 import ViewMeta from './geek/ViewMeta.astro';
+import ArtalkThemeStyles from './geek/ArtalkThemeStyles.astro';
 import { localeOf } from '../lib/locale';
 const locale = localeOf(Astro.url.pathname);
 ---
@@ -21,64 +22,10 @@ const locale = localeOf(Astro.url.pathname);
  <button type="button" class="atk-retry-btn" id="artalk-retry-btn">重试</button>
 </p>

-<!-- Artalk 主题接管：--at-color-* 全套映射到站点 tokens（值均为 var()，明暗随
-     html[data-theme] 翻转 tokens 自动生效，一套规则双态成立）。
-     依据：Artalk.css(v2.10) 全部表面由这 18 个变量驱动；init 锁 darkMode:false
-     防 Artalk 自带 atk-dark-mode 类与接管层打架。弹层挂 body 下需单独同款映射 -->
+<!-- 主题接管（--at-color-* 全套映射 + 气质规则）已抽到共享片段：
+     文章容器 #artalk-container 与瞬间容器 [data-artalk-panel] 用同一份，避免漂移 -->
+<ArtalkThemeStyles />
 <style is:global>
-  #artalk-container,
-  /* Artalk.css 运行时才挂 head，平级选择器后来居上：body 前缀提一级特异性保住覆盖 */
-  body .atk-layer-wrap {
-    --at-color-bg: var(--bg);
-    --at-color-bg-transl: color-mix(in oklab, var(--bg) 95%, transparent);
-    --at-color-bg-grey: var(--bg-soft);
-    --at-color-bg-grey-transl: color-mix(in oklab, var(--bg-soft) 95%, transparent);
-    --at-color-bg-light: var(--accent-soft);
-    --at-color-border: color-mix(in oklab, var(--ink-4) 55%, transparent); /* --line 在白底近不可见（视觉终审建议项），加深一档 */
-    --at-color-font: var(--ink-2);
-    --at-color-deep: var(--ink-1);
-    --at-color-sub: var(--ink-3);
-    --at-color-grey: var(--ink-3);
-    --at-color-meta: var(--ink-4);
-    --at-color-light: var(--ink-4);
-    --at-color-main: var(--accent);
-    /* 高度限高渐隐遮罩必须与 bg 同源，否则暗色下露白腿 */
-    --at-color-gradient: linear-gradient(180deg, transparent, var(--bg));
-    /* red/pink/yellow/green 语义功能色保留官方默认：纪律只管气质，不损语义 */
-  }
-
-  /* 气质对齐（不动排版）：字体、头像圆角、时间戳 mono、链接纪律 */
-  #artalk-container {
-    font-family: var(--font-sans);
-  }
-  #artalk-container .atk-avatar img {
-    border-radius: 8px;
-  }
-  #artalk-container .atk-meta,
-  #artalk-container .atk-ua {
-    font-family: var(--font-mono);
-    font-size: 12px;
-  }
-  #artalk-container .atk-copyright {
-    font-family: var(--font-mono);
-    font-size: 11px;
-    color: var(--ink-4);
-  }
-  #artalk-container .atk-textarea,
-  #artalk-container .atk-input,
-  #artalk-container .atk-send-btn,
-  #artalk-container .atk-btn {
-    border-radius: 8px;
-  }
-  #artalk-container .atk-content a {
-    color: var(--accent);
-    text-decoration: underline;
-    text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
-    text-underline-offset: 0.2em;
-  }
-  #artalk-container .atk-content a:hover {
-    text-decoration-color: var(--accent);
-  }
  .atk-load-hint {
    display: flex;
    align-items: center;
@@ -113,16 +60,33 @@ const locale = localeOf(Astro.url.pathname);
    let mounted = false;
    const retryEl = document.getElementById('artalk-retry');
    const showRetry = (show: boolean) => { if (retryEl) retryEl.hidden = !show; };
+    const libReady = () => (window as unknown as { Artalk?: { init: (o: object) => void } }).Artalk;
+    // 超时兜底：5s 确实未挂载才提示；同时**复位 mounting** —— 否则一次超时会把后续
+    // 所有触发（IO / 锚点 / 滚底 / 重试）全堵死，评论区从此空着
    const armTimeout = () => {
      window.setTimeout(() => {
-        if (!mounted) showRetry(true);
+        if (mounted) return;
+        mounting = false;
+        showRetry(true);
      }, 5000);
    };
    const mount = () => {
      if (mounting || mounted) return;
      mounting = true;
      armTimeout();
-      if (document.getElementById('artalk-lib')) return initArtalk();
+      // 库已就绪（软导航二次进入、文章间跳转最常见）→ 直接 init
+      if (libReady()) return initArtalk();
+      const existing = document.getElementById('artalk-lib') as HTMLScriptElement | null;
+      if (existing) {
+        // 脚本标签已在、但库还没就绪（软导航后二次挂载的典型态）：**等它 load**。
+        // 这里直接判失败，正是用户看到的「评论区正常显示却挂着加载失败提示」的根因。
+        const onLoad = () => {
+          existing.removeEventListener('load', onLoad);
+          initArtalk();
+        };
+        existing.addEventListener('load', onLoad);
+        return;
+      }
      // 官方部署文档要求 CSS 手动引入（JS 不自动注入）；此前缺失导致评论区自上线起跑在 UA 默认样式上
      const cssReady = new Promise<void>((done) => {
        if (document.getElementById('artalk-css')) return done();
@@ -138,18 +102,21 @@ const locale = localeOf(Astro.url.pathname);
      s.id = 'artalk-lib';
      s.src = 'https://wait4x.online/artalk/dist/Artalk.js';
      s.onload = () => { void cssReady.then(initArtalk); };
+      // 真失败之一：脚本拉不到（404 / 被拦截）——只有这时才报错
+      s.onerror = () => { mounting = false; showRetry(true); };
      document.head.appendChild(s);
    };
    const initArtalk = () => {
-      const lib = (window as unknown as { Artalk?: { init: (o: object) => void } }).Artalk;
-      // 只有库真正就绪才算挂载成功：否则脚本 404/被拦截时会把"空容器"误标成已挂载，
-      // 5s 兜底提示也被一并绕过（用户看到的正是"评论区一直空着"）
+      const lib = libReady();
+      // 库仍未就绪：可能是 onload 早于 window.Artalk 赋值，也可能是慢网。此处**不报错**
+      // （报错就是用户看到的误报），复位后交给超时兜底或后续触发再试。
      if (!lib) {
-        showRetry(true);
+        mounting = false;
        return;
      }
      mounted = true;
-      showRetry(false);
+      mounting = false;
+      showRetry(false); // 挂载成功 → 清掉任何已显示的提示
      el.dataset.artalkMounted = '1';
      lib?.init({
        el: '#artalk-container',
@@ -16,6 +16,7 @@
 * 放在卡片底部让读者不开评论也能看见条数。
 */
 import ViewMeta from './geek/ViewMeta.astro';
+import ArtalkThemeStyles from './geek/ArtalkThemeStyles.astro';
 import { t } from '../i18n/ui';
 import type { Locale } from '../lib/locale';

@@ -52,6 +53,8 @@ const retryText = locale === 'zh' ? '重试' : 'Retry';
      </p>
    </div>
  </details>
+  <!-- 与文章页共用同一份 Artalk 主题映射（瞬间容器 mom-atk-* 无此映射时会回落官方默认色） -->
+  <ArtalkThemeStyles />
  <div class="mom-cm-meta">
    <ViewMeta pageKey={pageKey} locale={locale} mode="readonly" showPv={false} />
  </div>
@@ -0,0 +1,86 @@
+---
+/**
+ * Artalk 主题接管（Phase 5i T3：从 ArtalkComments 抽出的共享片段，两处组件共用，不复制两份）。
+ *
+ * 为什么要抽：文章页容器是 `#artalk-container`，瞬间页容器是 `mom-atk-<slug>`
+ * （带 `[data-artalk-panel]`）。原先 18 个 `--at-color-*` 映射只写在 `#artalk-container`
+ * 作用域，瞬间评论区因此回落 Artalk 官方默认色（白底深字）——暗色主题下尤其突兀。
+ * 现在一套片段覆盖三种宿主：文章容器 / 瞬间容器 / Artalk 弹层（挂在 body 下）。
+ *
+ * 依据：Artalk.css(v2.10) 全部表面由这 18 个变量驱动；值均为 `var(--token)`，
+ * 明暗随 `html[data-theme]` 翻转自动生效，一套规则双态成立。init 侧统一锁
+ * `darkMode: false`，防 Artalk 自带 `atk-dark-mode` 类与接管层打架。
+ */
+---
+
+<style is:global>
+  /* ── 18 个色彩变量：三种宿主一套映射 ──
+     瞬间容器必须用 `body [data-artalk-panel]`(0,1,1)：Artalk init 后会给容器加 `.artalk` 类，
+     它从 CDN 后加载的样式表里有 `.artalk{--at-color-bg:#fff…}`，与裸属性选择器 (0,1,0) 同特异性
+     且后来居上 → 暗色下瞬间评论区会翻白底（实测踩到）。文章容器是 ID(1,0,0) 本就压得住。 */
+  #artalk-container,
+  body [data-artalk-panel],
+  /* Artalk.css 运行时才挂 head，平级选择器后来居上：body 前缀提一级特异性保住覆盖 */
+  body .atk-layer-wrap {
+    --at-color-bg: var(--bg);
+    --at-color-bg-transl: color-mix(in oklab, var(--bg) 95%, transparent);
+    --at-color-bg-grey: var(--bg-soft);
+    --at-color-bg-grey-transl: color-mix(in oklab, var(--bg-soft) 95%, transparent);
+    --at-color-bg-light: var(--accent-soft);
+    --at-color-border: color-mix(in oklab, var(--ink-4) 55%, transparent); /* --line 在白底近不可见（视觉终审建议项），加深一档 */
+    --at-color-font: var(--ink-2);
+    --at-color-deep: var(--ink-1);
+    --at-color-sub: var(--ink-3);
+    --at-color-grey: var(--ink-3);
+    --at-color-meta: var(--ink-4);
+    --at-color-light: var(--ink-4);
+    --at-color-main: var(--accent);
+    /* 高度限高渐隐遮罩必须与 bg 同源，否则暗色下露白腿 */
+    --at-color-gradient: linear-gradient(180deg, transparent, var(--bg));
+    /* red/pink/yellow/green 语义功能色保留官方默认：纪律只管气质，不损语义 */
+  }
+
+  /* ── 气质对齐（不动排版）：字体、头像圆角、时间戳 mono、链接纪律 ── */
+  #artalk-container,
+  body [data-artalk-panel] {
+    font-family: var(--font-sans);
+  }
+  #artalk-container .atk-avatar img,
+  body [data-artalk-panel] .atk-avatar img {
+    border-radius: 8px;
+  }
+  #artalk-container .atk-meta,
+  #artalk-container .atk-ua,
+  body [data-artalk-panel] .atk-meta,
+  body [data-artalk-panel] .atk-ua {
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+  #artalk-container .atk-copyright,
+  body [data-artalk-panel] .atk-copyright {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-4);
+  }
+  #artalk-container .atk-textarea,
+  #artalk-container .atk-input,
+  #artalk-container .atk-send-btn,
+  #artalk-container .atk-btn,
+  body [data-artalk-panel] .atk-textarea,
+  body [data-artalk-panel] .atk-input,
+  body [data-artalk-panel] .atk-send-btn,
+  body [data-artalk-panel] .atk-btn {
+    border-radius: 8px;
+  }
+  #artalk-container .atk-content a,
+  body [data-artalk-panel] .atk-content a {
+    color: var(--accent);
+    text-decoration: underline;
+    text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
+    text-underline-offset: 0.2em;
+  }
+  #artalk-container .atk-content a:hover,
+  body [data-artalk-panel] .atk-content a:hover {
+    text-decoration-color: var(--accent);
+  }
+</style>
@@ -5,6 +5,8 @@
 // 0600 文件，缺位或失败即隐藏该数字）④src/lib/projects.ts 的仓库列表（语言占比与星标汇总）
 // 降级纪律：任何一项取数失败只隐藏该项，绝不炸构建、不出现空图片框
 import { Image } from 'astro:assets';
+import { existsSync } from 'node:fs';
+import TypingLines from './TypingLines.astro';
 import { homeAvatar, homeSocials, openSourceCopy } from '../../lib/site-content';
 import { githubUserStats, loadProjects } from '../../lib/projects';
 import { iconPath } from '../../lib/icons';
@@ -49,6 +51,40 @@ try {
 // 只给第一根上强调色会让并列者显得"落后"，故并列者一并着色
 const maxPct = langs.reduce((m, l) => Math.max(m, l.pct), 0);
 const stats = await githubUserStats();
+
+// 打字机动效文案：content/site/opensource.yaml 的 typing[]（双语，后台可改）
+// 注：schema 由 orchestrator 统一扩字段；未声明时这里的类型断言取不到值 → 走内置默认
+type TypingEntry = { zh?: string; en?: string };
+const typingRaw = (copy as unknown as { typing?: TypingEntry[] }).typing ?? [];
+const typingLines = typingRaw
+  .map((t) => (locale === 'zh' ? t.zh : (t.en ?? t.zh)) ?? '')
+  .filter(Boolean);
+const DEFAULT_TYPING = {
+  zh: ['气象出身，写代码为乐', '自托管一切能自托管的东西', '拥抱开源，热爱开源'],
+  en: ['Trained in meteorology, coding for fun', 'Self-hosting whatever can be self-hosted', 'Embrace open source, love open source'],
+}[locale];
+const lines = typingLines.length ? typingLines : DEFAULT_TYPING;
+
+// 自托管 SVG 数据卡（public/github-assets/，由 scripts/build-perf/fetch-readme-assets.mjs 产出入仓）
+// 缺文件即跳过该卡（异步抓取失败不影响构建），明暗各一份时用 CSS 切换
+const assetPath = (name: string) => `/github-assets/${name}`;
+const hasAsset = (name: string) => existsSync(`public/github-assets/${name}`);
+const boardCards: { label: string; light: string; dark?: string }[] = [];
+for (const [key, label] of [
+  ['stats', locale === 'zh' ? '统计' : 'Stats'],
+  ['top-langs', locale === 'zh' ? '语言分布' : 'Top languages'],
+  ['streak', locale === 'zh' ? '连续贡献' : 'Streak'],
+] as const) {
+  if (!hasAsset(`${key}-light.svg`)) continue;
+  boardCards.push({
+    label,
+    light: assetPath(`${key}-light.svg`),
+    dark: hasAsset(`${key}-dark.svg`) ? assetPath(`${key}-dark.svg`) : undefined,
+  });
+}
+const snakeCard = hasAsset('snake.svg')
+  ? { label: locale === 'zh' ? '贡献蛇' : 'Contribution snake', src: assetPath('snake.svg') }
+  : null;
 const L = {
  zh: { followers: '关注者', repos: '公开仓库', stars: '总星标', langs: '语言占比' },
  en: { followers: 'Followers', repos: 'Public repos', stars: 'Total stars', langs: 'Languages' },
@@ -66,6 +102,7 @@ const L = {
      <p class="pf-name">
        wait4x<span class="pf-handle mono">@wait4xx</span>
      </p>
+      <TypingLines lines={lines} />
      <p class="pf-bio">
        {copy.blurb}<a class="pf-link" href={copy.repoUrl}>{copy.repoLabel}</a>{' '}{copy.blurbAfter.trim()}
      </p>
@@ -123,6 +160,28 @@ const L = {
      </ul>
    </div>
  )}
+  {(boardCards.length > 0 || snakeCard) && (
+    <div class="pf-board">
+      <p class="pf-board-title mono">{locale === 'zh' ? '数据板' : 'Data board'}</p>
+      <div class="pf-board-grid">
+        {boardCards.map((card) => (
+          <figure class="pf-card">
+            <img class="pf-card-img only-light" src={card.light} alt={card.label} loading="lazy" decoding="async" />
+            {card.dark && (
+              <img class="pf-card-img only-dark" src={card.dark} alt={card.label} loading="lazy" decoding="async" />
+            )}
+            <figcaption class="mono">{card.label}</figcaption>
+          </figure>
+        ))}
+        {snakeCard && (
+          <figure class="pf-card pf-card-wide pf-card-snake">
+            <img class="pf-card-img" src={snakeCard.src} alt={snakeCard.label} loading="lazy" decoding="async" />
+            <figcaption class="mono">{snakeCard.label}</figcaption>
+          </figure>
+        )}
+      </div>
+    </div>
+  )}
 </section>

 <style>
@@ -253,8 +312,55 @@ const L = {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
+  .pf-board {
+    margin-top: var(--space-3);
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--line);
+  }
+  .pf-board-title {
+    font-size: 11.5px;
+    color: var(--ink-4);
+    letter-spacing: 0.04em;
+    margin-bottom: var(--space-2);
+  }
+  .pf-board-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--space-2);
+  }
+  .pf-card {
+    margin: 0;
+    padding: var(--space-2);
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    background: transparent;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+  }
+  .pf-card-wide { grid-column: 1 / -1; }
+  .pf-card-img { max-width: 100%; height: auto; display: block; }
+  .pf-card figcaption {
+    font-size: 11px;
+    color: var(--ink-4);
+    letter-spacing: 0.03em;
+  }
+  /* 明暗两版自托管 SVG：默认只显示亮色，暗色主题切到暗色版 */
+  /* 贡献蛇：SVG 内部用自带 CSS 变量（绿阶 + #ebedf0 空格），<img> 无法改写内部配色 →
+     滤镜归一到站点灰阶；暗色下反相，避免浅灰格子贴在深底上刺眼（想去掉绿→灰只改这一行） */
+  .pf-card-snake .pf-card-img { filter: grayscale(1) contrast(1.03); }
+  :global([data-theme='dark']) .pf-card-snake .pf-card-img {
+    filter: grayscale(1) invert(1) contrast(0.92);
+  }
+
+  .only-dark { display: none; }
+  :global([data-theme='dark']) .only-light { display: none; }
+  :global([data-theme='dark']) .only-dark { display: block; }
+
  @media (max-width: 560px) {
    .pf-lang { grid-template-columns: 5.5rem 1fr 2.6rem; }
    .pf-stats { gap: var(--space-3); }
+    .pf-board-grid { grid-template-columns: minmax(0, 1fr); }
  }
 </style>
@@ -73,10 +73,9 @@ try {
  .repo {
    display: flex;
    flex-direction: column;
-    /* 显式接管交叉轴：全局 .tap 是 inline-flex + align-items:center，
-       列向 flex 下会把标题/元信息行水平居中（视觉终审 P1，卡片左缘参差） */
-    align-items: stretch;
-    text-align: left;
+    /* 用户拍板（5i T6）：Projects 卡片内容居中，不用左对齐 */
+    align-items: center;
+    text-align: center;
    gap: 2px;
    padding: var(--space-3);
    border: 1px solid var(--line);
@@ -86,7 +85,12 @@ try {
  }
  .repo:hover { border-color: var(--accent); }
  .repo-name { font-family: var(--font-mono); font-size: 14px; color: var(--ink-1); }
-  .repo-desc { font-size: 13px; color: var(--ink-3); }
+  .repo-desc {
+    font-size: 13px;
+    color: var(--ink-3);
+    /* 居中后长描述限行宽，避免整行摊平散架 */
+    max-width: 34em;
+  }
  .repo-meta { display: flex; gap: var(--space-3); font-size: 12px; color: var(--ink-3); margin-top: 4px; }
  .lang { display: inline-flex; align-items: center; gap: 4px; }
  .dot {
@@ -0,0 +1,106 @@
+---
+// 自绘打字机动效（5i T8）：替代外链 readme-typing-svg
+// 纯 CSS + 极少 JS：SSR 先渲染第一行（无 JS / reduced-motion 时就是静态首行，不闪不跳），
+// JS 接管后循环「逐字打出 → 停留 → 逐字删除 → 下一行」；光标闪烁走 CSS keyframes。
+interface Props {
+  /** 已本地化的文案行（保持 ≤6 行） */
+  lines: string[];
+  /** 每字毫秒 */
+  speed?: number;
+}
+const { lines, speed = 55 } = Astro.props;
+const safe = lines.map((l) => l.trim()).filter(Boolean).slice(0, 6);
+const first = safe[0] ?? '';
+---
+
+{safe.length > 0 && (
+  <p
+    class="typing"
+    data-lines={JSON.stringify(safe)}
+    data-speed={speed}
+    aria-label={safe.join('；')}
+  >
+    <span class="typing-text" aria-hidden="true">{first}</span>
+    <span class="typing-caret" aria-hidden="true"></span>
+  </p>
+)}
+
+<script>
+  // 每次软导航重挂：ClientRouter 下模块脚本只跑一次 → 用 astro:page-load 统一初始化
+  const reducedMotion = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  function initTyping() {
+    document.querySelectorAll<HTMLElement>('.typing').forEach((el) => {
+      if (el.dataset.typingOn === '1') return;
+      el.dataset.typingOn = '1';
+      const lines: string[] = JSON.parse(el.dataset.lines ?? '[]');
+      const text = el.querySelector<HTMLElement>('.typing-text');
+      if (!text || lines.length < 2 || reducedMotion()) return; // 单行/减动效：保留 SSR 首行
+
+      const speed = Number(el.dataset.speed ?? 55);
+      let line = 0;
+      let char = lines[0].length;
+      let erasing = true;
+      let timer: number | undefined;
+
+      const step = () => {
+        const current = lines[line % lines.length];
+        if (erasing) {
+          char -= 1;
+          text.textContent = current.slice(0, Math.max(char, 0));
+          if (char <= 0) {
+            erasing = false;
+            line += 1;
+            timer = window.setTimeout(step, 260);
+            return;
+          }
+          timer = window.setTimeout(step, Math.max(18, speed / 2));
+        } else {
+          char += 1;
+          text.textContent = lines[line % lines.length].slice(0, char);
+          if (char >= lines[line % lines.length].length) {
+            erasing = true;
+            timer = window.setTimeout(step, 1800);
+            return;
+          }
+          timer = window.setTimeout(step, speed);
+        }
+      };
+      // 首行打完再停留一下开始删除
+      timer = window.setTimeout(step, 1800);
+      el.addEventListener('astro:before-swap', () => window.clearTimeout(timer), { once: true });
+    });
+  }
+
+  initTyping();
+  document.addEventListener('astro:page-load', initTyping);
+</script>
+
+<style>
+  .typing {
+    font-family: var(--font-mono);
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--ink-3);
+    margin: 0 0 var(--space-2);
+    min-height: 1.6em; /* 固定行高，打字期间不推挤下方内容 */
+    display: flex;
+    align-items: center;
+    gap: 1px;
+  }
+  .typing-text { white-space: pre-wrap; }
+  .typing-caret {
+    display: inline-block;
+    width: 0.5em;
+    height: 1em;
+    background: var(--accent);
+    animation: caret-blink 1.05s steps(1) infinite;
+  }
+  @keyframes caret-blink {
+    0%, 49% { opacity: 1; }
+    50%, 100% { opacity: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .typing-caret { animation: none; opacity: 0.6; }
+  }
+</style>
@@ -1,128 +1,74 @@
 ---
-/**
- * 书评索引（/books）：方案 C「抽书阅读」（用户 2026-11-03 拍板定稿）。
- *
- * 为什么是这一版：五个方案里它是唯一在「书少、封面少」时也不露怯的——
- * 一排放得下、长书名不裁、没有 4+1 孤儿位；点一行抽出封面与简介，靠原生
- * details 零 JS。
- *
- * 置顶契约（与文章同一套，见 src/lib/post-order.ts）：
- * - frontmatter `pinned: true` → 排在最前（置顶优先 → 日期倒序）
- * - **支持多本置顶**：所有 pinned 书都默认展开，不限于一本
- * - 置顶标记用「↑ + 横线」的回到顶部图标，不写文字（用户要求）；
- *   展开/收起是另一个形状的 chevron，避免两个箭头混读
- */
+// 书评索引画廊（/books）：色脊排版卡 × 年份分组规整网格
+// 预研方案 B：色脊天然安全（mood 深浅跨亮暗对比度风险回避），零 JS
 import { getCollection } from 'astro:content';
-import { Image } from 'astro:assets';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { t } from '../../i18n/ui';
 import type { Locale } from '../../lib/locale';
 import { sortPosts } from '../../lib/post-order';
+import { Image } from 'astro:assets';

-interface Props {
-  locale?: Locale;
-}
+interface Props { locale?: Locale }
 const { locale = 'zh' } = Astro.props;

 const books = sortPosts(
-  await getCollection(
-    'posts',
-    ({ data }) => !data.draft && data.category === 'reading' && !data.tags.includes('hidden'),
-  ),
+  await getCollection('posts', ({ data }) => !data.draft && data.category === 'reading' && !data.tags.includes('hidden')),
 );

-/**
- * description 回退契约：缺省取正文第一个非空段落（去 markdown 记号）前 60 字。
- * 与历史实现保持一致——书架卡不能出现空白简介。
- */
+// 回退契约（schema 注释声称而此前未实现——视觉复核抓到的缺口）：
+// description 缺省取正文第一个非空段落（去 markdown 记号）前 60 字
 const firstPara = (body: string | undefined): string => {
-  const line =
-    (body ?? '')
-      .split(/\n\s*\n/)
-      .map((l) => l.trim())
-      .find((l) => l && !l.startsWith('#') && !l.startsWith('---')) ?? '';
-  return line.replace(/[*_>`[\]]/g, '').slice(0, 60);
+  const line = (body ?? '').split(/\n\s*\n/).map((l) => l.trim()).find((l) => l && !l.startsWith('#') && !l.startsWith('---')) ?? '';
+  return line.replace(/[*_>`\[\]]/g, '').slice(0, 60);
 };
-
-const items = books.map((b) => ({
-  id: b.id,
-  title: b.data.title,
-  author: b.data.bookAuthor ?? '',
-  desc: b.data.description ?? firstPara(b.body),
-  cover: b.data.cover,
-  mood: b.data.mood ?? 'var(--ink-4)',
-  pinned: b.data.pinned === true,
-  href: locale === 'en' ? `/en/archives/${b.id}/` : `/archives/${b.id}/`,
-}));
-const pinnedCount = items.filter((i) => i.pinned).length;
+const years = [...new Set(books.map((b) => b.data.pubDate.getFullYear()))].sort((a, b) => b - a);
 const L = {
-  shelf: t('books_title', locale),
-  count: locale === 'zh' ? `${items.length} 本` : `${items.length} books`,
-  note:
-    locale === 'zh'
-      ? '点一行展开封面与简介 · 置顶的书默认展开'
-      : 'Tap a row for the cover and blurb · pinned books start open',
-  read: locale === 'zh' ? '读这篇书评 →' : 'Read the review →',
-  pinned: t('pinned_label', locale),
-  expand: locale === 'zh' ? '展开封面与简介' : 'Expand cover and blurb',
+  shelf: locale === 'zh' ? '书架' : 'Books',
+  count: (n: number) => (locale === 'zh' ? `${n} 本` : `${n} books`),
 };
 ---

-<BaseLayout
-  track="reading"
-  title={`${L.shelf} · wait4x`}
-  description={locale === 'zh' ? '读过的书与一句策展' : 'Books read, one line each'}
->
-  <h1 class="page-title">
-    {L.shelf}<span class="count mono">{L.count}</span>
-    {pinnedCount > 0 && <span class="pinned-count mono">{pinnedCount} {L.pinned}</span>}
-  </h1>
-  <p class="page-note">{L.note}</p>
-
-  <ul class="books">
-    {items.map((b) => (
-      <li>
-        <details class="book" style={`--mood:${b.mood}`} open={b.pinned}>
-          <summary class="row" aria-label={`${b.title}${b.author ? ' · ' + b.author : ''} — ${L.expand}`}>
-            <span class="bar" aria-hidden="true"></span>
-            <span class="title">{b.title}</span>
-            {b.pinned && (
-              <span class="pin" title={L.pinned} role="img" aria-label={L.pinned}>
-                {/* 回到顶部图标（↑ + 横线）：不写文字，形状与右侧 chevron 区分 */}
-                <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true">
-                  <path d="M8 12.6V4.2M4.4 7.6 8 4l3.6 3.6" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"></path>
-                  <path d="M3.6 13.6h8.8" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></path>
-                </svg>
-              </span>
-            )}
-            {b.author && <span class="author">{b.author}</span>}
-            <span class="chev" aria-hidden="true">
-              <svg viewBox="0 0 16 16" width="14" height="14">
-                <path d="M4 6.4 8 10.4l4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-              </svg>
-            </span>
+<BaseLayout track="reading" title={`${L.shelf} · wait4x`} description={locale === 'zh' ? '读过的书与一句策展' : 'Books read, one line each'}>
+  <h1 class="page-title">{L.shelf}<span class="count mono">{L.count(books.length)}</span></h1>
+  {years.map((year, yi) => (
+    <details class="year-group" open={yi === 0}>
+      <summary class="y-summary">
+        <span class="y-label mono">{year}</span>
+        <span class="y-count mono">· {books.filter((b) => b.data.pubDate.getFullYear() === year).length} {locale === 'zh' ? '本' : 'books'}</span>
      </summary>
-          <div class="body">
-            {b.cover && (
-              <span class="cover">
+      <ul class="shelf">
+        {books.filter((b) => b.data.pubDate.getFullYear() === year).map((b) => (
+          <li>
+            <a
+              class={`book ${locale === 'en' ? 'en' : ''}`}
+              href={locale === 'en' ? `/en/archives/${b.id}/` : `/archives/${b.id}/`}
+              style={`--mood:${b.data.mood ?? 'var(--ink-4)'}`}
+            >
+              {b.data.cover ? (
                <Image
-                  src={b.cover}
-                  alt={`${b.title}${locale === 'zh' ? ' 封面' : ' cover'}`}
-                  widths={[120, 240]}
-                  sizes="120px"
+                  src={b.data.cover}
+                  alt={`${b.data.title} 封面`}
+                  class="bk-cover"
+                  widths={[96, 192]}
+                  sizes="96px"
                  loading="lazy"
                />
-              </span>
+              ) : (
+                <i class="spine" aria-hidden="true"></i>
+              )}
+              <div class="bk-body">
+                <strong class="bk-title">{b.data.title}</strong>
+                {b.data.bookAuthor && <span class="bk-author">{b.data.bookAuthor}</span>}
+                {(b.data.description || firstPara(b.body)) && (
+                  <span class="bk-desc">{b.data.description ?? firstPara(b.body)}</span>
                )}
-            <div class="info">
-              {b.desc && <p>{b.desc}</p>}
-              <a class="link" href={b.href}>{L.read}</a>
              </div>
-          </div>
-        </details>
+            </a>
          </li>
        ))}
      </ul>
+    </details>
+  ))}
 </BaseLayout>

 <style>
@@ -132,101 +78,97 @@ const L = {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
-    margin-top: var(--space-5);
  }
  .count { font-size: 13px; color: var(--ink-3); }
-  .pinned-count { font-size: 11.5px; color: var(--ink-4); }
-  .page-note { font-size: 13px; color: var(--ink-4); margin-block: var(--space-1) var(--space-4); }
-
-  .books { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
-  .book {
-    border: 1px solid var(--line);
-    border-radius: 8px;
-    overflow: hidden;
-    transition: border-color var(--dur) var(--ease);
-  }
-  .book[open] { border-color: color-mix(in oklab, var(--mood) 42%, var(--line)); }
-  .row {
+  .year-group { margin-top: var(--space-4); border-top: 1px solid var(--line); }
+  .y-summary {
    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-    padding: 10px var(--space-3);
+    align-items: baseline;
+    gap: 0.4rem;
+    padding: var(--space-2) 0;
    cursor: pointer;
    list-style: none;
-    transition: background var(--dur) var(--ease);
  }
-  .row::-webkit-details-marker { display: none; }
-  .row:hover { background: var(--bg-soft); }
-  /* 情绪色脊：贯通行的窄条（不是表单色标） */
-  .bar {
-    width: 8px;
-    align-self: stretch;
-    margin: 2px 0;
-    border-radius: 4px;
-    background: var(--mood);
-    flex: none;
-  }
-  .title {
-    font-family: var(--font-kai);
-    font-size: 15.5px;
-    color: var(--paper-ink);
-    line-height: 1.4;
-    /* 定宽列：作者起点不随书名长短漂移 */
-    width: 11em;
-    flex: none;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .pin {
-    display: inline-flex;
-    color: color-mix(in oklab, var(--mood) 62%, var(--ink-3));
-    flex: none;
-  }
-  .author { font-size: 12.5px; color: var(--ink-3); }
-  .author::before { content: '·'; margin-right: 6px; opacity: 0.5; }
-  .chev {
-    margin-left: auto;
-    display: inline-flex;
+  .y-summary::-webkit-details-marker { display: none; }
+  .y-summary::before {
+    content: '▸';
+    font-size: 11px;
    color: var(--ink-4);
-    transition: rotate var(--dur) var(--ease), color var(--dur) var(--ease);
-  }
-  .row:hover .chev { color: var(--ink-2); }
-  /* 展开时 chevron 转成向上，和左侧「回到顶部」图标形状不同，不会混读 */
-  details[open] > .row .chev { rotate: 180deg; }
-
-  .body {
-    display: flex;
-    gap: var(--space-3);
-    padding: var(--space-3);
-    border-top: 1px dashed var(--line);
-    background: var(--bg-soft);
-  }
-  .cover { flex: none; width: 96px; border-radius: 4px; overflow: hidden; }
-  .cover :global(img) { width: 100%; height: auto; display: block; }
-  .info { min-width: 0; }
-  .info p {
-    font-size: 13.5px;
-    line-height: 1.7;
-    color: var(--ink-2);
-    margin: 0 0 var(--space-2);
-    max-width: var(--measure);
-  }
-  .link {
-    font-size: 13px;
-    color: var(--accent);
-    text-decoration: underline;
-    text-decoration-color: color-mix(in oklab, var(--accent) 35%, transparent);
-    text-underline-offset: 0.2em;
-  }
-
-  @media (max-width: 620px) {
-    .title { width: auto; flex: 1 1 auto; min-width: 0; }
-    .author { display: none; }
-    .body { flex-direction: column; }
-    .cover { width: 88px; }
+    transition: transform var(--dur) var(--ease);
+    transform-origin: 50% 50%;
+    display: inline-block;
+    width: 1em;
  }
+  .year-group[open] > .y-summary::before { transform: rotate(90deg); }
+  .y-summary:hover .y-label { color: var(--ink-2); }
+  .y-count { font-size: 12px; color: var(--ink-4); }
  @media (prefers-reduced-motion: reduce) {
-    .book, .row, .chev { transition: none; }
+    .y-summary::before { transition: none; }
+  }
+  .y-label { font-size: 16px; color: var(--ink-3); margin-bottom: 0; transition: color var(--dur) var(--ease); }
+  .shelf {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: var(--space-3);
+  }
+  /* 色脊卡：纸底 + mood 竖脊 + 文楷书名；hover 边框转 mood（.repo 同语言） */
+  .book {
+    display: flex;
+    min-height: 120px;
+    background: var(--paper);
+    border: 1px solid var(--paper-line);
+    border-radius: 10px;
+    overflow: hidden;
+    text-decoration: none;
+    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
+  }
+  .book:hover { border-color: var(--mood); transform: translateY(-2px); }
+  /* 书封（content/posts/assets/books/<slug>.jpg）：无图时回退色脊卡设计 */
+  .bk-cover {
+    width: 96px;
+    height: 100%;
+    object-fit: cover;
+    align-self: stretch;
+    flex: none;
+    border-right: 1px solid var(--paper-line);
+  }
+  .spine {
+    flex: none;
+    width: 10px;
+    background: var(--mood);
+    border-radius: 10px 0 0 10px;
+  }
+  .bk-body {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: var(--space-3) var(--space-4);
+    min-width: 0;
+  }
+  .bk-title {
+    font-family: var(--font-kai);
+    font-size: 17px;
+    color: var(--paper-ink);
+    line-height: 1.35;
+  }
+  .en .bk-title { font-family: var(--font-serif); }
+  .bk-author {
+    font-size: 12.5px;
+    color: var(--ink-3);
+    font-family: var(--font-sans);
+  }
+  .bk-desc {
+    margin-top: 4px;
+    font-size: 13px;
+    color: var(--ink-2);
+    font-family: var(--font-sans);
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
  }
 </style>
@@ -5,6 +5,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import { t } from '../../i18n/ui';
 import type { Locale } from '../../lib/locale';
 import type { PhotoExif } from '../../lib/exif';
+import { renderRich } from '../../lib/site-content';

 // /en/ 侧由 T4 薄页传 locale='en'；zh 路由无人传参，默认 zh 零回归
 interface Props {
@@ -54,7 +55,10 @@ const cards = await Promise.all(
    return {
      group: photo.data.group,
      title: photo.data.title,
+      // caption 支持 markdown + 排版类（字体/颜色）：与全站文案同一条净化管线，
+      // 因此灯箱右侧文字也能换字体、换颜色（2026-11-02 用户要求）
      caption: photo.data.caption ?? '',
+      captionHtml: photo.data.caption ? await renderRich(photo.data.caption) : '',
      alt: photo.data.alt ?? photo.data.title,
      image: photo.data.image,
      exif: formatExif(photo.data.exif),
@@ -97,6 +101,7 @@ const first = cards[0];
              class="shot-btn"
              data-title={card.title}
              data-caption={card.caption}
+              data-caption-html={card.captionHtml}
              data-exif={card.exif}
              data-full={card.fullSrc}
              data-original={card.original}
@@ -143,7 +148,8 @@ const first = cards[0];
        </svg>
      </button>
      <div class="lb-meta lb-l2">
-        <p id="lb-caption" class="lb-caption">{first?.caption ?? ''}</p>
+        <!-- rich：让 global.css 里的 .rich .c-blue / .rich .font-kai 生效（灯箱文字也能换字体/颜色） -->
+        <div id="lb-caption" class="lb-caption rich" set:html={first?.captionHtml ?? ''}></div>
        <button
          id="lb-cap-more"
          class="lb-cap-more"
@@ -497,8 +503,10 @@ const first = cards[0];
      titleEl.textContent = title;
      titleEl.style.display = title ? '' : 'none';
      if (captionEl) {
-        captionEl.textContent = btn.dataset.caption ?? '';
-        captionEl.style.display = captionEl.textContent ? '' : 'none';
+        // 富文本 caption：HTML 由 renderRich 在构建期净化（危险标签整棵丢弃），此处可直接写入
+        const html = btn.dataset.captionHtml ?? '';
+        captionEl.innerHTML = html;
+        captionEl.style.display = captionEl.textContent?.trim() ? '' : 'none';
      }
      // EXIF 字段级渲染：每段 nowrap（分隔符由 CSS ::after 粘在段尾，永不悬空行首/行尾）
      const exifText = btn.dataset.exif ?? '';
@@ -716,6 +724,14 @@ const first = cards[0];
    color: #dfe6f3;
    max-width: 640px;
  }
+  /* caption 富文本（动态写入，scoped 够不着）：段间距收紧、首尾不撑高 */
+  .lb-caption :global(p) { margin: 0 0 0.4em; }
+  .lb-caption :global(> :first-child) { margin-top: 0; }
+  .lb-caption :global(> :last-child) { margin-bottom: 0; }
+  .lb-caption :global(strong) { color: #fff; }
+  .lb-caption :global(a) { color: #8ea2ff; }
+  /* 灯箱底是深色：彩色语义类在暗底上取 soft 档更稳（tokens 的 soft 值本就为暗底调过） */
+  .lb-caption :global(.c-blue) { color: #8ea2ff; }
  .lb-row {
    display: flex;
    align-items: center;
@@ -804,6 +820,9 @@ const first = cards[0];
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
+    /* 桌面端信息栏是 top:0→bottom:0 的右侧全高侧栏，且 DOM 在其后 → 命中测试被它吃掉，
+       右上关闭点不动（elementFromPoint 实锤命中 .lb-meta）。抬层级让按钮始终在最上 */
+    z-index: 12;
  }
  @media (max-width: 819px) {
    /* 触屏条：‹ 图 › 一行，caption/meta 整行在下（flex 生效后 order 才有意义） */
@@ -292,6 +292,11 @@ export const collections = {
      perSource: z.enum(['both', 'github', 'gitea']).optional(),
      /** 开篇文案来源：off（默认，用本文件 blurb）/ github-readme（构建期取 profile 仓 README） */
      intro_from: z.enum(['off', 'github-readme']).optional(),
+      /**
+       * 档案卡顶部的打字机动效文案（自绘 CSS/JS，非第三方 SVG）。
+       * 越界（>6 条）由访问器截断；全空则组件用内置默认三行。
+       */
+      typing: z.array(bilingual).optional(),
    }),
  }),
  // slug 即文件名（glob loader 默认按文件名生成 id）
@@ -113,7 +113,6 @@ const dict = {
  // ===== F 车道：访问量小字（Artalk pv，组件内独立计数） =====
  pv_viewed: { zh: '人看过', en: 'views' },
  pinned_label: { zh: '置顶', en: 'Pinned' },
-  books_title: { zh: '书架', en: 'Books' },
  comment_count: { zh: '条评论', en: 'comments' },
  moment_comments: { zh: '评论', en: 'Comments' },
  lb_hint: { zh: '滚轮缩放 · 双击放大 · Esc 关闭', en: 'Wheel to zoom · Double-click · Esc' },
@@ -15,6 +15,7 @@ import ThemeScript from '../components/ThemeScript.astro';
 import Keyboard from '../components/geek/Keyboard.astro';
 import { localeOf, localePath } from '../lib/locale';
 import { siteFavicon } from '../lib/site-content';
+import { fontsForPage } from '../lib/font-needs';
 import SearchDialog from '../components/SearchDialog.astro';
 import BuildInfo from '../components/geek/BuildInfo.astro';
 import { ClientRouter } from 'astro:transitions';
@@ -38,6 +39,10 @@ const favicon = await siteFavicon();
 // 自指 canonical（T2）：SEO 权重收敛到当前页自身，与 hreflang 组合覆盖双轨
 const canonicalUrl = new URL(withSlash(rawPath), Astro.site).href;
 const themeStyle = await themeCss();
+// 字体按需加载（Phase 5i T1）：不再按 track 一刀切——旧实现把 serif/kai/kuaile/汇文
+// 全关在 reading 分支里，技术轨用 .font-kai 时字体 CSS 从不加载、浏览器静默回退系统宋体。
+// 现改为：本页内容里扫到什么字族就加载什么（详见 src/lib/font-needs.ts 头注释）。
+const fontNeeds = await fontsForPage(rawPath, track);
 ---

 <!doctype html>
@@ -70,22 +75,31 @@ const themeStyle = await themeCss();
    </script>
    <ClientRouter />
    <!-- 非阻塞字体 CSS：preload+onload 回切（Lighthouse P0-1：渲染阻塞 708KB 元凶） -->
+    <!-- 常驻：无衬线正文 + 代码 mono；按需：serif/kai/kuaile/汇文——取决于本页内容诉求 -->
    <link rel="preload" as="style" href={sansVar} onload="this.rel='stylesheet'" />
    <link rel="preload" as="style" href={mono400} onload="this.rel='stylesheet'" />
    <link rel="preload" as="style" href={mono700} onload="this.rel='stylesheet'" />
-    {track === 'reading' && (
-      <>
+    {fontNeeds.has('serif') && (
      <link rel="preload" as="style" href={serifVar} onload="this.rel='stylesheet'" />
+    )}
+    {fontNeeds.has('kai') && (
      <link rel="preload" as="style" href={kai} onload="this.rel='stylesheet'" />
+    )}
+    {fontNeeds.has('kuaile') && (
      <link rel="preload" as="style" href={kuaile} onload="this.rel='stylesheet'" />
-        <!-- 汇文明朝（OFL-1.1，文风开源切片包 339 片，按 unicode-range 按需拉取） -->
+    )}
+    <!-- 汇文明朝（OFL-1.1，文风开源切片包 339 片，按 unicode-range 按需拉取；
+         手工切片产物路径固定，勿动） -->
+    {fontNeeds.has('huiwen') && (
      <link rel="preload" as="style" href="/fonts/subset/hwmc/fonts.css" onload="this.rel='stylesheet'" />
-      </>
    )}
    <noscript>
      <link rel="stylesheet" href={sansVar} />
      <link rel="stylesheet" href={mono400} />
-      {track === 'reading' && <link rel="stylesheet" href={serifVar} />}
+      {fontNeeds.has('serif') && <link rel="stylesheet" href={serifVar} />}
+      {fontNeeds.has('kai') && <link rel="stylesheet" href={kai} />}
+      {fontNeeds.has('kuaile') && <link rel="stylesheet" href={kuaile} />}
+      {fontNeeds.has('huiwen') && <link rel="stylesheet" href="/fonts/subset/hwmc/fonts.css" />}
    </noscript>
    <!-- PWA：manifest + 双方案 theme-color（明暗随系统）+ iOS 图标 -->
    <link rel="manifest" href="/manifest.webmanifest" />
@@ -0,0 +1,174 @@
+/**
+ * 字体按需加载（Phase 5i T1）：把「轨道门禁」换成「内容诉求驱动」。
+ *
+ * ## 为什么要有这个文件（2026-11-02 用户实测踩的坑，勿删）
+ *
+ * 旧实现把 serif / kai / kuaile / 汇文四份字体 CSS 全关在
+ * `track === 'reading'` 分支里（BaseLayout）。但技术轨才是全站默认
+ * （`track` 缺省 `tech`），于是出现一类**最隐蔽的失效**：
+ *
+ * - 技术文里写 `<span class="font-kai">`：class 在、`font-family` 计算值也对
+ *   （`"LXGW WenKai Screen", …`），但那份字体 CSS 从未加载 →
+ *   `document.fonts` 里根本没有这个族 → 浏览器静默回退系统宋体。
+ * - 它不报错、不报警，用户看到的现象只有一句：「字体没换」。
+ *
+ * 教训：字体是「外部资源 + 静默回退」，门禁不能按页面所属栏目拍脑袋，
+ * 只能看这一页**真正声明的诉求**——扫出来的字族才加载，扫不到就不加载。
+ *
+ * ## 本文件的两类输入
+ *
+ * 1. **内容扫描**：正文 markdown、站点单例 yaml（页面文案/块）、瞬间文本里
+ *    出现的类名（含 renderRich 白名单放行的排版类）。
+ * 2. **页面静态需求**：某些页面把字族写死在组件里（书架卡标题用楷体、
+ *    关于页的 quote 块用 `.quote-line` 楷体），内容里扫不到类名，也要算。
+ *
+ * @module font-needs
+ */
+import { getCollection, getEntry } from 'astro:content';
+
+/** 可独立加载的字体 CSS 包（sans / mono 常驻，不在此列） */
+export type FontKey = 'serif' | 'kai' | 'kuaile' | 'huiwen';
+
+/**
+ * 类名 → 需要的字体包。
+ *
+ * 只列「会让浏览器拉 webfont」的类；以下三类**不产生**字体请求，故不入表：
+ * - `font-hei-sys`：首选 Noto Sans SC（常驻已加载）
+ * - `font-fangsong`：纯系统回退（无 OFL 自托管包，docs 已注明）
+ * - 普通 `font-sans` / `font-mono`：常驻
+ *
+ * 另外把两个「文学排版类」也计入，因为它们各自改字体：
+ * `quote-line` → 楷体；`drop-cap` → 首字衬线。
+ */
+export const FONT_CLASS_NEEDS: Record<string, FontKey[]> = {
+  'font-serif': ['serif'],
+  'font-song': ['serif'], // 首选 "Noto Serif SC Variable"（= serif 包）
+  'font-kai': ['kai'],
+  'font-kai-sys': ['kai'], // 首选 "LXGW WenKai Screen"（= kai 包）
+  'font-huiwen': ['huiwen'],
+  'font-kuaile': ['kuaile'],
+  'font-art-kuaile': ['kuaile'], // 同一个 ZCOOL KuaiLe 族
+  'quote-line': ['kai'],
+  'drop-cap': ['serif'],
+};
+
+/** 拼接成一条正则：`\bfont-kai\b` 这类词边界匹配（避免 font-kuaile 误配 font-kuaile-x） */
+const CLASS_PATTERN = new RegExp(
+  `\\b(?:${Object.keys(FONT_CLASS_NEEDS)
+    .map((c) => c.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+    .join('|')})\\b`,
+  'g',
+);
+
+/**
+ * 从若干段文本里探测需要加载的字体包（纯函数，无 IO）。
+ *
+ * @param texts 页面上可能出现排版类的原始文本（正文 markdown / yaml 序列化 / 瞬间文本等）
+ * @returns 命中的字体包集合；空集表示本页只需常驻的 sans + mono
+ *
+ * @example
+ * fontsFromText(['<span class="font-kai">字</span>']); // Set { 'kai' }
+ * fontsFromText(['纯文本没有类名']);                    // Set {}
+ */
+export function fontsFromText(texts: (string | undefined | null)[]): Set<FontKey> {
+  const out = new Set<FontKey>();
+  for (const text of texts) {
+    if (!text) continue;
+    for (const hit of text.matchAll(CLASS_PATTERN)) {
+      for (const key of FONT_CLASS_NEEDS[hit[0]] ?? []) out.add(key);
+    }
+  }
+  return out;
+}
+
+/** 把 yaml 单例的 data 摊平成可扫描文本（序列化即可：类名都是字符串字面量） */
+const flatten = (data: unknown): string => {
+  try {
+    return JSON.stringify(data);
+  } catch {
+    return '';
+  }
+};
+
+/** 路径归一：去 query/hash、去 index.html、保留结尾斜杠，便于前缀匹配 */
+const normalizePath = (pathname: string): string => {
+  const p = pathname.split(/[?#]/)[0].replace(/\/index\.html$/, '/').replace(/\.html$/, '/');
+  const withSlash = p.endsWith('/') ? p : `${p}/`;
+  return withSlash.startsWith('/') ? withSlash : `/${withSlash}`;
+};
+
+/**
+ * 解析一个页面需要哪些字体包（构建期，供 BaseLayout 注入）。
+ *
+ * 规则 = **页面静态需求 ∪ 内容扫描结果**：
+ * - 书评轨（`track='reading'`）正文默认字族就是衬线 → serif 必载；
+ * - 书架页标题写死楷体、英文书架写死衬线 → 该两页固定 kai（+en 加 serif）；
+ * - 关于页的 quote 块写死 `.quote-line` → 有 quote 块即需 kai；
+ * - 其余全部靠内容扫描（文章正文 / 页面单例 yaml / 瞬间文本）。
+ *
+ * 未识别的页面返回空集：只加载常驻 sans + mono，绝不凭栏目名猜字体。
+ *
+ * @param pathname 当前页面路径（`Astro.url.pathname`）
+ * @param track 正文轨（只影响书评默认衬线这一条静态需求）
+ * @returns 需要加载的字体包集合
+ */
+export async function fontsForPage(pathname: string, track: 'reading' | 'tech' = 'tech'): Promise<Set<FontKey>> {
+  const path = normalizePath(pathname);
+  const isEn = path.startsWith('/en/');
+  // 去掉语言前缀与开头斜杠，得到形如 'archives/x/' 的路由键。
+  // 注意 slice(4)（'/en/' 四个字符）而不是 slice(3)：后者会残留一个前导 '/'，
+  // 导致 en 页全部匹配不上（2026-11-03 实测：en/moments、en/archives/* 的按需字体全丢）。
+  const route = isEn ? path.slice(4) : path.slice(1);
+  const needs = new Set<FontKey>();
+
+  // ① 书评轨：正文默认字体就是衬线（`.prose-reading { font-family: var(--font-serif) }`）
+  if (track === 'reading') needs.add('serif');
+
+  // ② 文章页：扫正文 markdown（中文缺译时回退中文正文，与页面的回落一致）
+  const article = route.match(/^archives\/([^/]+)\/$/);
+  if (article) {
+    const slug = article[1];
+    const enEntry = isEn ? await getEntry('postsEn', slug) : undefined;
+    const entry = enEntry ?? (await getEntry('posts', slug));
+    const texts = [entry?.body ?? ''];
+    for (const key of fontsFromText(texts)) needs.add(key);
+    return needs;
+  }
+
+  // ③ 书架页：书脊卡标题写死楷体（BooksPage.astro），英文书架再写死衬线
+  if (route === 'books/') {
+    needs.add('kai');
+    if (isEn) needs.add('serif');
+    return needs;
+  }
+
+  // ④ 首页 / 关于页 / 开源页：扫各自单例（页面文案与块内容都走 renderRich 白名单）
+  if (route === '') {
+    const home = await getEntry('siteHome', 'home');
+    for (const key of fontsFromText([flatten(home?.data)])) needs.add(key);
+    return needs;
+  }
+  if (route === 'about/') {
+    const about = await getEntry('siteAbout', 'about');
+    const text = flatten(about?.data);
+    for (const key of fontsFromText([text])) needs.add(key);
+    // quote 块在组件里写死 `.quote-line`（楷体），内容里没有类名字面量 → 按块型补
+    if (text.includes('"type":"quote"')) needs.add('kai');
+    return needs;
+  }
+  if (route === 'opensource/') {
+    const os = await getEntry('siteOpenSource', 'opensource');
+    for (const key of fontsFromText([flatten(os?.data)])) needs.add(key);
+    return needs;
+  }
+
+  // ⑤ 瞬间页：T2 起瞬间正文走富文本管线，可能带排版类 → 扫全部瞬间文本
+  if (route === 'moments/') {
+    const moments = await getCollection('moments');
+    for (const key of fontsFromText(moments.map((m) => m.data.text))) needs.add(key);
+    return needs;
+  }
+
+  // ⑥ 其余页面（归档列表 / 图库 / 终端 / 栈 / 纸面…）：只吃常驻 sans + mono
+  return needs;
+}
@@ -148,7 +148,7 @@ pre code { background: none; border: none; padding: 0; font-size: inherit; }
 }
 /* 图注：**显式类驱动**（`<p class="fig-cap">说明</p>`）。此前按 `p > em:only-child` 自动命中，
   把正文里任何独占成段的斜体都变成块级居中——用户实测的排版 bug（斜体单独一行并居中）由此而来。 */
-.prose-reading p.fig-cap, .prose-tech p.fig-cap, .rich p.fig-cap, .prose-body p.fig-cap,
+.prose-reading p.fig-cap, .prose-tech p.fig-cap, .rich p.fig-cap, .prose-body p.fig-cap, .mom-text p.fig-cap,
 .prose-reading p.fig-cap em, .prose-tech p.fig-cap em {
  display: block;
  text-align: center;
@@ -167,66 +167,66 @@ pre code { background: none; border: none; padding: 0; font-size: inherit; }
 }
 /* ── 受限排版类（文章内通过 <span class> 使用；rehype 白名单只放行这些类名） ──
   颜色一律走 tokens，亮暗双态都可读；禁任意 hex/内联样式（保持灰阶骨架）。 */
-.prose-reading .ink-1, .prose-tech .ink-1, .rich .ink-1, .prose-body .ink-1 { color: var(--ink-1); }
-.prose-reading .ink-2, .prose-tech .ink-2, .rich .ink-2, .prose-body .ink-2 { color: var(--ink-2); }
-.prose-reading .ink-3, .prose-tech .ink-3, .rich .ink-3, .prose-body .ink-3 { color: var(--ink-3); }
-.prose-reading .ink-muted, .prose-tech .ink-muted, .rich .ink-muted, .prose-body .ink-muted { color: var(--ink-4); }
-.prose-reading .ink-accent, .prose-tech .ink-accent, .rich .ink-accent, .prose-body .ink-accent { color: var(--accent); }
-.prose-reading .ink-accent-soft, .prose-tech .ink-accent-soft, .rich .ink-accent-soft, .prose-body .ink-accent-soft { color: var(--accent-soft-text); }
-.prose-reading .ink-warm, .prose-tech .ink-warm, .rich .ink-warm, .prose-body .ink-warm { color: var(--ink-warm); }
-.prose-reading .ink-cool, .prose-tech .ink-cool, .rich .ink-cool, .prose-body .ink-cool { color: var(--ink-cool); }
-.prose-reading .ink-faint, .prose-tech .ink-faint, .rich .ink-faint, .prose-body .ink-faint { color: var(--ink-faint); }
+.prose-reading .ink-1, .prose-tech .ink-1, .rich .ink-1, .mom-text .ink-1, .prose-body .ink-1 { color: var(--ink-1); }
+.prose-reading .ink-2, .prose-tech .ink-2, .rich .ink-2, .mom-text .ink-2, .prose-body .ink-2 { color: var(--ink-2); }
+.prose-reading .ink-3, .prose-tech .ink-3, .rich .ink-3, .mom-text .ink-3, .prose-body .ink-3 { color: var(--ink-3); }
+.prose-reading .ink-muted, .prose-tech .ink-muted, .rich .ink-muted, .mom-text .ink-muted, .prose-body .ink-muted { color: var(--ink-4); }
+.prose-reading .ink-accent, .prose-tech .ink-accent, .rich .ink-accent, .mom-text .ink-accent, .prose-body .ink-accent { color: var(--accent); }
+.prose-reading .ink-accent-soft, .prose-tech .ink-accent-soft, .rich .ink-accent-soft, .mom-text .ink-accent-soft, .prose-body .ink-accent-soft { color: var(--accent-soft-text); }
+.prose-reading .ink-warm, .prose-tech .ink-warm, .rich .ink-warm, .mom-text .ink-warm, .prose-body .ink-warm { color: var(--ink-warm); }
+.prose-reading .ink-cool, .prose-tech .ink-cool, .rich .ink-cool, .mom-text .ink-cool, .prose-body .ink-cool { color: var(--ink-cool); }
+.prose-reading .ink-faint, .prose-tech .ink-faint, .rich .ink-faint, .mom-text .ink-faint, .prose-body .ink-faint { color: var(--ink-faint); }
 /* 语义色板：彩色只作用于正文强调（站点外壳保持灰阶）。
   每色相两档：标准 / soft（阈值内最淡）；亮暗各取独立值，均实测 ≥4.5:1。 */
-.prose-reading .c-blue, .prose-tech .c-blue, .rich .c-blue, .prose-body .c-blue { color: var(--c-blue); }
-.prose-reading .c-blue-soft, .prose-tech .c-blue-soft, .rich .c-blue-soft, .prose-body .c-blue-soft { color: var(--c-blue-soft); }
-.prose-reading .c-teal, .prose-tech .c-teal, .rich .c-teal, .prose-body .c-teal { color: var(--c-teal); }
-.prose-reading .c-teal-soft, .prose-tech .c-teal-soft, .rich .c-teal-soft, .prose-body .c-teal-soft { color: var(--c-teal-soft); }
-.prose-reading .c-green, .prose-tech .c-green, .rich .c-green, .prose-body .c-green { color: var(--c-green); }
-.prose-reading .c-green-soft, .prose-tech .c-green-soft, .rich .c-green-soft, .prose-body .c-green-soft { color: var(--c-green-soft); }
-.prose-reading .c-yellow, .prose-tech .c-yellow, .rich .c-yellow, .prose-body .c-yellow { color: var(--c-yellow); }
-.prose-reading .c-yellow-soft, .prose-tech .c-yellow-soft, .rich .c-yellow-soft, .prose-body .c-yellow-soft { color: var(--c-yellow-soft); }
-.prose-reading .c-orange, .prose-tech .c-orange, .rich .c-orange, .prose-body .c-orange { color: var(--c-orange); }
-.prose-reading .c-orange-soft, .prose-tech .c-orange-soft, .rich .c-orange-soft, .prose-body .c-orange-soft { color: var(--c-orange-soft); }
-.prose-reading .c-red, .prose-tech .c-red, .rich .c-red, .prose-body .c-red { color: var(--c-red); }
-.prose-reading .c-red-soft, .prose-tech .c-red-soft, .rich .c-red-soft, .prose-body .c-red-soft { color: var(--c-red-soft); }
-.prose-reading .c-pink, .prose-tech .c-pink, .rich .c-pink, .prose-body .c-pink { color: var(--c-pink); }
-.prose-reading .c-pink-soft, .prose-tech .c-pink-soft, .rich .c-pink-soft, .prose-body .c-pink-soft { color: var(--c-pink-soft); }
-.prose-reading .c-purple, .prose-tech .c-purple, .rich .c-purple, .prose-body .c-purple { color: var(--c-purple); }
-.prose-reading .c-purple-soft, .prose-tech .c-purple-soft, .rich .c-purple-soft, .prose-body .c-purple-soft { color: var(--c-purple-soft); }
-.prose-reading .font-serif, .prose-tech .font-serif, .rich .font-serif, .prose-body .font-serif { font-family: var(--font-serif); }
-.prose-reading .font-kai, .prose-tech .font-kai, .rich .font-kai, .prose-body .font-kai { font-family: var(--font-kai); }
-.prose-reading .font-sans, .prose-tech .font-sans, .rich .font-sans, .prose-body .font-sans { font-family: var(--font-sans); }
-.prose-reading .font-mono, .prose-tech .font-mono, .rich .font-mono, .prose-body .font-mono { font-family: var(--font-mono); font-size: 0.92em; }
+.prose-reading .c-blue, .prose-tech .c-blue, .rich .c-blue, .mom-text .c-blue, .prose-body .c-blue { color: var(--c-blue); }
+.prose-reading .c-blue-soft, .prose-tech .c-blue-soft, .rich .c-blue-soft, .mom-text .c-blue-soft, .prose-body .c-blue-soft { color: var(--c-blue-soft); }
+.prose-reading .c-teal, .prose-tech .c-teal, .rich .c-teal, .mom-text .c-teal, .prose-body .c-teal { color: var(--c-teal); }
+.prose-reading .c-teal-soft, .prose-tech .c-teal-soft, .rich .c-teal-soft, .mom-text .c-teal-soft, .prose-body .c-teal-soft { color: var(--c-teal-soft); }
+.prose-reading .c-green, .prose-tech .c-green, .rich .c-green, .mom-text .c-green, .prose-body .c-green { color: var(--c-green); }
+.prose-reading .c-green-soft, .prose-tech .c-green-soft, .rich .c-green-soft, .mom-text .c-green-soft, .prose-body .c-green-soft { color: var(--c-green-soft); }
+.prose-reading .c-yellow, .prose-tech .c-yellow, .rich .c-yellow, .mom-text .c-yellow, .prose-body .c-yellow { color: var(--c-yellow); }
+.prose-reading .c-yellow-soft, .prose-tech .c-yellow-soft, .rich .c-yellow-soft, .mom-text .c-yellow-soft, .prose-body .c-yellow-soft { color: var(--c-yellow-soft); }
+.prose-reading .c-orange, .prose-tech .c-orange, .rich .c-orange, .mom-text .c-orange, .prose-body .c-orange { color: var(--c-orange); }
+.prose-reading .c-orange-soft, .prose-tech .c-orange-soft, .rich .c-orange-soft, .mom-text .c-orange-soft, .prose-body .c-orange-soft { color: var(--c-orange-soft); }
+.prose-reading .c-red, .prose-tech .c-red, .rich .c-red, .mom-text .c-red, .prose-body .c-red { color: var(--c-red); }
+.prose-reading .c-red-soft, .prose-tech .c-red-soft, .rich .c-red-soft, .mom-text .c-red-soft, .prose-body .c-red-soft { color: var(--c-red-soft); }
+.prose-reading .c-pink, .prose-tech .c-pink, .rich .c-pink, .mom-text .c-pink, .prose-body .c-pink { color: var(--c-pink); }
+.prose-reading .c-pink-soft, .prose-tech .c-pink-soft, .rich .c-pink-soft, .mom-text .c-pink-soft, .prose-body .c-pink-soft { color: var(--c-pink-soft); }
+.prose-reading .c-purple, .prose-tech .c-purple, .rich .c-purple, .mom-text .c-purple, .prose-body .c-purple { color: var(--c-purple); }
+.prose-reading .c-purple-soft, .prose-tech .c-purple-soft, .rich .c-purple-soft, .mom-text .c-purple-soft, .prose-body .c-purple-soft { color: var(--c-purple-soft); }
+.prose-reading .font-serif, .prose-tech .font-serif, .rich .font-serif, .mom-text .font-serif, .prose-body .font-serif { font-family: var(--font-serif); }
+.prose-reading .font-kai, .prose-tech .font-kai, .rich .font-kai, .mom-text .font-kai, .prose-body .font-kai { font-family: var(--font-kai); }
+.prose-reading .font-sans, .prose-tech .font-sans, .rich .font-sans, .mom-text .font-sans, .prose-body .font-sans { font-family: var(--font-sans); }
+.prose-reading .font-mono, .prose-tech .font-mono, .rich .font-mono, .mom-text .font-mono, .prose-body .font-mono { font-family: var(--font-mono); font-size: 0.92em; }
 /* 系统字族回退类：不下载字体，命中访客本机字体——跨设备不保证一致（docs 已注明） */
 /* 自托管优先 + 系统兜底（2026-11-02 口径）：跨设备一致性由站内 webfont 保证，
   系统字族只作最后兜底；font-fangsong 暂无 OFL 自托管包，仍为纯系统回退（docs 已注明）。 */
-.prose-reading .font-song, .prose-tech .font-song, .rich .font-song, .prose-body .font-song {
+.prose-reading .font-song, .prose-tech .font-song, .rich .font-song, .mom-text .font-song, .prose-body .font-song {
  font-family: "Noto Serif SC Variable", "Noto Serif SC", "Songti SC", SimSun, serif;
 }
-.prose-reading .font-kai-sys, .prose-tech .font-kai-sys, .rich .font-kai-sys, .prose-body .font-kai-sys {
+.prose-reading .font-kai-sys, .prose-tech .font-kai-sys, .rich .font-kai-sys, .mom-text .font-kai-sys, .prose-body .font-kai-sys {
  font-family: "LXGW WenKai Screen", "Kaiti SC", STKaiti, KaiTi, serif;
 }
-.prose-reading .font-hei-sys, .prose-tech .font-hei-sys, .rich .font-hei-sys, .prose-body .font-hei-sys {
+.prose-reading .font-hei-sys, .prose-tech .font-hei-sys, .rich .font-hei-sys, .mom-text .font-hei-sys, .prose-body .font-hei-sys {
  font-family: "Noto Sans SC Variable", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
 }
-.prose-reading .font-huiwen, .prose-tech .font-huiwen, .rich .font-huiwen, .prose-body .font-huiwen {
+.prose-reading .font-huiwen, .prose-tech .font-huiwen, .rich .font-huiwen, .mom-text .font-huiwen, .prose-body .font-huiwen {
  font-family: 'WF-Hwmc', var(--font-serif);
 }
-.prose-reading .font-kuaile, .prose-tech .font-kuaile, .rich .font-kuaile, .prose-body .font-kuaile {
+.prose-reading .font-kuaile, .prose-tech .font-kuaile, .rich .font-kuaile, .mom-text .font-kuaile, .prose-body .font-kuaile {
  font-family: 'ZCOOL KuaiLe', var(--font-serif);
 }
 /* 艺术字体专用类（层 3）：仅用于标题/短句。艺术字字形大、CJK 切片体积高
   （实测 163KB/用到页），长段使用会显著抬高单页字体成本——docs 有体积警告。 */
-.prose-reading .font-art-kuaile, .prose-tech .font-art-kuaile, .rich .font-art-kuaile, .prose-body .font-art-kuaile {
+.prose-reading .font-art-kuaile, .prose-tech .font-art-kuaile, .rich .font-art-kuaile, .mom-text .font-art-kuaile, .prose-body .font-art-kuaile {
  font-family: 'ZCOOL KuaiLe', var(--font-serif);
  letter-spacing: 0.02em;
 }
-.prose-reading .font-fangsong, .prose-tech .font-fangsong, .rich .font-fangsong, .prose-body .font-fangsong {
+.prose-reading .font-fangsong, .prose-tech .font-fangsong, .rich .font-fangsong, .mom-text .font-fangsong, .prose-body .font-fangsong {
  font-family: FangSong, STFangsong, "FangSong_GB2312", serif;
 }
 /* 文学常用：首字下沉（书评开篇）与金句块（引文式的独立强调段） */
-.prose-reading p.drop-cap::first-letter, .prose-tech p.drop-cap::first-letter, .rich p.drop-cap::first-letter, .prose-body p.drop-cap::first-letter {
+.prose-reading p.drop-cap::first-letter, .prose-tech p.drop-cap::first-letter, .rich p.drop-cap::first-letter, .mom-text p.drop-cap::first-letter, .prose-body p.drop-cap::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 3.1em;
@@ -235,7 +235,7 @@ pre code { background: none; border: none; padding: 0; font-size: inherit; }
  margin-top: 0.05em;
  color: var(--paper-ink);
 }
-.prose-reading .quote-line, .prose-tech .quote-line, .rich .quote-line, .prose-body .quote-line {
+.prose-reading .quote-line, .prose-tech .quote-line, .rich .quote-line, .mom-text .quote-line, .prose-body .quote-line {
  display: block;
  font-family: var(--font-kai);
  color: var(--paper-ink);
Author	SHA1	Message	Date
wait4xandGLM-5.3	6293fe25d5	chore(spec): 5i 勾选 T1 Spec: 2026-11-02_blog-5i-fonts-polish Co-authored-by: GLM-5.3	2026-11-03 11:28:51 +08:00
wait4xandGLM-5.3	8d82aab213	fix(fonts): 字体切换真加载——按内容诉求注入，含瞬间排版类作用域缺口（5i T1）用户实测「字族渲染没有成功，尤其是字体的切换」。根因不是字体没做，是加载门禁错： BaseLayout 把 serif/kai/kuaile/hwmc 四份字体 CSS 全关在 `track === 'reading'` 分支里，技术轨文章与全站页面（默认 track='tech'）从不加载它们——于是 `.font-kai` 计算值虽是 `"LXGW WenKai Screen"`，但该 @font-face 根本不在文档字体集里，浏览器静默回退系统宋体。 - 新增 `src/lib/font-needs.ts`：`fontsFromText()` 纯函数 + `fontsForPage(pathname, track)` 按路径取该页内容（文章正文 / home.yaml / about.yaml / opensource.yaml / 全部瞬间文本）与页面静态诉求（reading→serif；书架标题写死楷体→kai 等）算出所需字族集合 - BaseLayout 改为逐项按需注入（非阻塞 preload+onload 写法保留），noscript 同步；汇文明朝仍走 public 手工切片路径，network/font-display 未动 - 顺手补掉 5h 遗留的用户可见缺口：瞬间富文本容器 class 是 `mom-text`，而全局排版类规则只覆盖 `.prose-*/.rich/.prose-body` → 瞬间里写 `font-kai`/`c-teal` 一直只有 class 没有样式（新瞬间正是这么写的，用户看到的就是"没变色没换字"）。global.css 给 38 处选择器组补 `.mom-text` - 另修自写 bug：en 路由切分 `slice(3)` 残留前导 `/` 导致 en 页按需字体全部落空，改 `slice(4)` 验证: 构建 exit 0（content-lint 51 页 0/0/0）；E2E 46/46；Playwright 实测技术轨文章 document.fonts 命中 LXGW WenKai Screen / WF-Hwmc / ZCOOL KuaiLe / Noto Serif SC，`.font-kai` 计算族 = LXGW 且 check=true；首页仍为基线（零增量）；瞬间页因有 font-kai 内容而命中 LXGW；书评页只拉 serif（41 片，0 kai 0 汇文） Spec: 2026-11-02_blog-5i-fonts-polish (T1) Co-authored-by: GLM-5.3	2026-11-03 11:28:51 +08:00
wait4xandGLM-5.3	029633f00f	chore(spec): 5i 勾选 T6/T8 Spec: 2026-11-02_blog-5i-fonts-polish Co-authored-by: GLM-5.3	2026-11-03 11:24:29 +08:00
wait4xandGLM-5.3	0ff4ede91f	feat(opensource): 项目墙恢复居中，README 动效以自托管方式回归（5i T6/T8）用户两项要求：开源页 Projects「依旧采取居中即可，不用左对齐」；README 迁移后「很多图片元素还有一些 svg 基本上都摒弃了，可以在 readme 的基础上进行再创新，保留那些动效的图，以及创新更多一些显示方式」。 T6 项目墙居中：`.repo` 从 align-items:stretch/text-align:left 改回 center/center， `.repo-desc` 加 max-width:34em 防居中后长描述散架；语言点保持灰阶（与对齐无关）。 T8 动效回归（零运行时外链）： - 新增 geek/TypingLines.astro：自绘打字机（SSR 先出首行防闪白，JS 逐字打出/删除/ 轮播，光标 CSS 闪烁，prefers-reduced-motion 与单条文案时保持静态，min-height 防抖，astro:page-load 重挂兼容软导航）——替代 readme-typing-svg 外链，且跟随主题 - 新增 scripts/build-perf/fetch-readme-assets.mjs：抓 stats/top-langs/streak/snake 到 public/github-assets/（10s 超时 + UA、透明底、亮暗两套站点色），产物入仓保证离线可构建；单资产失败保留旧文件、无旧文件则该卡不渲染 - GithubProfile 新增「数据板」：灰阶 hairline 卡 + mono 小标题 + 2 列网格（移动单列），与原生统计四格、语言占比、热力图组合成展示区；贡献蛇在暗色加 grayscale+invert 滤镜（SVG 内部是自带绿阶，直接贴暗底刺眼） - build.sh 只做存在性守卫 + 缺资产 WARN，不挂抓取（发布链不被外网抖动拖累） - 后台开源页新增 typing 字段（list，zh/en 双语，≤6 条，summary 取 zh）+ schema 声明验证: 构建 51 页 exit 0；config-check 211 字段/66 hint 全过；E2E 46/46；产物断言第三方外链零命中、本地引用 streak-light/streak-dark/snake； Playwright 实测打字机文本 900ms 内变化（动效在跑）、streak naturalWidth=495、 snake=880、暗色自动切 streak-dark、项目墙 center/center、1280 与 390 均零横向溢出备注: github-readme-stats 今日全局 503，stats/top-langs 两卡按契约跳过（原生四格与语言条已覆盖同一信息）；服务恢复后跑一次 fetch-readme-assets.mjs 即自动补上。 Spec: 2026-11-02_blog-5i-fonts-polish (T6/T8) Co-authored-by: GLM-5.3	2026-11-03 11:24:28 +08:00
wait4xandGLM-5.3	23303bd39a	chore(spec): 5i 勾选 T2-T5 Spec: 2026-11-02_blog-5i-fonts-polish Co-authored-by: GLM-5.3	2026-11-03 11:18:36 +08:00
wait4xandGLM-5.3	31eb44caee	fix(comments): 评论失败提示误报与瞬间评论区配色脱同步（5i T2/T3）用户实测：「评论区总是显示加载失败，但是实际上是正常显示的，另外瞬间的评论区的颜色和主题色不同步」。 T2 误报根因：软导航/二次挂载时 `#artalk-lib` 脚本标签已在 DOM，但 `window.Artalk` 尚未就绪，旧代码直接 `initArtalk()` → `!lib` 分支 `showRetry(true)` → 失败提示永久显示；随后库加载完成、评论正常渲染，提示却留在页面上。 - 脚本标签在但库未就绪 → 等它的 load 事件再 init，不再立即判失败 - 失败提示只留真失败：script.onerror，或超时且确实未挂载 - `mounting` 在所有成功/失败路径复位（旧代码失败后永真，把 IO/锚点/滚底/重试全堵死） - 成功路径清提示；三条触发路径与重试钮、astro:page-load 复核全部保留 T3 配色脱同步：18 个 `--at-color-` 映射原先只写在 `#artalk-container` 作用域，瞬间容器是 `mom-atk-<slug>` 不在其内 → 回落到 Artalk 默认白底。 - 抽成共享片段 geek/ArtalkThemeStyles.astro（两处引用，杜绝双份漂移） - 额外挖出的第 4 个坑*：Artalk init 成功会给容器加 `.artalk` 类，其 CDN 样式表里 `.artalk{--at-color-bg:#fff}` 与裸属性选择器 `[data-artalk-panel]` 同特异性且后加载 → 平级后来居上。瞬间容器选择器加 `body` 前缀 (0,1,1) 压住；文章页是 `#artalk-container`(1,0,0) 本来就压得住，所以只有瞬间翻白验证: 构建 exit 0；E2E 46/46；我独立复测—— ① 文章页挂载成功且 #artalk-retry 保持 hidden ② 连发 3 次 astro:page-load 仍不误报、仍挂载 ③ 瞬间评论区明暗两态 --at-color-bg 实测 rgb(255,255,255)/rgb(25,29,35) 分别等于 --bg，容器带 .artalk 类（说明是 init 后真态） Spec: 2026-11-02_blog-5i-fonts-polish (T2/T3) Co-authored-by: GLM-5.3	2026-11-03 11:18:35 +08:00
wait4xandGLM-5.3	5c015c6577	docs(writing): 取消彩色强调次数限制，补灯箱 caption 排版说明用户原话：「色彩强调不要设置限制，取消一页不超过三处的限制」。原「一页 ≤3 处」是文档纪律（代码层从未硬性拦截），故改动集中在文档、模板文章与后台提示： - 写作指南 / 管理台：改为「彩色不限次数」，同时明确仍守的另一条红线是外壳灰阶（导航/页脚/按钮/背景不染色）——外壳是气质，正文是表达 - 写作模板文章中英双语同步：章节改名「想用多少用多少」，删掉"三处之后不再上色" 的示范约束，表格里「一页 ≤3 处」改为「不限次数（外壳仍灰阶）」 - 顺带补灯箱 caption 文档：照片说明支持 markdown + 排版类，深底自动取暗档；以及灯箱四种关闭路径（右上 ×、Esc、点背景、1× 时点图）验证: 构建 exit 0；全仓 grep 「≤3 处/页」只剩「已取消」的历史说明 Spec: 2026-11-02_blog-5i-fonts-polish (T5) Co-authored-by: GLM-5.3	2026-11-03 11:18:14 +08:00
wait4xandGLM-5.3	138d3d976b	fix(gallery): 修灯箱右上关闭点不动，caption 支持字体与颜色用户实测：「图库中的图片点击查看之后，点击右上角的关闭无法关闭，其次就是右侧的文字是否支持字体的更换和颜色的更换」。关闭失灵的根因（生产实测取证）：桌面端信息栏 `.lb-l2` 是 top:0→bottom:0 的右侧全高侧栏（宽 200px），且 DOM 顺序在关闭钮之后；`document.elementFromPoint` 在按钮中心命中 `.lb-meta.lb-l2` —— 点击被侧栏吃掉，`lb.close()` 永不触发（实测 Playwright 点击 #lb-close 30s 超时、dialog 保持 open）。给 `#lb-close` 提层级 z-index:12 后「点击 → open=false」通过。 caption 富文本： - 照片 caption 走全站同一条管线（markdown → 内容净化三层白名单 → class 白名单），构建期预渲染成 HTML 挂在卡片的 data-caption-html 上，换图时写 innerHTML - 灯箱容器加 `.rich`，global.css 的 .rich .c-blue / .rich .font-kai 才生效（此前只有触发类名的选择器、容器无 .rich 前缀，故颜色字体都不生效） - 深底适配：灯箱内的彩色取柔和对暗底的档位；段间距收紧、首尾不撑高 - 容器由 <p> 改 <div>：caption 可含多段落，<p> 套 <p> 会被浏览器拆散验证: 构建 exit 0；生产同款探针实测关闭生效（此前超时）；注入测试 caption 后产物含 class="c-blue"（保留）、font-kai（保留）、加粗→<strong>、<script> 被净化丢弃（验收数据已还原） Spec: 2026-11-02_blog-5i-fonts-polish (T4) Co-authored-by: GLM-5.3	2026-11-03 11:18:13 +08:00
wait4xandGLM-5.3	d30b5decbb	docs(spec): Phase 5i 立项——字体加载根治与交互缺陷修复七项用户实测问题的取证结论写入 spec：字体切换失效根因是 BaseLayout 把四份字体 CSS 关在 track==='reading' 里（技术轨与全站页面从不加载）；Artalk 失败提示误报源于软导航后脚本标签存在但库未就绪即判失败；灯箱右上关闭被 .lb-meta 命中遮挡（elementFromPoint 实测）。任务拆 9 项，字族款式与书架方向待用户拍板。 Spec: 2026-11-02_blog-5i-fonts-polish Co-authored-by: GLM-5.3	2026-11-03 11:03:32 +08:00
				`@@ -0,0 +1 @@`
				<svg viewBox="-16 -32 880 192" width="880" height="192" xmlns="http://www.w3.org/2000/svg"><desc>Generated with https://github.com/Platane/snk</desc><style>:root{--cb:#1b1f230a;--cs:purple;--ce:#ebedf0;--c0:#ebedf0;--c1:#9be9a8;--c2:#40c463;--c3:#30a14e;--c4:#216e39}.c{shape-rendering:geometricPrecision;fill:var(--ce);stroke-width:1px;stroke:var(--cb);animation:none 35300ms linear infinite;width:12px;height:12px}@keyframes c0{4.52%{fill:var(--c1)}4.54%,100%{fill:var(--ce)}}.c.c0{fill:var(--c1);animation-name:c0}@keyframes c1{66.85%{fill:var(--c2)}66.87%,100%{fill:var(--ce)}}.c.c1{fill:var(--c2);animation-name:c1}@keyframes c2{3.67%{fill:var(--c1)}3.69%,100%{fill:var(--ce)}}.c.c2{fill:var(--c1);animation-name:c2}@keyframes c3{1.97%{fill:var(--c1)}1.99%,100%{fill:var(--ce)}}.c.c3{fill:var(--c1);animation-name:c3}@keyframes c4{2.82%{fill:var(--c1)}2.84%,100%{fill:var(--ce)}}.c.c4{fill:var(--c1);animation-name:c4}@keyframes c5{3.39%{fill:var(--c1)}3.41%,100%{fill:var(--ce)}}.c.c5{fill:var(--c1);animation-name:c5}@keyframes c6{2.26%{fill:var(--c1)}2.28%,100%{fill:var(--ce)}}.c.c6{fill:var(--c1);animation-name:c6}@keyframes c7{10.19%{fill:var(--c1)}10.21%,100%{fill:var(--ce)}}.c.c7{fill:var(--c1);animation-name:c7}@keyframes c8{9.06%{fill:var(--c1)}9.08%,100%{fill:var(--ce)}}.c.c8{fill:var(--c1);animation-name:c8}@keyframes c9{41.63%{fill:var(--c1)}41.65%,100%{fill:var(--ce)}}.c.c9{fill:var(--c1);animation-name:c9}@keyframes ca{12.74%{fill:var(--c1)}12.76%,100%{fill:var(--ce)}}.c.ca{fill:var(--c1);animation-name:ca}@keyframes cb{13.59%{fill:var(--c1)}13.61%,100%{fill:var(--ce)}}.c.cb{fill:var(--c1);animation-name:cb}@keyframes cc{14.15%{fill:var(--c1)}14.17%,100%{fill:var(--ce)}}.c.cc{fill:var(--c1);animation-name:cc}@keyframes cd{14.44%{fill:var(--c1)}14.46%,100%{fill:var(--ce)}}.c.cd{fill:var(--c1);animation-name:cd}@keyframes ce{21.8%{fill:var(--c1)}21.82%,100%{fill:var(--ce)}}.c.ce{fill:var(--c1);animation-name:ce}@keyframes cf{19.82%{fill:var(--c1)}19.84%,100%{fill:var(--ce)}}.c.cf{fill:var(--c1);animation-name:cf}@keyframes cg{20.67%{fill:var(--c1)}20.69%,100%{fill:var(--ce)}}.c.cg{fill:var(--c1);animation-name:cg}@keyframes ch{14.72%{fill:var(--c1)}14.74%,100%{fill:var(--ce)}}.c.ch{fill:var(--c1);animation-name:ch}@keyframes ci{21.52%{fill:var(--c1)}21.54%,100%{fill:var(--ce)}}.c.ci{fill:var(--c1);animation-name:ci}@keyframes cj{19.25%{fill:var(--c1)}19.27%,100%{fill:var(--ce)}}.c.cj{fill:var(--c1);animation-name:cj}@keyframes ck{15%{fill:var(--c1)}15.02%,100%{fill:var(--ce)}}.c.ck{fill:var(--c1);animation-name:ck}@keyframes cl{15.29%{fill:var(--c1)}15.31%,100%{fill:var(--ce)}}.c.cl{fill:var(--c1);animation-name:cl}@keyframes cm{44.18%{fill:var(--c2)}44.2%,100%{fill:var(--ce)}}.c.cm{fill:var(--c2);animation-name:cm}@keyframes cn{18.4%{fill:var(--c1)}18.42%,100%{fill:var(--ce)}}.c.cn{fill:var(--c1);animation-name:cn}@keyframes co{18.69%{fill:var(--c1)}18.71%,100%{fill:var(--ce)}}.c.co{fill:var(--c1);animation-name:co}@keyframes cp{16.14%{fill:var(--c1)}16.16%,100%{fill:var(--ce)}}.c.cp{fill:var(--c1);animation-name:cp}@keyframes cq{15.85%{fill:var(--c1)}15.87%,100%{fill:var(--ce)}}.c.cq{fill:var(--c1);animation-name:cq}@keyframes cr{23.5%{fill:var(--c1)}23.52%,100%{fill:var(--ce)}}.c.cr{fill:var(--c1);animation-name:cr}@keyframes cs{18.12%{fill:var(--c1)}18.14%,100%{fill:var(--ce)}}.c.cs{fill:var(--c1);animation-name:cs}@keyframes ct{89.79%{fill:var(--c4)}89.81%,100%{fill:var(--ce)}}.c.ct{fill:var(--c4);animation-name:ct}@keyframes cu{16.99%{fill:var(--c1)}17.01%,100%{fill:var(--ce)}}.c.cu{fill:var(--c1);animation-name:cu}@keyframes cv{76.19%{fill:var(--c4)}76.21%,100%{fill:var(--ce)}}.c.cv{fill:var(--c4);animation-name:cv}@keyframes cw{47.02%{fill:var(--c2)}47.04%,100%{fill:var(--ce)}}.c.cw{fill:var(--c2);animation-name:cw}@keyframes cx{35.4%{fill:var(--c1)}35.42%,100%{fill:var(--ce)}}.c.cx{fill:var(--c1);animation-name:cx}@keyframes cy{35.12%{fill:var(--c1)}35.14%,100%{fill:var(--ce)}}.c.cy{fill:var(--c1);animation-name:cy}@keyframes cz{26.34%{fill:var(--c1)}26.36%,100%{fill:var(--ce)}}.c.cz{fill:var(--c1);animation-name:cz}@keyframes c10{33.7%{fill:var(--c1)}33.72%,100%{fill:var(--ce)}}.c.c10{fill:var(--c1);animation-name:c10}@keyframes c11{33.98%{fill:var(--c1)}34%,100%{fill:var(--ce)}}.c.c11{fill:var(--c1);animation-name:c11}@keyframes c12{50.41%{fill:var(--c2)}50.43%,100%{fill:var(--ce)}}.c.c12{fill:var(--c2);animation-name:c12}@keyframes c13{78.46%{fill:var(--c4)}78.48%,100%{fill:var(--ce)}}.c.c13{fill:var(--c4);animation-name:c13}@keyframes c14{49.28%{fill:var(--c2)}49.3%,100%{fill:var(--ce)}}.c.c14{fill:var(--c2);animation-name:c14}@keyframes c15{27.47%{fill:var(--c1)}27.49%,100%{fill:var(--ce)}}.c.c15{fill:var(--c1);animation-name:c15}@keyframes c16{80.44%{fill:var(--c4)}80.46%,100%{fill:var(--ce)}}.c.c16{fill:var(--c4);animation-name:c16}@keyframes c17{27.75%{fill:var(--c1)}27.77%,100%{fill:var(--ce)}}.c.c17{fill:var(--c1);animation-name:c17}@keyframes c18{32.28%{fill:var(--c1)}32.3%,100%{fill:vLine truncated