文档三栏布局Doc Layout

你可能会说

像技术文档那样：左边目录、中间正文、右边本页大纲。

文档三栏布局是一种同时显示整站目录、正文内容和本页大纲的页面结构技术文档常用左侧目录帮助跳转，中间正文承担阅读，右侧大纲标记当前章节。屏幕变窄时可先收起右侧大纲，再把整站目录放进可打开的侧栏；不要在窄屏硬保留三栏，导致正文无法阅读。
先知道
左侧栏布局 Sidebar锚点 Anchor
目录 正文 大纲

什么时候用

  • 三栏职责明确：目录负责跨页面导航，正文承载内容，大纲定位当前章节
    目录正文大纲
  • 左目录有层级，用 导航菜单 Menu 的分组子菜单收纳
    项目全部项目我负责的系统成员设置
  • 右大纲跟随阅读自动高亮当前小节，见 锚点 Anchor
    背景方案风险结论
  • 窄屏逐步折叠：先藏右栏，左栏再收进 抽屉 Drawer
    →

什么时候不用

  • 三栏等宽平分会压缩主要正文，不符合内容优先级
    目录正文大纲
  • 移动端保留三栏：正文可用宽度不足
  • 正文行宽随窗口增长：行长过长会增加阅读负担，应限制正文宽度
  • 大纲几十级全列出，目录比正文还长
    1.11.21.32.12.22.33.13.2
    目录比正文还长
组成结构 · Anatomy
目录正文大纲
组织站点或文档集合的章节与页面入口
页面主要内容区，需要优先保证可读宽度
列出当前页面小节，并标出阅读位置
常见变体 · Variants
三栏完整Full
宽屏技术文档的默认形态
折叠右栏No Outline
中等宽度下先折叠大纲，为正文保留空间
单栏移动端Mobile
窄屏将目录收进抽屉，正文使用单栏
典型使用场景
技术文档
开始
快速开始
安装
配置
部署
快速开始
npx vibekit init my-app
本页大纲
前置要求
三步上手
下一步
帮助中心
帮助分类
账户与登录
账单与退款
隐私与安全
如何重置登录密码？
1打开登录页，点「忘记密码」
2输入注册邮箱，查收验证码
3设置新密码并重新登录
相关文章
修改绑定邮箱
开启两步验证
API 文档
API 参考
认证方式
用户接口
订单接口
错误码
GET /v1/users/{id}
按 ID 查询单个用户的公开资料。
{ "id": "u_1024", "name": "阿梨" }
本页大纲
请求参数
响应示例
错误码
使用手册
使用手册
开箱
连接网络
日常使用
清洁保养
第一步：开箱检查
💡 首次开机请先充电 30 分钟，指示灯变绿再开始使用。
本章节
装箱清单
首次开机
延伸阅读 · 权威出处
目录设计完全指南NN/g ↗