文档三栏布局Doc Layout

你可能会说

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

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

先知道

左侧栏布局 Sidebar锚点 Anchor

目录正文大纲

你可以这样告诉 AI Agent

请实现文档三栏布局：左栏是跨页面目录，中栏是限宽正文，右栏是当前文章锚点。平板先隐藏右栏，手机把左栏收进抽屉；验证当前页和当前小节高亮不会互相混淆。

什么时候用

三栏职责明确：目录负责跨页面导航，正文承载内容，大纲定位当前章节
目录正文大纲
左目录有层级，用导航菜单 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 分钟，指示灯变绿再开始使用。

本章节

装箱清单

首次开机

技术文档既要切换不同页面，又要在当前长文章内跳章节，桌面空间充足但手机很窄。怎样布局？

A. 左侧放整站目录，中间正文，右侧放本页大纲；窄屏逐步收起两侧B. 三栏始终等宽平分屏幕，手机也完整保留所有目录C. 把整站页面和当前文章小节混进一个长目录，正文铺满剩余区域