124 lines
4.2 KiB
Markdown
124 lines
4.2 KiB
Markdown
# 参考页面排版优化文章详情页阅读体验
|
||
|
||
## 参考页面分析（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
|
||
```css
|
||
.wi-content-wrap {
|
||
max-width: 720px; /* 从 800px 缩小到 720px */
|
||
margin: 0 auto;
|
||
padding-inline: clamp(1rem, 3vw, 2rem);
|
||
}
|
||
```
|
||
|
||
### post.astro CSS 修改
|
||
|
||
```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. 浏览器验证效果
|