设计稿 · Design Docs

一个 Markdown 设计稿展示橱窗，托管于 GitHub Pages。

• 首页（#/）：橱窗 —— 设计稿卡片陈列
• 阅读页（#/doc/<slug>）：完整渲染 Markdown，含目录导航、代码高亮、Mermaid 图、阅读进度、复制按钮
• 12 套版面：右下角调色盘按钮整体切换（橱窗 + 展示同步换装），选择存入 localStorage

12 套版面

纸墨 / 深夜 / 蓝图（晒图纸网格）/ 终端（磷光绿命令行）/ 报纸（刊头 + 双栏排文）/ 杂志（黑体大标题 + 首字下沉）/ 青瓷 / 古籍（藏青泥金 + 双线框）/ 竹简（竖排标题 + 竹节纹）/ 羊皮卷（毛边）/ 赛博（霓虹辉光）/ 极简（发丝线 + 大量留白）

每套版面由 assets/css/base.css（色彩/字体令牌）、home.css（橱窗版式）、reader.css（展示版式）三段共同定义。

新增一篇设计稿

1. 把 .md 文件放进 docs/，文件名用英文 slug，例如 docs/my-new-design.md
2. 在 docs/manifest.json 的 docs 数组里加一条：

{
  "slug": "my-new-design",
  "file": "my-new-design.md",
  "title": "文档标题",
  "kind": "spec",
  "kindLabel": "技术规格",
  "description": "一句话简介，会显示在首页卡片上。",
  "date": "2026-08-13",
  "tags": ["标签一", "标签二"],
  "charCount": 12345,
  "featured": false
}

• charCount 可用 wc -m 统计（含代码块与表格符号）
• featured: true 的文档会以全宽主卡展示（建议只设一篇，最新的）
• kind 取 spec / architecture / essay，kindLabel 自由填写
• 提交推送后 GitHub Pages 自动发布

本地预览

python -m http.server 8000
# 或
npx serve

然后访问 http://localhost:8000 。（fetch 需要 HTTP 环境，直接双击 index.html 无法加载文档。）

目录结构

index.html            站点入口（hash 路由单页）
404.html              未匹配路径跳回首页
docs/                 Markdown 设计稿 + manifest.json
assets/css/           base（12 套版面令牌）/ home（橱窗版式）/ reader（展示版式）
assets/js/            站点逻辑 + vendored 库（marked / highlight.js / mermaid）