Design

状态：生效中
最后更新：2026-09-04
适用范围：Blue Note 的首页、文章页、Gallery、归档、搜索、About、私密文章及后续新增页面

本文是 Blue Note 视觉、排版与页面组件的主要设计规范。涉及网页外观的新增或修改必须遵守本文；若实现与本文不一致，应先更新规范并说明理由，再修改代码。发布流程见 docs/PUBLISHING.md，作者文字的硬性边界同时受根目录 AGENTS.md 约束。

文中的“必须”“不得”是硬性规则；“应”是默认选择，只有明确理由才能偏离；“可以”表示允许但不要求。

1. 设计目标

Blue Note 是以文字为中心的个人笔记站。视觉应当安静、克制、清晰，有纸张与编辑出版物的质感，但不模仿纸媒装饰。

按优先级排序：

  1. 尊重作者原文与原有语义；
  2. 保证长文阅读舒适；
  3. 保持中文、英文、数字和公式协调；
  4. 让同类内容始终使用同一种视觉语言；
  5. 装饰只用于澄清结构，不用于制造原文不存在的层级。

任何“更醒目”“更丰富”“更像杂志”的处理，如果会改变原文的语气、停顿或结构，都不得采用。

2. 色彩系统

2.1 文章与列表页：浅色

角色 当前值 用途
纸张背景 #eee9df 页面主背景；避免纯白
主文字 #3e3a34 正文与常规信息
标题文字 #2d2b27 页面标题与真正的正文标题
次要文字 #777168 日期、注释、辅助说明
链接 #637583 正文链接
链接悬停 #435d70 hover 与 focus 状态
分隔线 rgba(62, 58, 52, 0.16) 边框、横线、列表分隔
页眉蓝灰 #53616b 导航与文章页页眉
页眉文字 #f4f1eb 页眉标题
克制金色 #f3dca6 仅用于导航悬停等极少量反馈

2.2 文章与列表页：深色

角色 当前值 用途
页面背景 #302f2d 深色阅读背景；避免纯黑
页眉背景 #282a2b 导航与页眉
主文字 #d8d4cc 正文
通用文字 #dedad2 页面信息
标题文字 #e8e3da 标题
次要文字 #aaa59d 日期、注释、辅助说明
链接 #b8c0c5 正文链接
链接悬停 #d0d5d8 hover 与 focus 状态
分隔线 rgba(222, 218, 210, 0.16) 边框与横线

2.3 首页

首页可以比文章页更具影像感，但必须保持深蓝、低饱和的基调。

角色 当前值
首页底色 #061521
卡片底色 #091821
卡片悬停 #0d202b
卡片标题 #e9e8e2
卡片摘要 rgba(220, 221, 216, 0.72)
首页导航 #2f4154（深色模式 #1f3144）
首页标语 #ffffff（深色模式 #d0d0d0）

2.4 用色规则

  • 文章页不得使用纯白背景、纯黑正文、高饱和色块或彩色渐变。
  • 金色只作为极少量交互反馈，不用于正文强调、边框或大面积装饰。
  • 普通内容框使用既有蓝灰透明底色，不为单篇文章另造新颜色。
  • 新增颜色必须先对应到明确的语义角色，并同时定义浅色和深色表现。
  • 普通文字与背景的对比度应至少达到 WCAG AA 的 4.5:1；大字和非文字控件至少 3:1。
  • 不得只靠颜色表达状态；同时使用文字、边线或其他可感知线索。

3. 字体与字号

3.1 正文字体栈

面向读者的编辑式页面统一使用以下顺序：

font-family: Charter, Georgia, "Times New Roman",
  "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", STSong, serif;

