Files
blog/.spec/specs/2026-11-04_blog-5k-about-designs/spec.md
T
wait4xandGLM-5.3 b41b4ba8a5 feat(about): 关于页五方案预览上线(5k T1)
用户要求关于页「深入探索和设计提出 3-5 个方案,并设计出页面供我审阅」。五案共用
about.yaml 真实数据(选哪个都不用迁移内容):

A 白纸单栏:后台就是一个 markdown 编辑器,身份卡 + 单栏全文连排——编辑自由度最大
B 名片双栏:左侧 sticky 身份名片,右侧正文分节——个人站经典形态
C 杂志分节:大字引言 + 编号分节(01 关于我 / 02 兴趣版图 / 03 找到我 / 04 本站构建)
  + 右侧粘性目录跟随滚动
D 时间线:把"我是谁"讲成轨迹(起点气象 → 第二主线代码 → 作品 → 信条),沿线节点
E 卡片流:身份卡打头,正文/兴趣/链接/构建各占一张卡片,两列错落

content-lint 白名单加一次性预览路由(无 en 对应页)。

验证: 构建 53 页 exit 0;content-lint 53 页 0/0/0;
      Playwright 实测五案均渲染(3 枚图标 svg / IdCard / 9 条找得到我链接)、
      1280 与 390 零横向溢出

Spec: 2026-11-04_blog-5k-about-designs (T1)

Co-authored-by: GLM-5.3
2026-11-04 23:10:55 +08:00

3.3 KiB
Raw Blame History

Phase 5k:关于页形态探索(5 案预览 + 选型落地)- 项目范围

1. 问题定义

  • 项目目标:关于页从「blocks 块式结构」走向更自由的形态——给出 5 个完整设计(含"纯 markdown 单字段直编"这一极简形态),做成一页预览供用户点选;选定后把选中方案落进正式 /about。
  • 目标用户:站长(编辑自由度 vs 结构化表达的取舍)与读者(关于页的阅读体验)
  • 核心价值:关于页是"讲人"的页面,形态应该跟着内容气质走,而不是被固定结构绑住

2. 假设与待确认

2.1 已确认事实

  • 现状 = 5i 定稿的三层排版 + blocks 九类区块驱动(prose/tracks/linklist),内容:身份语(汇文+红)、兴趣版图三卡、关于我、找到我(linklist 5 条)、本站如何构建
  • 用户在 5j 包中确认:关于页形态探索拆出独立包,含"纯 markdown 直编"方案

2.2 关键假设

  • 五案共用同一份数据(about.yaml blocks),只是"结构与视觉"不同——切换成本=零内容迁移

2.3 待确认问题

  • 五案选型(用户在 /about-preview/ 点选)

2.4 可选解释与取舍

  • 选定方案若为"纯 markdown 直编",blocks 保留为高级通道(后台仍可切回)

2.5 已证伪路径

  • 无(本包是设计探索包)

3. 功能范围

3.1 核心功能(MVP)

  • T1 预览页:/about-preview/ 五案并陈(A 白纸单栏 / B 名片双栏 / C 杂志分节带目录 / D 时间线主导 / E 卡片流),共享 about.yaml 真实数据
  • T2 用户选型后落地正式 /about 并删除预览路由

3.2 扩展功能

  • 无

3.3 不在范围内

  • 关于页内容改写(内容是用户的)、后台表单重构

4. 最小实现路径

  • 最简可行:预览页一次性路由 + 共用数据渲染五案;落地只搬选中方案的模板
  • 暂不引入:新的后台字段(选 A 则零新字段;其它案沿用现有 blocks 字段)

5. 技术决策

  • 技术栈:Astro 7.4.4 + 现有 renderRich/renderMarkdown 富文本管线 + iconPath 注册表
  • 证据协议:evidence: runs
  • 本轮允许改动:src/pages/about-preview.astro(新,一次性)、src/components/pages/AboutPage.astro、content/site/about.yaml、scripts/build-perf/content-lint.mjs(预览路由白名单)、src/i18n/ui.ts
  • 本轮不应触碰:BaseLayout、全局样式、其它页面
  • Git integration branch:spec/2026-11-04_blog-5k-about-designs

5.1 验证策略

  • 范围级别:package
  • 变更对象:关于页渲染通道(纯前端结构)
  • 快速检查:pnpm astro build + python3 scripts/build-perf/config-check.py .
  • 集成检查:E2E 56 项 + content-lint 0/0/0
  • 全项目检查:生产预览页五案可达、选中案落地后 /about 渲染正确
  • 升级触发:关于页为独立页面且不动全局样式,升级为「该页视觉复核」即可

6. 成功标准与验证方式

  • 预览页五案可达且共用真实数据 -> verify: task_0001
  • 用户选定方案落地正式 /about,预览路由删除 -> verify: task_0002(manual: 需用户点选,落地后人工核验)

7. 风险与约束

  • 灰阶骨架红线、双语红线不变
  • 预览路由一次性:用户选定后必须删除(含 lint 白名单)