长文阅读

Article Layout

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

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

详细解释

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

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

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

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

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

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

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