主题效果总览：文章块与交互组件预览
这篇文章用于集中预览主题在文章页里的主要内容块：标题、段落、链接、引用、提示块、选项卡、表格、代码、图片、脚注、列表和长文本换行。它适合作为主题改样式后的快速回归检查页面。
1. 正文排版
普通段落需要在长时间阅读时保持稳定节奏。这里混合展示 加粗文字、强调文字、行内代码、删除线、中文标点、English words，以及一个外部链接：Hexo 文档。
当一段文字比较长时，行高、段落间距、链接下划线和深浅色模式下的文字对比都会同时被检查。主题不应该让正文看起来像按钮说明，也不应该让链接被普通文字淹没。
1.1 小标题层级
三级标题适合文章内部的小节。
1.1.1 四级标题
四级标题通常只在较长文章里出现，字号不宜压过三级标题。
2. 列表
无序列表：
- 首页卡片：标题、摘要、封面和标签需要稳定排列。
- 文章详情：正文、目录、上一篇/下一篇和互动区共同工作。
- 移动端：长标题、长链接和图片不能撑破页面。
有序列表：
- 修改主题样式。
- 运行本地构建。
- 打开这篇文章检查所有块。
- 在浅色和深色模式下各看一遍。
任务列表：
- 检查普通段落
- 检查 note 与 tabs
- 检查真实长文内容
3. 引用块
引用块适合放一段需要从正文中分离出来的话。它应该比普通段落更醒目，但不能抢走 note block 或代码块的层级。
第二段引用用于检查连续段落的间距。
4. Note 提示块
Default 提示用于普通补充说明。这里包含 inline code 和一个 内部链接。
Primary 提示通常跟当前主题强调色有关，适合放较重要但不危险的信息。
Success 提示用于完成状态、推荐做法或通过检查的结果。
Info 提示适合放背景信息、兼容性说明和阅读提示。
Warning 提示用于需要注意但不一定错误的内容。
Danger 提示用于破坏性操作、风险说明或强烈不建议的做法。
可折叠提示
带标题的 note 会渲染为可折叠块。展开后应该能正常显示段落、列表和代码：
- 第一项内容
- 第二项内容
pnpm exec hexo generate
4.1 VitePress 风格容器
容器语法提示
::: 容器语法会被主题改写为等价的 note block，适合写新文章时减少标签噪音。
5. Tabs 选项卡
下面的选项卡用于检查按钮组、面板切换、默认激活项和面板内部排版。
选项卡内可以放普通段落、加粗文字 和 行内代码。
这里还有一个嵌套在 tab 内的引用块。
6. 表格
| 场景 | 检查点 | 期望 |
|---|---|---|
| 普通表格 | 边框、行高、单元格间距 | 易扫描 |
| 长文本 | 单元格自动换行 | 不撑破文章区域 |
| 行内代码 | code_theme、note_style |
颜色清晰 |
| 链接 | 配置页 | 可识别 |
7. 代码块
JavaScript:
1 | function buildExcerpt(input, limit = 96) { |
CSS:
1 | .article-content { |
Shell:
1 | pnpm exec hexo clean |
长行代码用于检查横向滚动：
1 | https://example.com/articles/theme-preview-checklist?utm_source=demo-blog&utm_medium=markdown&utm_campaign=long-url-wrapping-and-code-scroll-behavior |
8. 图片与图文块
单张 Markdown 图片：
HTML figure:
双列图片：
9. 长链接与换行
下面这条链接故意很长，用于检查正文区域是否会被撑开：
10. 脚注
脚注适合放补充说明，不应该打断正文节奏。这里有一个手写脚注标记1，以及另一个更长的说明2。
- 这篇文章可以作为主题样式调整后的人工检查清单。↩
- 当颜色、间距或字体改动影响范围较大时，集中预览页比随机打开文章更容易发现回归。↩
11. 结束检查
如果这篇文章里的所有块在桌面、移动端、浅色模式和深色模式下都能保持清晰，那么文章页的大部分基础样式就处在比较稳定的状态。