它不是一个知识库网站
这个站点的 Lab 里有一份"活体档案"（Living Archive）——纯静态的纸墨风档案站，入口在 /archive/。它不是一个知识库网站，它的数据来自我真实的知识库（claude-obsidian，Karpathy LLM Wiki 模式，257 篇笔记，六个卷宗），只精选 20 篇接入。
这篇文章讲的是这座档案站怎么来的：数据怎么从 Obsidian 变成档案，纸墨设计语言是怎么定下来的，以及它踩过的坑。
数据层：vault-pick.mjs
知识库的笔记不是 JSON——是 markdown + frontmatter（title/created/updated/type/status/tags/confidence/related）。转换脚本 scripts/vault-pick.mjs 做三件事：
1. 精选清单。不是全库导入，是 20 篇手选（CURATED 数组，相对 wiki/ 的路径）。为什么只选 20 篇？因为档案站的价值不在全量，在于每一条都有来路。全库是资料库，精选才是档案。以后加条目就是往清单里加一行路径。
2. frontmatter 映射。每条档案的 schema 与笔记 frontmatter 一一对应：
no KB-0001 编目号（精选顺序）
vol 顶层目录 项目/知识库/设计哲学/重要问题/人物/日记
type frontmatter.type → 中文（概念/计划/决策/教训/博客…）
status developing/mature/archived → 生长中/已定稿/已归档
date created；updated 最近更新
tags frontmatter tags（前 4 个）
confidence 置信度 ★1-3
excerpt 正文第一段（截断）
body 正文前 3 段（剥离 markdown）
notes 正文中的 > 引用行
related 精选集内的 [[wikilink]] 映射到编号
3. 关联映射。原笔记里的 wikilink 只映射精选集内的目标——链接到"外面"的笔记就断开，宁缺毋滥。related 是双向的：映射到的条目也会反向指回来。这张关联表就是首页知识图谱的边。
设计语言：纸墨档案
设计的主题词是"纸墨"：宣纸底（OKLCH 0.955 0.014 85）、墨黑文字、朱砂强调、松烟绿和黛青做装饰。字体三件套：Fraunces（西文展示）+ Noto Serif SC（中文正文）+ IBM Plex Mono（档案编号），全是 serif——档案不应该是无衬线的现代感，它应该是活字印刷的味道。
三个值得一提的实现：
CSS 3D 层叠卡。首页 hero 是一摞档案卡（web3d-pro-max 的 css-3d adapter 思路）：四张深墨色卡片带 transform-origin: 50% 100%，hover 时沿 Z 轴弹起，--ease-out-expo 缓动，settle 入场动画带 stagger。零 JS——纯 CSS 3D，prefers-reduced-motion 全面降级。
canvas 知识图谱（graph-2d.js）。20 篇笔记 + 高频标签画成一张关系网：墨点=笔记、空心圈=标签、朱砂虚线=直接关联，按类型着色（项目朱砂/概念黛青/笔记松烟绿/决策深朱砂/人-我墨黑）。自绘物理布局（斥力 + 弹簧），拖拽/缩放/点击出详情 tip，IntersectionObserver 触发入场，冷却后停止 RAF——不空转。
拼音检索。pinyin-pro 做全库检索（"jieshao" 能搜到"介绍"），脚本缺失时自动降级原文搜索——降级路径在代码里写死，不是靠 try-catch 碰运气。
页面结构
- index.html：hero 层叠卡 → 新近入档 → 全部索引墙（按卷宗分格）→ 关系图谱 → 生长记录（
updated ≠ created的近期更新自动派生）→ 页脚 - record.html：
?id=KB-000N单条详情，左侧时间线 rail（滚动填充），首字下沉，朱砂引线呈现引用，5 星 + 读者留言区（连 blog 的/api/guestbook） - volumes.html：六卷宗导航（罗马数字编号 Ⅰ-Ⅵ），按顶层目录聚合状态
- about.html：档案 schema 与规则——"只收活档案""引用原样保留""关联是双向的"
- admin.html：留言看板（Bearer token 保护，DELETE 管理）
数据层、展示层、管理层的分界很清楚：records.js 是唯一的真源（脚本生成），页面全部从 window.ARCHIVE_DATA 渲染——换数据不需要碰 HTML。
踩过的坑
这个站踩过一个真实可笑的坑：首页引用了 graph-2d.js，但把它同步进 blog 时漏拷了。结果首页其他功能全正常（script 404 不阻塞主线程），只有关系图谱区域白屏 + console 一个 404。肉眼不仔细看发现不了——图谱本来就是"慢慢渲染"的，白屏和加载慢长得一模一样。修好后这成了一个教训：静态站的资源完整性要用脚本校验（引用清单 × 实际文件差集），而不是靠肉眼。
另一个坑是数据不一致：meta description 写着"共 1,284 条"，实际精选 20 条——数字是早期全库规模的残留。文案和数据脱节，比没有文案更伤人。还有 pinyin-pro.min.js 在同步时拷了两份（根目录 + assets/，md5 相同），467k 白白进 git。同步脚本的幂等性，是这类静态站最容易忽略的事。
后续
档案站目前的 20 条记录里，有 9 条已经随项目进展更新过（Harness 完成、Orcana 更名、PersonalMind 真实进度……）——更新的方式是直接改 records.js，因为源 vault 笔记的更新节奏和 blog 不一致。等源笔记跟上了，再走 vault-pick.mjs 重新生成。
"活体档案"这个名字的意思是：档案不是被保存的东西，而是仍然活着的事物——被阅读、被补注、被重新装订，每条都有一条来路，和一个还没写完的去向。