Storybook 文件
遷移指南：此頁面記錄了最近在 7.0.0 中引入的 Storybook 配置方法，如果您想遷移到這種 Storybook 配置格式，請參考遷移指南。
Storybook 文件將您的 Storybook 故事轉換為世界一流的元件文件。
DocsPage。 您的所有故事都預設取得一個 DocsPage。DocsPage 是您元件故事、文字描述、docgen 註解、屬性表格和程式碼範例的零配置彙總，將其整合到清晰易讀的頁面中。
MDX。 如果您想要更多控制權，MDX 允許您撰寫長篇幅的 markdown 文件，並在同一個檔案中包含故事。您也可以使用它來撰寫純粹的文件頁面，並將其嵌入到 Storybook 中與您的故事一起顯示。
就像 Storybook 一樣，文件支援所有主要的視圖層，包括 React、Vue 3、Angular、HTML、Web 元件、Svelte 以及更多。
繼續閱讀以了解更多
DocsPage
當您安裝文件時，每個故事都會取得一個 DocsPage。DocsPage 從您的故事、元件、原始程式碼和故事中繼資料提取資訊，以建構合理且零配置的預設值。
點擊 Docs 標籤即可查看
如需更多關於其運作方式的資訊，請參閱DocsPage 參考。
MDX
MDX 是一種語法，用於在同一個檔案中並排撰寫長篇幅文件和故事。與提供開箱即用的智慧文件的 DocsPage 相比，MDX 讓您可以完全控制元件文件。
這是一個範例檔案
import { Meta, Story, Canvas } from '@storybook/blocks';
import * as CheckboxStories from './Checkbox.stories';
<Meta title="MDX/Checkbox" of={CheckboxStories} />
# Checkbox
With `MDX` we can include a story for `Checkbox` right in the middle of our
markdown documentation.
<Canvas>
<Story of={CheckboxStories.Unchecked} />
</Canvas>
這是在 Storybook 中呈現的方式
如需更多關於 MDX 的資訊，請參閱MDX 參考。
框架支援
Storybook 文件支援 Storybook 支援的所有視圖層，除了 React Native（目前）。還有一些框架特定的功能，例如屬性表格和內嵌故事渲染。以下頁面擷取了目前支援的狀態
注意： # = 開發中支援
想為您喜愛的框架新增增強功能嗎？請查看此開發指南
安裝
首先新增套件。請確保您的 @storybook/* 套件版本相符
yarn add -D @storybook/addon-docs
文件對 react 有 peer dependency。如果您想以 MDX 撰寫故事，您可能也需要新增此 dependency
yarn add -D react
然後將以下內容新增至您的 .storybook/main.js
export default {
stories: [
'../src/**/*.mdx', // 👈 Add this, to match your project's structure
'../src/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [
'@storybook/addon-docs', // 👈 Also add this
],
};
請務必檢查框架特定的安裝需求
預設選項
addon-docs 預設值有一些配置選項，可用於設定其 babel/webpack 的載入行為。以下是如何使用具有選項的預設值的範例
export default {
addons: [
{
name: '@storybook/addon-docs',
options: {
csfPluginOptions: null,
mdxPluginOptions: {},
},
},
],
};
csfPluginOptions 是一個用於設定 @storybook/csf-plugin 的物件。當設定為 null 時，它會告訴文件完全不執行 csf-plugin，這可以用作最佳化，或者如果您已經在您的 main.js 中使用 csf-plugin。
隨著 7.0 版的發布，不再可以使用
transcludeMarkdown選項將.md檔案直接匯入 Storybook。相反地，我們建議使用Markdown文件區塊，將 Markdown 檔案匯入您的 Storybook 文件中。
TypeScript 設定
從 SB6 開始，TypeScript 為零配置，應可與 SB 文件開箱即用。如需進階配置選項，請參考屬性文件。
更多資源
想了解更多嗎？這裡還有一些關於 Storybook 文件的文章
