Vibe Docs
{{ link.label }}

{{ activeDocLabel }}

更新于 2026-10-09 · 阅读约 8 分钟 · 适用于帮助中心与设计规范站

这篇虚似帮助说明文档壳怎么读、怎么接。顶栏是悬浮胶囊(品牌、搜索、站点导航),其下左侧是站点目录,中间是正文版心,右侧是本页大纲。整页限宽居中,左栏灰底、右栏白底。

说明:

  • 第一次打开?先看「五分钟上手」,再回来对照本页结构。
  • 可直接 ,再对照左侧目录与本页目录。

这是什么

文档内容壳(docs-shell)是给帮助中心、产品说明和协议长文用的静态骨架。它不是控制台:没有业务侧栏密度,也没有看板或表格占位。你看到的标题、段落、提示条和本页大纲,落地时都应换成真实文档。

和营销站的差别在于:首页、价格页走 marketing-shell / marketing-float;一旦进入「持续阅读」的说明页,就切到本壳。目录按章节分组,当前页高亮,长文靠右侧大纲跳转,避免读者在通栏里左右游走。

适合谁用

如果你负责把零散的 Markdown、操作手册或设计约定收成一个站,这个壳就是默认起点。它假设读者会停留较久,所以版心有宽度上限,行高偏松,目录可以折叠。

  • 设计师:对照示范页核对字号、间距和灰白分区,再把品牌皮套上。
  • 产品经理:用左侧目录排需求说明、FAQ 和协议条目,不必另做后台。
  • 研发:保留三栏骨架,把静态页或 Markdown 渲染结果填进 docs-article。
  • 运营 / 支持:维护更新日志与常见问题;顶栏搜索示意 Ctrl+K,落地时接真实检索。

使用场景

下面几类页面都适合挂在这个壳里。它们共同的特点是「一篇说完一件事」,而不是「一张表管一批数据」。

产品帮助中心

例如安装、快捷键、导入导出。每篇控制在一个主题,目录用「开始使用 / 功能说明 / 常见问题」分组。需要截图时放在正文中,不要把截图墙做成仪表盘。

设计规范与组件约定

说明何时用主按钮、何时用次按钮,令牌叫什么名字。右侧大纲列出本节小标题,方便从「颜色」跳到「圆角」。规范更新后只改正文,壳不用动。

接口说明与变更记录

把请求示例、错误码和版本差异写成连续段落或列表。过长的代码块落地时用站点自己的高亮方案;本示范页只用行内 code 示意。

协议与政策

服务条款、隐私政策一类长文最需要限宽。默认不要通栏铺满,以免一行横跨整屏。页脚放备案、联系方式和文档仓库入口即可。

阅读约定

示范内容是虚似文案,用来撑开排版。点击左侧其它条目只会改标题示意路由,不会切换整篇文章——落地时再按真实 slug 换页。

  • 顶栏「使用文档」表示当前站点分区,不是某一篇文章。
  • 左侧「开始使用」是平铺分组;「搭建指南」等带箭头的是可折叠分组。
  • 右侧「本页目录」只反映当前这篇的小标题,不反映整站目录。
  • 颜色只用主题 token。切暗色后,灰栏与白底会一起反相,不要写死 #fff。

目录与检索

文档站的第一任务是「找得到」。搜索框在悬浮条右侧,靠近站点链接。点开后可按标题关键词过滤目录项;键盘 Ctrl + K(Mac 上为 Command)同样打开。

折叠分组默认收起,避免一屏三十条。若某篇属于折叠组,从搜索结果点进去时,应自动展开该组——本页已按这个规则示意。

当一篇文章短于一屏,右侧大纲仍然保留,这样所有文档页结构一致。落地若某类页面没有小标题,可以隐藏大纲列,但不要改左栏宽度。

落地时替换正文

复制本壳后,删掉这篇虚似文章和引导按钮,只留 docs-article 容器。推荐的最小替换清单:

  • 页标题、更新时间、导语。
  • 各 h2 章节;需要时加 h3,并同步右侧大纲 id。
  • 提示条:仅在「必读」或「即将过时」时保留,不要每篇都放。
  • 页脚链接改成你的仓库、状态页和联系邮箱。

不要把控制台里的筛选条、批量操作或数据卡片搬进正文。那是另一类壳(app-sidebar 等)的工作。

问题反馈

顶栏「意见反馈」目前指向示意链接。落地时接到工单系统、邮箱或社区帖。建议在文末再放一次短链,长文读者不一定滚回顶栏。

反馈里请写清:文档路径、你期望看到的步骤、实际结果。配一张当前页截图会更快。内部文档可以注明「仅公司网络可打开」,避免外链失效。

是否可以在公司内使用

可以。这是静态原型,适合内网帮助站和设计规范站。若需要登录,请把鉴权页放到 login-shell,通过后再进文档壳,不要在本页叠一层口令门。

部署时注意字体与图标已在母版本地化,不要改回 CDN。品牌色跟站点 data-brand 走,文档站与营销站可以共用同一套皮。

下一步

读完本页后,建议按这个顺序继续:环境与安装 → 五分钟上手 → 页面壳选型。若你已经有旧站,先看「从旧站迁移」,再决定目录怎么切。

结构示意到此结束。下面页脚是站点级信息,不属于单篇文章,落地时请改成真实主体名称与链接。

本页目录

© 2026 Vibe Design · 文档内容壳示范

全部框架 更新日志 意见反馈 服务条款
  • 无匹配结果