加入直播:美国东部时间周四上午 11 点,Storybook 9 发布及问答
文档
Storybook Docs

预览和构建文档

Storybook 允许您创建丰富且广泛的文档,这将有助于您和任何其他参与开发过程的利益相关者。开箱即用地为您提供了所需工具,不仅可以编写文档,还可以预览和构建文档。

预览 Storybook 文档

在开发的任何阶段,您都可以预览您编写的文档。当您使用 --docs 标志时,Storybook 允许您生成最终文档的预览。我们建议将其作为新脚本包含在您的 package.json

package.json
{
  "scripts": {
    "storybook-docs": "storybook dev --docs"
  }
}

根据您的配置,当您执行 storybook-docs 脚本时,Storybook 将进入文档模式并生成不同的构建。

它会查找 MDXCSF 中可用的任何 stories,并根据您添加的文档来显示它们...

Storybook in documentation mode

此构建模式与正常的 Storybook 构建有一些注意事项

  • 顶层项目指的是您组件的主要 story。
  • 每个单独的 story 现在都处于扁平显示模式,并带有不同的图标集。这使得您可以专注于文档本身。
  • Storybook 的布局渲染不同。工具栏将不会显示。

发布 Storybook 文档

您也可以像发布 Storybook 一样发布您的文档。您可以将 --docs 标志与 storybook build 命令一起使用。我们同样建议将其作为脚本包含在您的 package.json 文件中

package.json
{
  "scripts": {
    "build-storybook-docs": "storybook build --docs"
  }
}

根据您的配置,当执行 build-storybook-docs 脚本时,Storybook 会再次进入文档模式,生成不同的构建,并将文档输出到 storybook-static 文件夹。

上面提到的注意事项同样适用。

您可以使用任何托管服务商部署您的文档,例如

了解更多关于 Storybook 文档的信息

  • Autodocs 用于为您的 Stories 创建文档
  • MDX 用于自定义您的文档
  • 文档块 用于编写您的文档
  • 发布文档 用于自动化发布您的文档的过程