feat(typography): 全站三层排版——富文本/页面级覆盖/艺术字体类
- 层 1 所有页面文案改富文本:site-content 新增 renderRich(md,{inline})
复用既有全管线(raw→内容净化→class 白名单→链接卡片);接入
home.tagline/subtitle、opensource.blurb、about.intro、blocks prose;
新增 .rich 容器作用域并与 .prose-body 合并(77 处选择器覆盖四类容器)
坑:renderRich 输出 <p> 塞进 <p class="tagline"> 会被浏览器拆散 →
行内场景用 {inline:true} 剥外层 <p>
- 层 2 页面级排版覆盖:三单例加 typography{font?,accent?,scale?},读取器
pageTypography() 走白名单(10 字族 / 18 色类,scale 夹 0.8–1.25,清单外
忽略);页面容器挂 .page-typo + CSS 变量 --page-font/--page-accent/
--page-scale,不动全站 tokens;后台三页加「页面排版覆盖」下拉
- 层 3 艺术字体:新增 font-art-kuaile(快乐体专用类,字距微调),白名单与
可视化面板同步;站酷高端黑/阿里妈妈东方大楷/演示悠然小楷因无 npm 包或
嵌入条款风险进候补清单
- 默认值清理:about.yaml 的 typography 测试值(整页汇文)清为注释示例——
整页换字族会带来 694KB 字体成本,默认留空=全站默认排版
验证: 构建 48 页 exit 0;E2E 37/37;三页 page-typo 挂载与变量实测、四页
(图库/书架/文章/装备)隔离为 0、font-art-kuaile 生效、about 清空后
无覆盖
Spec: none (排版三层,先于 5g 的任务;T3/T4 另行交付)
Co-authored-by: GLM-5.3
This commit is contained in:
1 parent
2f7cbcf7bd
commit
aaa9cd9274
10 files changed
+136
-48
No files matched your search
@@ -185,6 +185,32 @@ https://astro.build/
|
||||
后台编辑器里:**选中文字 → Insert 菜单 → 「排版(字体/颜色)」→ 面板里点一个类**,文字即被 `<span class="…">` 包住;点已套用的片段可改类,Backspace 可整体删除。
|
||||
面板里的两类与上表一一对应(字体 8 / 颜色 9),类清单单一事实源在 `public/admin/typography-classes.js`。
|
||||
|
||||
## 三层排版架构(全站,不只文章正文)
|
||||
|
||||
**层 1 · 页面文案富文本**:后台「页面文案」里的 tagline / subtitle / blurb / blurb_after / intro / 关于页 blocks 的 prose 块,全部走同一条富文本管线(markdown + raw + 内容净化 + class 白名单 + 链接卡片)。可以直接写:
|
||||
|
||||
```yaml
|
||||
tagline:
|
||||
zh: '<span class="font-kai c-blue">写作者</span> · 读者 · 快门按压者,拥抱开源。'
|
||||
```
|
||||
|
||||
渲染入口唯一:`src/lib/site-content.ts` 的 `renderRich()`(行内场景传 `{ inline: true }` 自动剥外层 `<p>`,否则 `<p>` 套 `<p>` 会被浏览器拆散)。
|
||||
**不开放**:导航/页脚/按钮等硬编码界面外壳——那是 UI 不是内容。
|
||||
|
||||
**层 2 · 页面级排版覆盖**:每个页面单例(`content/site/*.yaml`)可加:
|
||||
|
||||
```yaml
|
||||
typography:
|
||||
font: font-kai # 本页正文默认字体类(可选)
|
||||
accent: c-blue # 本页强调色类(可选)
|
||||
scale: 1.1 # 字号缩放 0.8–1.25(可选)
|
||||
```
|
||||
|
||||
实现是在该页内容容器上挂 `.page-typo` + CSS 变量(`--page-font / --page-accent / --page-scale`),**不写全站 tokens**——其它页面零影响(已在图库/书架/文章/装备页验证隔离)。白名单外的类名会被忽略。
|
||||
后台入口:「页面文案 → 各自页面 → 页面排版覆盖」。
|
||||
|
||||
**层 3 · 艺术字体**:`font-art-kuaile`(站酷快乐体,艺术字专用类)。⚠️ **仅用于标题/短句**:艺术字字形大,CJK 切片体积高(实测用到页 +163KB),长段使用会显著抬高单页字体成本。
|
||||
|
||||
## 发布提醒
|
||||
|
||||
- push main → webhook 自动构建发布(约 10 秒)
|
||||
|
||||
Reference in new issue
Block a user