详情页
读者到这一页是来从头读到尾的。 所有设计决定都服务于一件事：不要打断阅读。
结构
论克制
设计的力量来自克制而非张扬。
2026-08-30 · 六分钟
正文从这里开始。行长被限制在 30–40 个中文字符之间， 因为中文字符密度高，合适的行长比拉丁文短得多。
一个页面上每多一个视觉元素，读者就要多付一次注意力。
引用块用单边线，不用方框。
查看代码 · Source
<article>
<nav class="wx-crumbs" aria-label="面包屑">
<ol><li><a href="#">首页</a></li><li><a href="#">文章</a></li><li>论克制</li></ol>
</nav>
<h3>论克制</h3>
<p class="wx-lede">设计的力量来自克制而非张扬。</p>
<p class="wx-attr">2026-08-30 · 六分钟</p>
<hr class="wx-rule">
<p>正文从这里开始。行长被限制在 30–40 个中文字符之间，
因为中文字符密度高，合适的行长比拉丁文短得多。</p>
<blockquote class="wx-quote">
<p>一个页面上每多一个视觉元素，读者就要多付一次注意力。</p>
</blockquote>
<p>引用块用单边线，不用方框。</p>
</article>行长是第一决定
详情页最重要的一个数字是内容列宽。--width-article 给出 520–640px，
配合 .wx-measure 的 36em 中文上限。长叙事内容可以放宽到 40em，
但这是上限不是默认。
目录与旁注
长文需要目录。wx-toc 用 aria-current 标记当前节——
本页右侧就是一个（窄屏下隐藏）。
旁注 wx-marginal 用于不该打断正文、但值得就近说明的内容。
窄屏下它退回正文流，不消失。
正文中提到一个需要补充的概念旁注在宽屏下浮到侧边，窄屏下退回正文流。， 读者可以选择看或不看。
脚注与引用
上一篇 / 下一篇
查看代码 · Source
<nav class="wx-pager">
<a href="#"><span class="wx-pager__label">上一篇</span>留白不是空缺</a>
<a href="#" style="text-align:end"><span class="wx-pager__label">下一篇</span>点睛之色</a>
</nav>详情页检查清单
- 行长在 30–40 中文字符内
- 正文行高
--leading-relaxed（1.85） - 标题层级不跳级（h1 → h2 → h3）
- accent 出现 ≤ 2 处
- 图片有
alt，图有编号 caption - 正文不居中对齐