IFZPress 文章详情页改版设计说明

更新日期：2026-04-16 状态：已确认方向，待进入实施计划

目标

在不推翻现有首页和发布链路的前提下，重做 IFZPress 的文章详情页结构，让页面更接近成熟技术博客的阅读体验。

本轮目标不是继续堆叠视觉装饰，而是把文章页的职责重新分清：

• 正文优先
• 站点信息稳定存在，但不抢正文
• 目录默认简洁
• 只有复杂长文才引入更强的目录辅助

背景

第一轮 redesign 已经把首页、列表页、归档页整体拉到了可接受状态。用户最新反馈显示：

• 首页目前不需要继续大改
• 主要问题集中在文章详情页
• 当前文章页左侧的全站级列表不合理
• 从首页进入文章页后，应该保留一块稳定信息区，例如个人介绍、站点信息、精选入口

因此，本轮工作范围从“全站继续美化”收敛为“文章详情页重构”。

当前问题

1. 当前页同时存在两套导航

当前文章页里，读者会同时看到：

• 主题默认的全站级文章侧栏
• 正文区域里的“此页内容”目录

这会造成两层问题：

• 进入文章页后，读者先感受到的是导航结构，而不是文章本身
• 全站导航和文章导航挤在同一个阅读场景里，角色混乱

2. 阅读路径被切碎

当前文章页虽然已经通过样式增强了排版，但整体信息组织仍然偏“主题默认页”：

• 侧边是主题给出的全站索引
• 正文内部又叠加目录卡
• 页面各区块更像功能拼装，而不是连续阅读版面

3. 文章页缺少稳定站点身份

用户明确希望文章页保留稳定不动的信息区，例如：

• 站点 / 作者介绍
• 精选内容
• 公众号分发相关入口或说明

当前主题默认侧栏并没有承担这个角色。

参考站分析

本轮实际参考并对照了以下页面：

• Tania Rascia 文章页：https://www.taniarascia.com/redesign-version-7/
• Josh W. Comeau 文章页：https://www.joshwcomeau.com/animation/keyframe-animations/

Tania Rascia 的可借鉴点

• 使用连续的页面壳，而不是卡片堆叠
• 侧栏是一整块稳定区域，承担站点身份和栏目入口
• 正文区域是另一整块连续阅读区
• 站点级信息和文章级信息分层清楚

Josh W. Comeau 的可借鉴点

• 正文是绝对主角
• 顶栏按钮和操作入口布局克制，不打断阅读
• 目录存在，但角色明确，是阅读辅助工具，不是站点跳转
• 页面风格更像专栏或长文阅读页，不依赖强组件感

对 IFZPress 的结论

IFZPress 适合采用“Josh 的正文优先 + Tania 的稳定侧栏”混合方向，而不是继续沿用主题默认结构，也不是继续做大面积卡片堆叠。

已确认的设计方向

本轮已确认采用以下方向：

• 主体走正文优先的专栏式布局
• 顶栏按钮位置和分布更接近 Josh W. Comeau
• 右侧保留稳定站点信息区
• 右侧信息区包含“精选内容”和“公众号分发”
• 目录默认保持简洁
• 目录特别复杂时，再启用左侧透明悬浮目录
• 增加常驻回到顶部按钮

页面结构

桌面端总体布局

桌面端采用两栏结构：

• 左侧为正文主区
• 右侧为稳定信息侧栏

正文主区权重明显高于侧栏，页面视觉重心必须先落在标题、导语和正文上，而不是侧栏模块。

建议比例：

• 主列约 70% 到 74%
• 右侧栏约 26% 到 30%

顶栏

顶栏不再沿用“首页型”的强存在感，而改为更克制的文章页顶栏。

顶栏信息分布建议：

• 左侧保留品牌名或站点名
• 中右侧放主要导航入口
  • 文章
  • 分类
  • 时间线
  • 关于
• 最右侧放次级操作
  • 搜索
  • 主题切换
  • RSS

目标是让顶栏结构更像 Josh 的文章页导航逻辑：清楚、轻量、可用，但不喧宾夺主。

正文主区

正文主区从上到下分为：

1. 文章元信息行
2. 标题
3. 导语或摘要段
4. 简洁目录
5. 正文内容
6. 上一篇 / 下一篇
7. 页面底部元信息

其中正文主区应保持连续阅读感：

• 不做大面积割裂卡片
• 以分隔线、留白、字号层级、色彩轻重来区分区域
• 减少“每个模块都是一个边框盒子”的视觉语言

右侧稳定信息栏

右侧栏不是文章工具栏，而是稳定站点信息区。

本轮确认的内容结构为：

