这篇文章用于测试 Markdown 多级标题在主题中的显示效果,包括标题字号、间距、锚点、目录生成和标题之间的层级关系。
FlatPaper 的正文标题样式是刻意收敛的:主题只为正文中的 h2、h3、h4 提供专门视觉层级;h1 保留给文章主标题语义,正文里的 h5、h6 则按更轻量的默认层级呈现,避免长文结构过度复杂。
一级标题:文章内部的大章节
虽然文章页通常已经有一个页面标题,但正文里仍然可能出现一级标题。主题需要确保它不会和文章主标题混淆。
FlatPaper 主题中的 TOC 不会显示一级标题
二级标题:主要内容分区
二级标题通常是正文中最常见的结构层级。它适合用来划分文章的主要部分,也经常出现在文章目录中。
三级标题:分区下的小节
三级标题用来继续拆分内容。它的视觉层级应该明显低于二级标题,但仍然比普通段落更容易被扫描到。
四级标题:细节说明
四级标题适合放在技术文章或教程中,用来解释某个步骤的细节。
五级标题:补充层级
五级标题不常用,但主题仍然应该给它一个稳定样式,避免它看起来像普通加粗文本。
六级标题:最小标题层级
六级标题是 Markdown 标题层级的最后一级。它适合测试字号、字重和段落间距的下限。
连续标题测试
下面故意放置一组连续标题,用来观察标题之间没有正文时的垂直间距。
连续三级标题
连续四级标题
连续五级标题
连续六级标题
连续标题不应该挤在一起,也不应该产生过大的空白。
标题后接列表
检查项
- 标题左侧装饰是否和文本对齐。
- 标题换行后是否仍然保持自然行高。
- 目录锚点是否能正确跳转。
- 移动端标题是否会溢出容器。
长标题测试:这是一个故意写得很长的二级标题,用来观察标题在文章正文中换行后的行高、间距和装饰元素位置是否仍然合理
长标题经常出现在教程、复盘和问题记录中。如果标题换行后行距过紧,阅读会变得很累;如果装饰元素位置固定得不合理,也会显得突兀。
长三级标题测试:当标题继续变长时,主题需要保证内容不会覆盖正文、目录或侧边栏区域
这段正文用来观察长标题之后的段落起始位置。标题和正文之间应该有清晰但不过度的距离。
标题后接代码块
示例代码
1 | function headingLevel(markdownLine) { |
标题后接引用
引用示例
标题负责组织结构,段落负责承载内容。好的主题应该让这两者各自清楚。
结尾
这篇文章适合用来检查文章页目录、标题锚点、正文层级和移动端换行。如果这些层级都清晰,长文阅读体验会更可靠。