浏览器按字符选择字形：

  • 英文和阿拉伯数字优先使用 Charter；没有 Charter 时依次回退到 Georgia、Times New Roman；
  • 中文优先使用 Songti SC，其他平台回退到思源/Noto 宋体或系统衬线字体；
  • 英文斜体使用字体自带 italic，不用人工倾斜模拟；
  • 中文、英文和普通数字共享同一基线与 CSS 字号，不得为“看起来齐”而单独使用 vertical-align、相对定位或缩放；
  • TA、AI、GDP 等缩写按普通正文呈现，不设小型大写，不单独缩小或加字距。

3.2 字号等级

根字号以 16px 为换算基准。

内容 桌面 移动端 行距
正文中文 1.0625rem（17px） 1.0625rem（17px） 1.78
正文英文 1em，继承正文 1em，继承正文 继承正文
正文数字 1em，继承正文 1em，继承正文 继承正文
文章页标题 clamp(1.72rem, 2.15vw, 2.05rem) 1.5rem 1.25
列表标题 1rem 1rem 随列表行
日期与元信息 0.8rem 0.8rem 默认
注释/图注 0.8–0.88rem 不低于 0.8rem 1.55–1.65
行内公式 1em 1em 随正文
独立公式 1.28rem 1.05rem 1.35
公式上标 父级的 0.62em 同左 —

规则：

  • 普通英文、数字、缩写不得另设字号。
  • 数字只有在表格、日期列表等需要纵向对齐时才使用 tabular-nums；正文数字使用正常比例数字。
  • 加粗用于原文明确的强调或真实标题，不用作装饰。
  • 英文术语可以按原文使用 italic；不得因为它是英文而自动斜体。
  • 正文移动端不得为了容纳更多内容而缩至 16px 以下。

4. 行距、行宽与段落节奏

4.1 正文行宽

  • 普通文章的目标视觉行宽为约 38rem，即通常每行约 34–40 个汉字；可接受范围为 36–42rem。当前实现为固定的 39.667rem（634px），不随视口变宽而拉宽。

  • 同一篇普通文章中的段落、标题、列表与行内公式必须共享同一文字列，不得给个别段落任意缩窄、居中或加宽。

  • 页眉文字容器和普通列表页最大宽度为 760px，与文章的整体编辑式网格对齐。

  • 独立 Gallery 的图片区最大为 1160px；《秋之纽约_2023.11》作为含多张照片的普通博客特例，保持既有 1080px 图片区，导语仍回到普通 760px 内容列。

  • 超宽图片、表格或代码可以暂时突破正文行宽；前后正文必须恢复到统一文字列。

  • 摄影文章由 Front Matter 的 photo_layout: true 明确选择，不按图片数量推断；普通长文即使包含多张图，也保持统一正文列、已有目录与作者提供的图注。

4.2 行距与段距

  • 正文行距统一为 1.78，约 30px；不得逐段调整。
  • 普通段落下间距为 1.15em。
  • 题材转换需要更明显停顿时，可以使用规范横线或约两行的额外留白；不得把下一句改成标题来制造停顿。
  • 页面标题行距为 1.25；卡片摘要为 1.55；注释为 1.55–1.65。
  • 诗歌、歌词或刻意保留换行的文本可以使用 1.9–2.05，但不得改动原稿换行。

4.3 间距尺度

新增布局优先从以下尺度取值，避免出现大量彼此接近但不相同的数字：

0.25rem · 0.5rem · 0.75rem · 1rem · 1.5rem · 2rem · 2.5rem · 3.5rem

小误差可以为适配既有组件保留；新组件不得无理由另建尺度。

5. 原文与页面层级

原稿是标题、措辞、顺序、分段、括号、重复、枚举和修辞停顿的唯一权威。

未经作者明确要求，不得：

  • 改写、缩写、扩写或事实核查后直接改正文；
  • 自拟标题、副标题、摘要、图注、脚注、参考资料或延伸阅读；
  • 把“关于……。”一类完整正文句子改成标题；
  • 把行内的 a、b、c、d 或其他枚举拆成列表；
  • 把一句话抽成题记、引语、卡片或大字；
  • 添加目录，或仅为视觉层级而新增标题；
  • 改变括号内容的位置或把括号内容移出正文。