1. About
2. 精选内容
3. 公众号分发

具体职责如下：

About

用于承载：

• 站点名称
• 站点 / 作者简介
• 博客主题和写作范围说明

精选内容

用于承载：

• 代表性文章入口
• 用户首次进入文章页时的二跳内容

这部分不应做成重卡片列表，而应更像连续文本入口区。

公众号分发

用于承载：

• 文章可继续整理为公众号版本的说明
• 与分发流程相关的轻量入口或状态提示

这部分应保持轻量，不能和正文争抢视觉重心。

目录策略

默认情况

默认文章只保留现在这种简洁目录模式：

• 只显示大标题层级
• 放在标题和导语之后
• 作为正文前的轻量阅读辅助

默认目录不应占据整条侧栏，也不应像主题默认 TOC 那样成为一整块高权重目录面板。

复杂目录情况

当文章目录明显复杂时，再启用增强模式。

建议把“复杂目录”定义为满足以下任一条件：

• 大标题数量明显偏多，例如 h2 数量达到 6 个及以上
• 除 h2 外，还存在较多 h3 层级
• 默认目录高度明显过长，已经影响正文开头节奏

增强模式为：

• 左侧出现一条可收起的透明悬浮目录入口
• 默认收在页面左侧窄条内
• 鼠标靠近时展开
• 仅桌面端启用
• 平时不干扰阅读

这个目录不替代正文前的默认目录，而是只在长文和复杂文中额外提供快速定位能力。

移动端目录

移动端不启用左侧悬浮目录。

移动端策略为：

• 保留简洁目录
• 必要时用折叠方式显示
• 绝不让目录占据首屏大面积空间

交互规则

常驻回到顶部按钮

页面右下角增加常驻回到顶部按钮。

目标：

• 解决长文场景下的快速回跳问题
• 即使不打开目录，也能迅速回到页面顶端

要求：

• 按钮尺寸明确、位置固定
• 风格与整体页面一致
• 不过度抢眼，但始终可见

滚动体验

正文页的滚动体验应优先保证连续阅读，不增加多余粘性元素。

默认应避免：

• 多个粘性区块同时固定
• 侧栏与目录同时强粘附
• 页面滚动过程中有明显突兀的跳动

视觉方向

本轮视觉方向已经明确放弃“多卡片拼装”。

应转向：

• 连续页面壳
• 大块面版式
• 克制的分隔线
• 更少但更稳的背景层次
• 正文主列优先

具体要求：

• 右侧栏应更像连续专栏，不像三四张独立卡片叠起来
• 正文内容区应尽量保持通篇一致的阅读节奏
• 模块区分主要依赖留白、字体、边框轻分隔和背景轻变化
• 避免重新回到“玻璃卡片满页铺开”的做法

移动端与平板端

虽然本轮重点在桌面端，但必须同时考虑移动端：

• 平板端优先保留正文优先结构
• 右侧稳定信息区在中等宽度下可下移到正文之后
• 移动端正文必须优先于所有侧栏信息
• 移动端 About / 精选内容 / 公众号分发可折叠或顺序下移

移动端不应出现以下问题：

• 首屏被侧栏信息占满
• 目录先于正文出现
• 导航入口和正文信息过度拥挤

实施范围

本轮大概率只需要改以下文件：

• docs/.vuepress/styles/index.scss
• docs/.vuepress/config.js

如首页右侧信息模块需要同步调整，可能顺带涉及：

• docs/README.md

但首页不是本轮主改对象，不应因为文章页重构而重新打开首页大改范围。

非目标

本轮不做以下事情：

• 不推翻首页结构
• 不重做博客列表页和归档页
• 不改动 Decap CMS、Gitea、Webhook、公众号发布脚本
• 不引入大型自定义前端组件体系
• 不做“全站重新设计”

验收标准

如果本轮实现正确，最终文章页应满足：

1. 从首页进入文章页后，读者首先感受到的是文章，而不是主题默认导航
2. 页面不再出现“全站侧栏 + 正文目录”双重抢位
3. 右侧稳定信息区能清楚表达站点身份
4. 目录默认足够轻，不干扰常规文章阅读
5. 面对复杂长文时，目录能力可以升级，但不默认打断阅读
6. 整体版式比当前更接近成熟技术博客文章页，而不是主题默认布局页

下一步

本设计说明确认后，下一步进入实施计划阶段。

实施计划应重点拆解：

• 顶栏文章页布局调整
• 主题默认侧栏去除或弱化
• 正文主区层级重排
• 右侧稳定信息区重组
• 默认目录与复杂目录的双模式规则
• 回到顶部按钮