probably-rendering-one-more-pixel-tonight/docs/premium-layouts.md

高级感排版文档组

新增 13 篇指导 post：一篇设计 Router 与 12 篇构图配方。通过已有指导文档注册表进入首页、分类与独立详情；每篇共用相同 ID 的网页和 ?agent_mode=True 纯文本，不另外复制数据库 post。

文件与目的

• apps/wiki/src/content/layouts/recipes.json：12 套构图的适用条件、几何参数、步骤、独立 CSS/HTML、验收条件及封面结构图形。
• apps/wiki/src/content/layouts/documents.ts：Router、输入/输出协议、调度选择器、字体与图片策略、阅读模式、公共 CSS，以及逐篇生成完整 HTML、支持属性的 React TSX 与 Next.js App Router 接入代码。
• apps/wiki/src/content/skills/guidance.ts：将 13 篇内容接入既有全局文档注册表，并排在首页前部；沿用分类、正文与反向引用机制。
• apps/wiki/src/content/page-ids.json：为 13 篇文档持久保存独立 ID，标题与排序变化不改变地址。
• apps/wiki/scripts/generate-layout-recipes.ts：重新生成独立 HTML 演示和 PNG 结构封面，无第三方素材和浏览器依赖。
• apps/wiki/public/layout-recipes/router.png：12 套构图的总览封面。
• docs/premium-layouts.md：内容入口、文件职责、重建与验证说明（本文）。

以下每个文件基名各对应 .html 与 .png 两个文件，全部位于 apps/wiki/public/layout-recipes/。HTML 为实际可运行示例；PNG 是独立绘制的结构示意，明确标注并非代码截图。

文件基名	构图与目的
offset-panels	错位双矩形：两张主图的主次与边缘对齐
vertical-rail	窄轨竖排：短中文标题与主图并列
monumental-type	巨字与裁切：通过装饰英文建立宣言重心
orbital-rings	同心圆与轨道：表达周期与时间
organic-ellipse	有机椭圆与弧面：柔和品牌的出血曲线
modular-grid	模块网格与索引：六项内容的秩序
editorial-serif	衬线刊头与杂志栏：文化导读的刊头与边栏
horizontal-band	横向色带与断层：章节之间的视觉停顿
diagonal-cards	轻斜卡片与拼贴：实验记录的纸张层次
annotation-lines	细线标注与技术图录：对象与短标注的对应关系
split-contrast	双区对照与大留白：上下两种观点的对照
type-frame	四角字框与中心场：语义标题与装饰副本分离

重建与验证

从 apps/wiki 目录执行 node --import tsx scripts/generate-layout-recipes.ts。既有文档与 explore 测试覆盖所有新增 ID、全局引用、Markdown 与资源计数。使用 tsc 检查内容生成器；用 esbuild 逐篇编译文档中的 React、Next.js 与 CSS，并通过 React 服务端渲染验证标题与说明属性。

只在生产服务器验收页面，不启动本地网页预览。推送后等待 ces-control CI 完成生产构建和集成检查，再检查实际首页、排版分类、Router、子文档、纯文本和独立 HTML。

边界

这是一组可复用的设计教学文档，不是将参考图逐格临摹成商业模板。示例使用系统字体与占位色块；真实标题、字体、照片和移动端阅读模式必须按最终内容重新检查。文档中的 Next.js 示例面向 App Router，不改变本站已有路由架构。