可以不经额外确认处理的内容仅限：明确错字、机械性的中英文空格与标点、忠实的公式排版，以及作者已经明确要求的视觉调整。如果事实或措辞有疑问，保留原文并向作者提出。

视觉层级必须来自原稿已有语义。无法判断时，默认使用普通段落。

6. 方框与特殊内容块

6.1 何时可以使用方框

只有内容本身是一个独立对象，而不是普通段落时，才可以使用方框。常见允许情形：

  • 一组需要整体阅读的公式或推演关系；
  • 原稿明确标示为题记、引文、信号、定义或独立材料；
  • 必须与正文区分的技术状态，例如私密文章解锁后的特殊原始块；
  • 作者明确要求装框的内容。

以下情况不得使用方框：

  • 普通开头、导语或结尾；
  • 仅仅“比较重要”或“写得漂亮”的一句话；
  • 普通话题转换；
  • “关于……。”这样的正文起句；
  • 为填补页面空白或增加视觉变化；
  • 原文没有独立语义、但排版者想替作者总结的内容。

如果是否独立存在歧义，默认不使用方框。

6.2 通用方框

所有普通内容框必须使用 .literary-panel。视觉权威是《Z.A.T.O. 随想》的首个方框。

max-width: 48rem;
margin: 0 auto 2.5rem;
padding: 1.75rem 1.65rem 1.6rem;
background: rgba(99, 117, 131, 0.08);
border: 1px solid var(--line);
border-radius: 0;
box-shadow: none;

移动端内边距为：上 1.45rem、左右 1.1rem、下 1.35rem。

文章专属类可以控制框内的公式排列、对齐和换行，但不得重新定义方框的宽度、底色、边线、圆角、阴影和外部间距。不得出现“首个框一种样式、后续框另一种样式”的情况。

方框不得自行增加可见标题或说明；只有原稿提供时才能显示。为无障碍添加的 aria-label 可以不显示，但必须准确描述内容。

6.3 横线

  • 普通主题转换优先使用留白；作者希望更明确分隔时，可以使用左对齐的 4rem × 1px 短横线。
  • 主题分隔线的标准间距是上 3.6rem、下 2rem，颜色使用 --line。
  • 横线不能把下一段暗示成标题，也不能在每个普通段落之间重复使用。
  • 诗歌等独立结构可以使用贯穿内容块的上下边线，但不使用完整方框。

7. 公式、英文与数字

  • 简短公式留在句内，字号与正文一致；变量使用数学斜体，上标使用规范的 sup。
  • 两个以上需要比较或连贯推演的公式可以放入 .literary-panel，内部使用文章专属布局类。
  • 公式统一使用 Times, "Times New Roman", Georgia, serif，这是数学排版例外，不扩散到普通正文。
  • 不把正文中的普通数字改成公式，也不为单个数字建立独立卡片。
  • 数学框的目的必须是展示关系，不是把数字做大。
  • 英文术语、缩写和数字在普通正文中遵守第 3 节，不单独抬高、缩小或加宽字距。

8. 图片与图集

  • 普通文章图片默认不超过正文区域的 90%，居中展示，保留自然比例。
  • 独立 Gallery 可以使用更宽的图片区；文章中不得因此把普通导语也拉宽。
  • 图片圆角应为 0–4px，默认无阴影；不得使用厚边框、悬浮卡片或装饰性滤镜。
  • 有意义的图片必须有准确、简短的替代文字。
  • 图注只有原稿提供或作者明确要求时才显示，不根据图片内容自行撰写。
  • 首页封面可以使用低对比度遮罩；文章正文图片不叠加渐变文字层。

