SERIES · 11 章 · 2026/10/01
墨栈源码详解
从目录到实现的系列小册
对着仓库讲清架构、目录与关键实现，并覆盖散篇与系列两套内容形态：索引如何扫盘、章节页三栏如何组装、进度键如何隔离。读完应能独立改散篇、加小册、定位该打开的文件。
从第一章开始 →目录 CONTENTS
- 01开篇：这本小册写什么说明阅读目标、项目定位、技术底座，以及 React 服务端组件如何成为整站架构的主轴；并交代散篇与系列两套内容形态。
- 02架构分层与目录设计单向依赖怎么切、构建期与浏览器各干什么、散篇与系列的调用顺序，以及 content/posts 与 content/series 为何并列。
- 03文章索引：lib/posts.ts散篇笔记如何扫盘、过滤、估读、抽目录、编刊号，以及列表页为何只拿元数据不拿正文。
- 04系列小册：内容模型与版块设计content/series 怎么组织、lib/series 与 series-path 如何分工、进度键如何避免与散篇冲突，以及章节页三栏布局的组件拆分。
- 05MDX 编译链与代码围栏从 MdxContent、rehype 合并高亮，到 Prism 语言表与站点日期常量——散篇与系列章节共用的服务端正文管线。
- 06rehype 源码：代码组合并与离线高亮逐段拆解 rehypeCodeGroups 与 rehypePrism：meta 语法、同层扫描合并、data-files 双轨契约，以及 Prism HTML 写回 HAST 的完整路径。
- 07扩展：把 rehypeCodeGroups 跑一遍从一份最简 MDX 出发，摊开进入插件时的 HAST 全树，再按 i、k、out 把 rehypeCodeGroups 逐步执行完。不含 Prism。
- 08页面与路由：app/根布局、首页、散篇与标签页，以及系列三层路由、章节页三栏阅读台与 sticky 侧栏约定。
- 09代码块与 MDX 组件mdx.tsx 如何映射标签，以及 code-block.tsx 如何做多文件 Tab、复制与沙箱预览。
- 10阅读进度子系统Zustand 存什么、顶栏阻尼进度条、ArticleShell、侧栏折线目录，以及系列进度键与 ReadingChip / 横向章节条。
- 11站点壳、样式与改码地图页眉页脚、分域样式、客户端边界注意点，以及按目标打开文件的完整对照表。