Skip to content

Latest commit

 

History

History
58 lines (44 loc) · 2.2 KB

File metadata and controls

58 lines (44 loc) · 2.2 KB

设计稿 · 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.jsondocs 数组里加一条:
{
  "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 的文档会以全宽主卡展示(建议只设一篇,最新的)
  • kindspec / architecture / essaykindLabel 自由填写
  • 提交推送后 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)