8.1 图片交付

  • 正文展示图片必须由 Blue Note 自身托管，不直接热链第三方图床；外部服务可以作为原图传递渠道，但不能成为线上文章的单点依赖。
  • 摄影作品默认使用 sRGB 渐进式 JPEG。透明图形、界面截图或线条图才考虑 PNG；只有同时提供可靠回退时才使用 AVIF 或 WebP。
  • 图集必须保留一份与作者交付图相同像素尺寸、宽高比和完整画面边界的高清主文件；不得裁切、拉伸、改变构图或擅自降低主文件分辨率。
  • 图集照片另行生成长边 800px、1600px 和 2880px 三档预览。浏览器通过 srcset 按屏幕选择，不让手机下载不必要的原始大图；点击放大时使用高清主文件。
  • 首图优先加载，其余图片原生懒加载；所有图片写入固有宽高，避免载入时页面跳动。
  • 发布文件删除定位、拍摄时间等 EXIF 元数据并保留 sRGB 色彩描述；此操作不得重新取景或有损缩小高清主文件。作者仍应在自己的照片库或备份中保留原始交付文件。
  • 清晰度优先于文件体积。若一组图的预计存储或访问负担接近平台限制，应先向作者说明具体体积、访问量假设和替代方案，不得自行降低高清主文件尺寸。

8.2 文章集与图集

  • Gallery 是约 50 张精选照片组成的独立页面，不是按月份不断新增的摄影文章或多级相册目录。
  • 仅在主导航的 Archives 与 About 之间加入文字入口 Gallery；手机端进入既有菜单。不新增首页照片墙、浮动按钮或第二入口。
  • Gallery 共用 Blue Note 的颜色、字体、页眉和原文原则；照片记录独立于文章，不进入首页文章流、Archives 或文章搜索。
  • 《秋之纽约_2023.11》仍是普通博客，保留原链接、正文、图片与归档位置，不迁移、不自动复制照片到 Gallery。
  • Gallery 只收录作者明确交付的照片，严格按清单顺序排列；作者明确委托编排时，可依据画面关联、光线和观看节奏调整清单。不得自行补写可见图注、分组名或叙事说明。
  • 照片尚未交付时，只显示“尚未收录照片。”，不放样片、占位图、加载骨架、虚构照片数量或自拟介绍。
  • 页面上方只显示 Gallery 标题，不另加封面或副标题。图片区最大宽度为 1160px，与页眉标题对齐；第一张就是作品，不另复制成封面。
  • 完整选集使用摄影书式展墙：大幅单张为主，有画面关联的照片可组成双联，一行最多两张。spread 明确记录组合；sequence 记录连续段落。完整模式不得按屏幕尺寸自动打散或随机重排；随机小展另见 8.4 节。
  • 单幅和双联居中，照片等高、宽度按实际比例分配，图高上限为 78svh（兼容回退 78vh）与 840px 中较小者。没有固定比例槽位，不裁切、不拉伸、不加画框；竖幅不强行撑满横向空间。
  • 独立单张必须完整填满自身的居中容器；不得把小于 1 的原图比例直接当作单张的伸展系数，造成竖幅再次缩小并向左偏移。
  • 每个单幅或双联外包一个独立展位。桌面端展位至少占满一个可视高度（100svh，兼容回退 100vh），作品在其中垂直居中；观众停在作品的标准观看位置时，前后作品不得探入当前视窗。该规则同时用于随机小展与完整选集，不以裁切、放大或缩小照片换取隔离效果。
  • 双联内间距 32px；相邻展位另留 64–112px 缓冲，同一连续段落内为 32–56px。≤900px 时全部转单列，照片完整占据内容宽度，不受桌面图高上限限制；同一双联内 24px，同一连续段落内 40px，普通间距 64px。展位仍以一个可视高度为最低空间，双联转为纵列后如果内容更高则自然延长，不强行把整组压进一屏。这一较早断点避免平板双联过小。
  • 手机两侧留白 24px。有原稿图注时在图下展示，字号 0.875rem、行距 1.6；无图注不填充说明。不使用阴影、圆角卡片、图片入场动画、悬停缩放或自动轮播。
  • 初始页面只加载响应式预览，不自动下载高清主文件。高清主文件只在读者打开相应照片后请求；不预加载整组原图。
  • 打开大图时先显示已有的完整预览，高清主文件到达后替换；前后切换时保留上一张完整画面，直到下一张预览或高清文件完成解码，再在固定舞台内一次替换，不先清空画面，也不进行“空白—预览—高清”的连续跳换。预览与高清均完整容纳在同一固定舞台内，并写入主文件宽高供解码前稳定占位；已有有效画面时不在照片底部覆盖加载条，只有首次尚无画面或实际加载失败才显示状态，错误提示使用围绕文字的紧凑底色而非横贯图片。只在高清加载并解码完成后允许 1:1 放大。加载失败时保留有效预览和原图链接，不让观众面对空白。
  • 大图观看使用中性深灰背景 #242424、主文字 #eeeae3、次要文字 #bdbab4，浅色与深色模式共用；避免有色背景影响照片观感。
  • 打开时完整容纳画面，点击或键盘激活照片后才放大到原始像素尺寸；再次激活恢复全幅。只保留关闭、上一张、下一张及低调的当前位置；不自动播放、不显示缩略图工具栏。
  • 支持左右键与手机横向滑动，Escape 关闭；放大时允许滚动查看细节。关闭后恢复原来的页面滚动位置和键盘焦点。
  • 加载失败必须有明确提示和打开原图的回退链接。不开启 JavaScript 时，照片链接仍能直接打开高清主文件。

