文件
Storybook 文件

預覽和建置文件

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 文件

  • 自動文件,用於為您的 stories 建立文件
  • MDX,用於自訂您的文件
  • 文件區塊,用於撰寫您的文件
  • 發佈文件,以自動化發佈文件的流程