文档三栏布局Doc Layout

页面结构

用目录、正文和本页大纲组织文档

先知道

左侧栏布局 Sidebar锚点 Anchor

文档布局常由整站目录、主要正文和本页大纲组成，分别解决去哪里、读什么和读到哪。屏幕变窄时可以先收起大纲，再把整站目录放进可打开的侧栏。

目录正文大纲

什么时候用

三栏各司其职：目录管去哪，正文管看，大纲管读到哪
目录正文大纲
左目录有层级，用导航菜单 Menu 的分组子菜单收纳
项目全部项目我负责的系统成员设置
右大纲跟随阅读自动高亮当前小节，见锚点 Anchor
背景方案风险结论
窄屏逐步折叠：先藏右栏，左栏再收进抽屉 Drawer
→

什么时候不用

三栏等宽平分，正文这个主角反而最挤
目录正文大纲
手机上三栏全保留，正文只剩一条缝
手机上三栏全保留，正文只剩一条缝
正文行宽跟着窗口走，视线来回横移 → 正文也限宽
大纲几十级全列出，目录比正文还长
1.11.21.32.12.22.33.13.2
目录比正文还长

组成结构 · Anatomy

目录正文大纲

1目录TOC整站章节树，管「去哪」

2正文Content页面主角，宽度最大、本身也限宽

3大纲Outline本页小节目录，管「读到哪」

常见变体 · 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 分钟，指示灯变绿再开始使用。

本章节

装箱清单

首次开机