8.4 随机小展与完整选集

  • Gallery 默认打开 /gallery/ 的 A few 模式，每次进入或主动点击 Reshuffle，从已收录作品中随机展示 3–5 张；/gallery/all/ 的 All photographs 保留 8.3 节的完整编排。主导航仍只有一个 Gallery 入口。
  • 两种模式用页面内的衬线文字导航切换，当前模式有细下划线。Reshuffle 保留上下两个同功能入口：顶部入口位于模式切换同一行右侧，便于立即更换首轮选片；底部入口在最后一个展位之后居中，便于看完后继续。两处均使用小型回转符号与文字、无填充按钮，不使用卡片、粗边框、彩色主按钮或悬浮固定控件；字号 0.9375rem，触控高度至少 44px，窄屏自然换行。
  • 随机抽取以既有单幅／双联为单位，不拆散同一双联；连续两次尽量不重复上一组作品。随机模式中的系列片段不等于重新定义作者的完整系列顺序。
  • 小展给单幅主图更充分的空间，最大宽度 1040px，图高不超过 82svh / 900px；后续使用完整双联或比例相近的单张组成视觉并置。独立照片的并置可错开 40–56px，既有双联始终齐平。末尾独立横幅可收至内容宽度的 86%，但所有独立竖幅保持居中。
  • 每次 Reshuffle 生成的每个单幅或双联都必须重新放入 8.3 节规定的独立展位；随机组合只改变本次选片和作品之间的并置关系，不得压缩展位或让相邻组侵入当前作品的标准观看画面。
  • 底部 Reshuffle 成功生成新一轮后，将焦点移至第一张作品并把它带回视窗中央；常规情况下使用平滑滚动，系统请求减少动态效果时立即定位。顶部入口不改变当前滚动位置。
  • 不用三列小缩略图、叠图、倾斜、裁剪或轮播来制造变化。手机一列，取消桌面的错位和额外缩窄；不强迫 3–5 张全部挤进一屏。
  • 初始只请求当前小展的预览；其他作品只以轻量数据形式存在，不先下载完整选集。无脚本时展示一组真实照片，并提供完整选集链接；重新抽取失败不得清空已有照片。
  • 大图浏览限制在当前小展内；完整选集模式仍可连续浏览全部作品。重排是主动操作，不自动计时切换，不添加可见标题、图注或策展文案。
  • 大图打开后可以低优先级预热相邻两张的网页预览，以减少主动前后翻动的等待；不得借此预载相邻高清主文件或整套图集。

