写作示例

多级标题测试:从一级标题到六级标题

2026-05-16 #Markdown#排版#标题#目录

这篇文章用于测试 Markdown 多级标题在主题中的显示效果,包括标题字号、间距、锚点、目录生成和标题之间的层级关系。

FlatPaper 的正文标题样式是刻意收敛的:主题只为正文中的 h2、h3、h4 提供专门视觉层级;h1 保留给文章主标题语义,正文里的 h5、h6 则按更轻量的默认层级呈现,避免长文结构过度复杂。

一级标题:文章内部的大章节

虽然文章页通常已经有一个页面标题,但正文里仍然可能出现一级标题。主题需要确保它不会和文章主标题混淆。

FlatPaper 主题中的 TOC 不会显示一级标题

二级标题:主要内容分区

二级标题通常是正文中最常见的结构层级。它适合用来划分文章的主要部分,也经常出现在文章目录中。

三级标题:分区下的小节

三级标题用来继续拆分内容。它的视觉层级应该明显低于二级标题,但仍然比普通段落更容易被扫描到。

四级标题:细节说明

四级标题适合放在技术文章或教程中,用来解释某个步骤的细节。

五级标题:补充层级

五级标题不常用,但主题仍然应该给它一个稳定样式,避免它看起来像普通加粗文本。

六级标题:最小标题层级

六级标题是 Markdown 标题层级的最后一级。它适合测试字号、字重和段落间距的下限。

连续标题测试

下面故意放置一组连续标题,用来观察标题之间没有正文时的垂直间距。

连续三级标题

连续四级标题

连续五级标题
连续六级标题

连续标题不应该挤在一起,也不应该产生过大的空白。

标题后接列表

检查项

  • 标题左侧装饰是否和文本对齐。
  • 标题换行后是否仍然保持自然行高。
  • 目录锚点是否能正确跳转。
  • 移动端标题是否会溢出容器。

长标题测试:这是一个故意写得很长的二级标题,用来观察标题在文章正文中换行后的行高、间距和装饰元素位置是否仍然合理

长标题经常出现在教程、复盘和问题记录中。如果标题换行后行距过紧,阅读会变得很累;如果装饰元素位置固定得不合理,也会显得突兀。

长三级标题测试:当标题继续变长时,主题需要保证内容不会覆盖正文、目录或侧边栏区域

这段正文用来观察长标题之后的段落起始位置。标题和正文之间应该有清晰但不过度的距离。

标题后接代码块

示例代码

1
2
3
4
function headingLevel(markdownLine) {
const match = markdownLine.match(/^(#{1,6})\s+/);
return match ? match[1].length : 0;
}

标题后接引用

引用示例

标题负责组织结构,段落负责承载内容。好的主题应该让这两者各自清楚。

结尾

这篇文章适合用来检查文章页目录、标题锚点、正文层级和移动端换行。如果这些层级都清晰,长文阅读体验会更可靠。

Like 评论
分享