Docs
Storybook Docs

预览和构建文档

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

¥Storybook allows you to create rich and extensive documentation that will help you and any other stakeholder involved in the development process. Out of the box you have the tooling required to not only write it but also to preview it and build it.

预览 Storybook 的文档

¥Preview Storybook's documentation

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

¥At any point during your development, you can preview the documentation you've written. Storybook allows you to generate a preview of the final documentation when you use the --docs flag. We recommend including it in your package.json as a new script:

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

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

¥Depending on your configuration, when you execute the storybook-docs script. Storybook will be put into documentation mode and will generate a different build.

它将查找 MDXCSF 中可用的任何故事,并根据你添加的文档显示它...

¥It will look for any stories available either in MDX or CSF and based on the documentation you've added it will display it...

Storybook in documentation mode

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

¥There's some caveats to this build mode, as to the normal Storybook build:

  • 顶层项目指的是组件的主要故事。

    ¥The top level item refers to the primary story for your component.

  • 每个单独的故事现在都处于扁平显示模式,带有一组不同的图标。这允许专注于文档本身。

    ¥Each individual story is now in a flattened display mode, with a different set of icons. This allows focus on the documentation itself.

  • Storybook 的布局渲染方式不同。工具栏将不显示。

    ¥Storybook's layout is rendered differently. The toolbar will not be displayed.

发布 Storybook 的文档

¥Publish Storybook's documentation

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

¥You can also publish your documentation the same you would publish your Storybook. You can use the --docs flag with the storybook build command. We recommend as well including it as a script in your package.json file:

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

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

¥Based on the configuration you have, when the build-storybook-docs script is executed, Storybook once again will be put into documentation mode and will generate a different build and output the documentation into the storybook-static folder.

将适用上述相同的注意事项。

¥The same caveats mentioned above will apply.

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

¥You can use any hosting provider to deploy your documentation, for instance:

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

¥Learn more about Storybook documentation

  • 自动文档 用于为你的故事创建文档

    ¥Autodocs for creating documentation for your stories

  • MDX 用于自定义你的文档

    ¥MDX for customizing your documentation

  • 文档块 用于编写你的文档

    ¥Doc Blocks for authoring your documentation

  • 发布文档以自动化发布文档的过程

    ¥Publishing docs to automate the process of publishing your documentation