41 lines
3.3 KiB
Markdown
41 lines
3.3 KiB
Markdown
# 高级感排版文档组
|
||
|
||
新增 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，不改变本站已有路由架构。
|