- 层 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
51 lines
3.5 KiB
JavaScript
51 lines
3.5 KiB
JavaScript
/**
|
||
* 排版类清单 —— 单一事实源(后台编辑器面板与文档共用)。
|
||
* 与 src/styles/global.css 的「受限排版类/语义色板」段、src/lib/rehype-class-whitelist.ts 的白名单三处保持一致:
|
||
* 加类时三处同改,否则构建期白名单会把新类剥掉。
|
||
*
|
||
* swatch / family 仅供**后台面板预览**使用(后台无站点 CSS 变量,故给具体值):
|
||
* swatch 取亮态值(后台是浅色 UI),family 为该类的真实字体栈。
|
||
*/
|
||
window.TYPOGRAPHY_CLASSES = {
|
||
font: [
|
||
{ cls: 'font-serif', label: '思源宋(书评正文)', family: '"Noto Serif SC", Georgia, serif', kind: '自托管' },
|
||
{ cls: 'font-kai', label: '霞鹜文楷(金句)', family: '"LXGW WenKai Screen", "Songti SC", serif', kind: '自托管' },
|
||
{ cls: 'font-sans', label: '思源黑(UI/技术)', family: '"Noto Sans SC", system-ui, sans-serif', kind: '自托管' },
|
||
{ cls: 'font-mono', label: 'JetBrains Mono(等宽)', family: '"JetBrains Mono", ui-monospace, monospace', kind: '自托管' },
|
||
{ cls: 'font-song', label: '宋体族', family: '"Noto Serif SC", "Songti SC", SimSun, serif', kind: '自托管优先' },
|
||
{ cls: 'font-kai-sys', label: '楷体族', family: '"LXGW WenKai Screen", "Kaiti SC", STKaiti, serif', kind: '自托管优先' },
|
||
{ cls: 'font-hei-sys', label: '黑体族', family: '"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif', kind: '自托管优先' },
|
||
{ cls: 'font-fangsong', label: '仿宋族', family: 'FangSong, STFangsong, serif', kind: '系统回退' },
|
||
{ cls: 'font-huiwen', label: '汇文明朝体', family: '"WF-Hwmc", serif', kind: '自托管' },
|
||
{ cls: 'font-kuaile', label: '站酷快乐体', family: '"ZCOOL KuaiLe", serif', kind: '自托管' },
|
||
{ cls: 'font-art-kuaile', label: '快乐体(艺术·仅标题)', family: '"ZCOOL KuaiLe", serif', kind: '艺术字' },
|
||
],
|
||
color: [
|
||
{ cls: 'ink-1', label: '最重(标题级)', swatch: '#111113' },
|
||
{ cls: 'ink-2', label: '正文', swatch: '#33343a' },
|
||
{ cls: 'ink-3', label: '次要(日期/元信息)', swatch: '#6b6e78' },
|
||
{ cls: 'ink-muted', label: '最淡(注释感)', swatch: '#70747c' },
|
||
{ cls: 'ink-warm', label: '暖调正文', swatch: '#3f362e' },
|
||
{ cls: 'ink-cool', label: '冷调正文', swatch: '#2f3742' },
|
||
{ cls: 'ink-faint', label: '最淡可读档', swatch: '#70747c' },
|
||
{ cls: 'ink-accent', label: '强调(链接色)', swatch: '#3454d1' },
|
||
{ cls: 'ink-accent-soft', label: '弱强调', swatch: '#4f66c2' },
|
||
{ cls: 'c-blue', label: '蓝', swatch: '#2456c9' },
|
||
{ cls: 'c-blue-soft', label: '蓝(soft)', swatch: '#4170dd' },
|
||
{ cls: 'c-teal', label: '青', swatch: '#0d7d74' },
|
||
{ cls: 'c-teal-soft', label: '青(soft)', swatch: '#0e847a' },
|
||
{ cls: 'c-green', label: '绿', swatch: '#1f7a3a' },
|
||
{ cls: 'c-green-soft', label: '绿(soft)', swatch: '#22853f' },
|
||
{ cls: 'c-yellow', label: '黄(已压暗)', swatch: '#7a5900' },
|
||
{ cls: 'c-yellow-soft', label: '黄(soft)', swatch: '#926a00' },
|
||
{ cls: 'c-orange', label: '橙', swatch: '#9a4a00' },
|
||
{ cls: 'c-orange-soft', label: '橙(soft)', swatch: '#ba5900' },
|
||
{ cls: 'c-red', label: '红', swatch: '#b32020' },
|
||
{ cls: 'c-red-soft', label: '红(soft)', swatch: '#db3737' },
|
||
{ cls: 'c-pink', label: '粉', swatch: '#a3246a' },
|
||
{ cls: 'c-pink-soft', label: '粉(soft)', swatch: '#ce3386' },
|
||
{ cls: 'c-purple', label: '紫', swatch: '#6a35b8' },
|
||
{ cls: 'c-purple-soft', label: '紫(soft)', swatch: '#8c5ed1' },
|
||
],
|
||
};
|