文档
Storybook 文档

预览和构建文档

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

预览 Storybook 的文档

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

{
  "scripts": {
    "storybook-docs": "storybook dev --docs"
  }
}

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

它将查找MDXCSF中可用的任何故事,并根据您添加的文档进行显示……

Storybook in documentation mode

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

  • 顶级项目指的是组件的主要故事。
  • 每个单独的故事现在都处于扁平化的显示模式,并有一组不同的图标。这使得可以专注于文档本身。
  • Storybook 的布局以不同的方式呈现。工具栏将不会显示。

发布 Storybook 的文档

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

{
  "scripts": {
    "build-storybook-docs": "storybook build --docs"
  }
}

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

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

您可以使用任何托管提供商来部署您的文档,例如

详细了解 Storybook 文档

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