跳到主要内容
Termlib

布局模式 · 内容展示

长文阅读

Article Layout

也叫：文章页、阅读页、文章详情页、博客文章布局、Reading Layout

为连续阅读大段文字设计的页面，正文限制在较窄的一列，配合标题层级、段落间距和目录，让长内容读起来不累。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

这是一篇长文章的详情页，请用长文阅读布局：正文一列，最大宽度 680px 居中，字号 16px、行高 1.8、段落间距 1em；顶部是大标题、作者和发布日期；正文用 h2、h3 分级小标题，图片宽度和正文一致；桌面端右侧放吸顶目录，高亮当前正在阅读的章节。

发给

01判断

你的内容是这样吗？

对照两列，确认长文阅读是不是你要找的。

符合这些情况，用长文阅读

  • 内容是连续的大段文字，用户需要从头读到尾时
  • 文章较长、有多级小标题，需要目录帮助跳转时
  • 以阅读为主、几乎没有操作按钮的页面

是这些情况，换成别的

  • 内容是多条结构相同的记录，用户需要扫读和挑选时

    改用简单列表

  • 页面以填写、操作为主时

  • 内容以图片视频为主、文字只是配角时

    改用画廊

  • 只有一两段简短说明文字时

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    正文不限宽，大屏上一行几十上百个字

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    行高太小、段落之间没有间距，满屏文字挤成一块

  3. 03

    标题层级混乱，小标题和正文字号几乎一样

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

顶部是标题和元信息，下方是限定宽度的正文列，由小标题、段落、图片依次组成；桌面端右侧可附一个吸顶目录。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一大块左对齐的连续文字段落
  2. 2醒目的大标题下面有作者、日期等灰色小字
  3. 3正文中穿插小标题、配图、引用块，旁边可能有目录

04解释

详细解释

长文阅读布局用于博客、文档、新闻、帮助中心文章：顶部是大标题和作者、日期等元信息，下面是正文，正文里穿插小标题、图片、引用和代码块。桌面端右侧常有一个吸顶的目录（锚点导航），点击可以跳到对应章节。

它最关键的是正文宽度：一行控制在 3545 个汉字（约 640720px），行高 1.7~1.8，段落之间留出明显间距。一行太长，眼睛换行时容易找错位置；行距太挤，会让人读不下去。

它和单栏布局的区别是：单栏布局只规定页面结构，长文阅读还规定了字号、行宽、行高、标题层级这些排版细节，目标是让人舒服地读完几千字。

开发者信息
术语 ID
layout-article
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • article.prose
  • .prose:not([class*="message" i] *):not([class*="chat" i] *)
  • .markdown-body
  • main article:only-of-type
  • article:has(> h1, > header h1)
  • .vp-doc
  • .theme-doc-markdown
  • main:has(> article:only-of-type)
  • main:has(> :is(.prose, .markdown-body, .vp-doc):only-child)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • article
  • article-body
  • article-content
  • post
  • post-content
  • post-body
  • blog-post
  • markdown-body
  • prose
  • doc-content
  • docs-content
  • doc-body
  • entry-content
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Article
  • Post
  • BlogPost
  • DocContent
语义标签和角色

弱信号，要和其他线索一起才算识别出来。

  • <article>
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 标题开头
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30