在完成了 chowray.org 从 Netlify 到 Cloudflare Pages 的迁移，并对 PaperMod 主题进行了深度的 CSS 定制（宋体标题 + 极客蓝交互）之后，我意识到一个问题：

如果没有高质量的排版，再漂亮的 CSS 也是花瓶。

作为一个工科男和项目经理，我认为写作应该像写代码一样，遵循严格的 Style Guide。这不仅是为了视觉上的“呼吸感”，更是为了语义的正确性和未来的可维护性。

以下是我为本站制定的 Markdown 写作规范。

1. 结构层级：建立视觉金字塔

HTML 是有层级的树状结构，不要随意跳级。

  • 原则：正文永远从 ## (H2) 开始
    • 禁区：永远不要在文章正文里使用 # (H1)。因为 Hugo 会自动将文章标题（Title）渲染为页面唯一的 <h1>。如果正文再用 H1，就会出现“双头鹰”的尴尬，且破坏 SEO。
    • 层级：## 章节 -> ### 子项 -> #### 细节。
    • 配合 CSS：本站已通过 CSS 严格定义了字号金字塔：
      • 文章标题：2.5rem (宋体，绝对统治力)
      • 二级标题：1.5rem (黑体，清晰分隔)
      • 三级标题：1.25rem (精致小标题)

2. 空格美学：盘古之白

这是区分“普通博主”和“专业技术博主”的分水岭。请务必遵守 “盘古之白” 规则。

  • 中英文之间：必须加空格。
    • ❌ 我在Cloudflare上部署了Hugo博客
    • ✅ 我在 Cloudflare 上部署了 Hugo 博客
    • 理由：汉字是方块字，英文是变宽字，挤在一起会导致视觉上的“透气性”极差。
  • 中文与数字之间：必须加空格。
    • ❌ 我有17年的博龄
    • ✅ 我有 17 年的博龄
  • 链接两侧：建议加空格。
    • ✅ 请访问 [Google](https://google.com) 进行搜索。

3. 标点与强调：克制即高级

  • 全角与半角：中文语境用全角标点，英文语境用半角。不要出现 Hugo is great。 这种怪异组合。
  • 慎用斜体：不要在中文里使用 *斜体*。
    • 原因：中文字体（尤其是屏幕显示）稍微一倾斜，边缘就会发虚，甚至出现锯齿。
    • 替代：需要强调时，只用 加粗，或者使用「直角引号」。
  • 行内代码：这是极客的神技。
    • 任何专有名词、文件名、快捷键，都用 ` 包裹。
    • 例子：修改 config.toml 文件，按 Ctrl+C 保存。配合本站的等宽字体（JetBrains Mono），效果拔群。

4. 引用块：Note 与 Warning

本站专门定制了引用块 (blockquote) 的样式：左侧带有 3px 的极客蓝边框，背景为淡灰。

请充分利用它来展示：

  • 对他人的引用。
  • 补充说明 (Note)。
  • 警告信息 (Warning)。

示例：这是一个引用块。它应该被用来突出那些需要读者额外注意的信息。

5. Hugo 专属规范

  • 图片 Alt：每张图片必须写 Alt 文本。
    • ![Cloudflare 设置截图](image.jpg)
    • 这不仅是为了 SEO，更是为了数据主权——万一图床挂了，文字还在。
  • 摘要截断：手动控制。
    • 不要依赖 Hugo 的自动截取（经常截断在半句话）。
    • 写完引言后，手动插入 <!--more-->，让首页列表只显示最精华的部分。

6. 工具流推荐 (VS Code)

不用人眼检查，用工具约束习惯：

  1. Markdown All in One：基础快捷键支持。
  2. Pangu-Markdown：神器！ 快捷键一键自动给全文的中英文之间加上空格。
  3. Markdownlint：像检查代码 Bug 一样检查文章格式错误（如列表缩进不对、标题层级跳跃）。

结语

排版是内容的载体。 在这个信息过载的时代，良好的排版是对读者时间最大的尊重，也是 .org 精神的一种体现。保持自律，哪怕是在看不见的源码里。

📏 现在的层级金字塔 (完美版)

  1. 文章封面大标题: 2rem (32px) —— 👑 王者 (统领全域)
  2. 正文 H1 (#): 1.8rem (29px) —— 🤴 亲王 (极少露面，地位尊贵)
  3. 正文 H2 (##): 1.5rem (24px) —— ⚔️ 将军 (统领大章节，中流砥柱)
  4. 正文 H3 (###): 1.25rem (20px) —— 🛡️ 队长 (统领小节，清晰有力)
  5. 正文 H4 (####): 1.1rem (18px) —— 🚩 班长 (带头大哥)
    • 特点：只比士兵（正文）高半个头。通常靠加粗来立威，而不是靠身高（字号）。
  6. 正文: 17px —— 💂 士兵 (基石)

💡 什么时候用 H4？

我建议极少使用 H4。

  • 场景：只有当你的内容极其复杂，需要在 H3（小节）下面再分出具体的“步骤”或“参数列表”时才用。
  • 替代方案：大多数时候，用 加粗的无序列表 效果更好。

对比一下：

用 H4 (略显臃肿):

步骤一：安装

xxxxxxx

步骤二：配置

xxxxxxx

用加粗列表 (更推荐):

  • 步骤一：安装 xxxxxxx
  • 步骤二：配置 xxxxxxx

所以，H4 虽然在编制里（CSS里写了），但通常是作为预备役存在的。😉