9. 首页、导航与列表

  • 首页是独立的深色影像界面；文章页是浅色/深色纸面阅读界面，两者不混用大面积底色。

  • 首页卡片保持方形、无圆角、低阴影；一张卡只表达标题、摘要和必要元信息。

  • 导航以文字为主，不恢复装饰性分类图标。

  • 动效仅用于短暂反馈，常规时长为 160–260ms；正文、方框和公式不做入场动画。

  • 首页标语在桌面保留打字效果，手机（≤767px）直接显示完整文字；无 JavaScript 时也显示完整标语。动效不扩展到文章标题或正文。

  • 归档、搜索、标签和 About 共享编辑式字体、颜色和 760px 内容网格。

  • Gallery 的视图切换与重抽按钮使用 --text，当前视图用底线区分；不使用对比度不足的次要文字色作为操作文字。

9.1 首屏与加载

  • 首页的 home-root、home-page 与内容页、摄影文章的布局类必须在构建时写入 HTML；首屏不得等待页面底部的 JavaScript 才切换到当前设计。
  • 布局所需 CSS 在文档头部正常加载，不用隐藏整个页面或延时显示的方式掩盖旧样式闪现。
  • 网站小图标使用 64px 副本，Apple touch icon 使用 180px 副本，About 头像使用 256px 副本；原图保留，不让小图标请求原分辨率文件。
  • 首页使用同一封面的 2880px 渐进式 JPEG 预览，并在文档头部预加载；原始封面保留，构图与现有背景展示方式不变。
  • 站点不依赖 Bootstrap、jQuery 或图标字体；打字效果使用主题内置的 typed.js 副本，图标为内联 SVG。所有 CSS、JS、字体与图片由本站托管，任何页面不得请求第三方资源。

10. 响应式与无障碍

  • 主要断点为 767px。设计和检查至少覆盖约 1280px 桌面与 390px 手机宽度。
  • 手机正文保持 17px，不通过缩小文字解决拥挤；应调整内边距、换行和组件布局。
  • 窄屏文章左右内边距：常规手机 1rem，较宽移动设备可用 2rem。
  • 页面不得出现无意的横向滚动；公式组在窄屏应缩小间距或改为纵向，但不得截断。
  • 键盘焦点必须可见；hover 反馈必须有对应的 focus 状态。
  • 手机菜单关闭时不可获得焦点；搜索打开时背景不可操作，Tab 在弹窗内部循环，关闭后恢复触发入口的焦点。搜索须区分加载中、无结果与加载失败，并提供重试。
  • 文章通过主题的 post.language 或逐页 content_language 声明正文语言；界面语言仍由站点 language 决定。
  • 遵守 prefers-reduced-motion，关闭非必要过渡和动画。
  • 深色模式必须与浅色模式同时验收；不得只在一种模式中可读。
  • 语义 HTML 优先于视觉模拟：段落用段落、标题用标题、引文用引文、主题分隔用 hr。

11. 实现边界

