halo-theme-WarmIsland/.trae/documents/article-reading-experience-ref-optimization.md

参考页面排版优化文章详情页阅读体验

参考页面分析（nxxy335.top/archives/c2KWtzf4）

通过浏览器截图和 JS 提取的样式数据，参考页面的排版特征如下：

属性	参考页面	我们当前	差异分析
内容区域宽度	704px	800px	我们更宽，但参考页面更聚焦阅读
正文字号	16px	17px (1.0625rem)	我们略大
正文行高	27.6px (~1.725)	1.85	我们行高更大
h2 字号	24px	未设置（继承）	参考页面 h2 有明确字号
h2 margin-top	32px	3em (~51px)	我们标题上方留白过大
h2 margin-bottom	8px	1.2em (~20px)	参考页面标题下方更紧凑
段落间距	16px	1.6em (~27px)	我们段落间距偏大
图片圆角	0px（无圆角）	12px	参考页面图片无圆角
图片 margin-bottom	0px	var(--space-xl) 2rem	参考页面图片紧贴文字
字体	系统字体栈	var(--font-sans)	类似

参考页面的设计理念

• 紧凑但不拥挤：段落间距适中（16px），标题上方留白适中（32px），整体节奏感好
• 内容宽度适中：704px 是经典的阅读宽度，适合单栏长文阅读
• 标题层级清晰：h2 有明确的 24px 字号，上方 32px 留白，下方仅 8px，让标题和下方正文紧密关联
• 图片融入正文：无圆角，无额外间距，图片像段落一样自然融入文字流
• 行高适中：1.725 的行高在中文阅读中既不拥挤也不松散

---

优化方案

1. 缩小内容区域宽度

• 将 .wi-content-wrap 的 max-width 从 800px 改为 720px
• 这是阅读体验最核心的改进——过宽的内容行会导致视线追踪困难

2. 调整正文字号和行高

• 字号：保持 1rem（16px），与参考页面一致
• 行高：从 1.85 调整为 1.75，与参考页面的 1.725 接近

3. 优化标题间距

• h2：margin-top: 2em（从 3em 降低），margin-bottom: 0.5em（从 1.2em 降低）
• h3-h6：margin-top: 1.8em（从 2.5em 降低），margin-bottom: 0.5em（从 1em 降低）
• 核心理念：标题上方留白适中，下方紧凑，让标题和正文紧密关联

4. 优化段落间距

• 从 1.6em 调整为 1.2em，与参考页面的 16px（1em）接近但略宽松

5. 优化图片样式

• 圆角：从 12px 改为 8px（保留微圆角但不突兀）
• 间距：从 margin-block: var(--space-xl) 改为 margin-block: 1.5em

6. 为 h2 添加明确字号

• h2：font-size: 1.5rem（24px）
• h3：font-size: 1.25rem（20px）

---

涉及文件

1. src/styles/main.scss：修改 .wi-content-wrap 的 max-width 从 800px 到 720px
2. src/pages/post.astro：修改 .wi-post__body 及子元素的排版样式

---

具体修改

main.scss

.wi-content-wrap {
  max-width: 720px;    /* 从 800px 缩小到 720px */
  margin: 0 auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

post.astro CSS 修改

.wi-post__body {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-size: 1rem;           /* 从 1.0625rem 改为 1rem (16px) */
  line-height: 1.75;         /* 从 1.85 改为 1.75 */
  color: #3d3530;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.wi-post__body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-sans);
  margin-top: 1.8em;         /* 从 2.5em 降低 */
  margin-bottom: 0.5em;      /* 从 1em 降低 */
  scroll-margin-top: 80px;
}

.wi-post__body h2 {
  font-size: 1.5rem;         /* 新增：明确 h2 字号 */
  margin-top: 2em;           /* 从 3em 降低 */
  margin-bottom: 0.5em;      /* 从 1.2em 降低 */
}

.wi-post__body h3 {
  font-size: 1.25rem;        /* 新增：明确 h3 字号 */
}

.wi-post__body p {
  margin-block-end: 1.2em;   /* 从 1.6em 降低 */
}

.wi-post__body img {
  border-radius: 8px;        /* 从 12px 降低 */
  margin-block: 1.5em;       /* 从 var(--space-xl) 改为 1.5em */
}

---

实施步骤

1. 修改 src/styles/main.scss：.wi-content-wrap 的 max-width 从 800px 改为 720px
2. 修改 src/pages/post.astro：调整 .wi-post__body 及子元素排版样式
3. 构建并部署到 Halo 容器
4. 浏览器验证效果