文档页
Documentation Page
别名:文档站帮助文档开发者文档使用手册说明文档API 文档帮助中心页面
这是什么
以阅读为中心的长驻内容页面:一侧是可折叠的文档树导航,正文栏承载标题层级、段落、 代码块与提示框,宽屏下再加页内目录(TOC)标示当前阅读位置。页面靠永久链接与 上一页/下一页串联成站,搜索是第一入口,结构稳定到可以背下来。
交互实验室
试一试,再决定怎么用正在加载实验室…
✓ 适用场景
- 产品文档、API 参考、教程手册
- 内容长期沉淀、需要稳定结构与会深链
- 读者边读边操作、需要代码可复制
✕ 不适用场景
- 时效性强的营销内容(用落地页或博客更合适)
- 需要频繁协作编辑的内容(用编辑器或知识库工具)
- 纯展示型图文页面
常见形式
三栏文档
Three-column Docs
文档树 + 正文 + 页内目录,桌面端标配
侧栏文档
Sidebar Docs
文档树 + 正文两栏,中屏友好
API 参考
API Reference
左描述右代码块的双栏条目式排版
单页手册
Single-page Manual
全部章节纵排一页,靠目录跳转
页面结构
- 01
文档树导航
按版本与章节分组的左侧导航,可折叠、可搜索。
- 02
正文
标题层级清晰、段落短,锚点可分享。
- 03
代码块
语法高亮 + 一键复制,标明语言与文件名。
- 04
页内目录
长文右侧目录,滚动高亮当前小节。
- 05
上下篇
按阅读顺序串联,降低跳转成本。
实现要点
gridgrid-template-columns: 240px minmax(0, 1fr) 180pxposition: stickyoverflow-x: auto三栏用 grid(240px / 1fr / 180px),中屏隐藏 TOC、移动端文档树转为抽屉。 正文最大宽度限制在 70ch 左右保证可读性;代码块横向滚动 + 一键复制按钮; TOC 用 IntersectionObserver 高亮当前章节;每页固定 slug 作为永久链接, 底部渲染 Prev/Next。
相关概念
固定在页面一侧(通常左侧)的垂直导航区,承载产品的主要层级入口。 后台管理系统的事实标准:顶部放品牌与全局搜索,侧边栏放模块树,内容区专注任务。
组件包含组件用"首页 / 分类 / 子类 / 当前页"的层级路径表示用户在信息架构中所处的位置: 每个上级都可点击跳回,末项为当前页不可点。这是防止用户迷路成本最低的手段, 命名源自童话中沿途撒下用来标记归路的面包屑。常置于页面标题上方。
组件包含组件用快捷键(⌘K / Ctrl+K)唤出的浮动搜索面板:输入即筛选命令、页面或内容, 键盘上下选择、回车执行。macOS Spotlight 把它带入大众视野, 现在是效率工具和开发者产品的标配。
组件包含组件用一排可切换的标签把同一区域的内容分成互斥视图:标签头常驻可点击,仅当前 标签对应的面板可见,其余隐藏。适合把高度相关的几类内容压缩在同一区域内 就地切换,避免整页跳转。键盘上用左右方向键在标签间移动,是可访问性的经典范例。
组件包含组件嵌在页面流内、带状态色底色的横条,用于必须被看见的消息:错误、警告、重要通知。 它占据文档流而不是覆盖内容,通常常驻直到问题被处理或用户手动关闭。
组件包含组件