样式职责固定如下：

  • 主题仓库 hexo-theme-bluenote（本地安装在 node_modules/hexo-theme-bluenote/）的 assets/css/：主题样式，按文件名顺序合并为一个 css/bluenote.css：00-tokens 结构尺寸（760px 列、39.667rem 文章列、1080px 照片列、1160px 宽版、页眉高度）、01-base 基础重置与滚动条、10-nav 导航与手机菜单、20-masthead 编辑式页眉、30-home 首页封面与卡片、40-editorial 内容容器、列表、分页、About、404、50-post 文章列、目录、上下篇、照片文章、标题锚点、灯箱、60-markdown 与 65-markdown-overrides 正文排版、70-panels 方框、诗歌等可复用文学内容块、80-highlight 代码配色、85-search 搜索面板、90-print 打印；
  • 主题的 _config.yml 与站点 _config.bluenote.yml：颜色与字体 token（--paper、--text、--prose、--heading、--muted、--link、--link-hover、--line、--masthead、--masthead-text、--accent、--panel、--home-* 等）及主题开关；颜色值以本文第 2 节为准，主题默认值即 Blue Note 的取值；
  • 主题的 layout/：全部页面模板；首页、内容页与摄影文章的布局类在构建时写入 <body>；
  • 主题的 scripts/：主题构建期脚本——布局类、标题锚点、图注（文件名 alt 不生成图注）、原生懒加载、CSS/JS 合并与内容版本号；第三方副本来源见 docs/VENDORED-ASSETS.md；
  • source/css/site.css：仅 Blue Note 专属的例外（《小蓝本》解锁后的首个代码块按通用方框呈现）；
  • source/css/design-doc.css：Design Doc 页面；
  • source/css/thought-notes.css：随想中的公式排列和主题分隔，不重定义通用方框；
  • source/css/private.css、source/js/private.js：私密文章界面；
  • 主题的 modules/gallery/：可选 Gallery 的排列、抽取、验证与大图观看，默认关闭；启用后仅 Gallery 页面加载 CSS/JS。网站通过 gallery.language 与 gallery.labels 设置界面文案；
  • source/_data/gallery.json：Gallery 的照片清单与作者顺序，不从博客文章推断收录；
  • 主题的 scripts/gallery.js：从站点清单生成独立 Gallery 页面，不生成照片文章；
  • scripts/design-document.js：从本文件生成公开 Design Doc 页面；不得另存第二份网页正文；
  • scripts/private-links.js：在构建时标记指向私密文章的链接。

实现规则：

  • 共享视觉值优先使用现有 CSS 变量，不在文章 Markdown 中写内联颜色、字号、边框或间距。
  • 主题 CSS 不使用 !important（仅 [hidden]、.markdown-body 首尾元素外边距归零与打印样式三处例外）；主题不得包含 Blue Note 专属的内容、路径或文案，站点专属规则放在 source/css。
  • 主题改动在主题仓库提交并打版本标签，博客通过 package.json 更新到新标签；本地调试可把主题仓库克隆到 themes/bluenote（已在 .gitignore 中），它会优先于 node_modules 中的副本。
  • 新文章默认不需要专属 CSS；确有特殊结构时，先判断能否使用已有组件。
  • 新增专属类只能解决该内容的内部布局，不能复制或覆盖通用组件外观。
  • HTML 引用的本站 CSS 与 JavaScript 由构建流程按最终文件内容自动附加版本号；内容改变才更新版本，不再手工维护日期查询参数。
  • 不直接编辑生成后的 public/；所有修改进入源文件。
  • 若设计规范、CSS 和已发布页面不一致，三者必须在同一轮修改中恢复一致。

12. 设计变更验收

每次视觉修改至少完成：

  1. 运行 npm run check；涉及版式或主题的修改另运行 npm run visual:capture && npm run visual:compare，与 tooling/visual/baseline/ 中的基线截图、计算样式和正文文本对比（基线用 npm run visual:baseline 从上一个已验收的构建生成，有意的差异登记在 tooling/visual/allowed-differences.json）；
  2. 检查文章页桌面与手机宽度；
  3. 检查浅色与深色模式；
  4. 检查一段同时含中文、英文、数字、斜体和链接的正文；
  5. 若涉及组件，检查普通正文、首个组件和后续同类组件是否一致；
  6. 确认没有把正文句子变成标题、题记、列表、引语或目录；
  7. 确认没有横向滚动、文字截断、异常上浮或字号跳变；
  8. 发布后验证线上 CSS 版本和最终页面。

判断一个新设计是否应被接受时，依次回答：

  1. 它是否忠实于原稿语义？
  2. 它是否解决了真实的阅读或理解问题？
  3. 它是否能复用现有颜色、字号、间距和组件？
  4. 它在下一篇文章中是否仍然合理？
  5. 去掉它，信息是否依然清楚？如果是，它很可能只是装饰，应谨慎采用。