Meta

Meta 區塊用於將自訂 MDX 文件頁面附加至元件的 stories 清單旁邊。它不會呈現任何內容，但在 MDX 檔案中具有兩個用途

將 MDX 檔案附加至元件及其 stories，或
控制側邊欄中未附加文件項目的位置。

{/* ButtonDocs.mdx */}
 
import { Meta } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />

Meta 區塊不會呈現任何可見的內容。

Meta

import { Meta } from '@storybook/blocks';

Meta 是使用下列屬性設定的

`isTemplate`

類型：boolean

決定 MDX 檔案是否作為自動文件範本。若為 true，則不會像平常一樣索引 MDX 檔案。

`name`

類型：string

設定附加文件項目的名稱。您可以在側邊欄中，透過為每個檔案的 Meta 設定不同的名稱，將多個 MDX 檔案附加至同一個元件。

{/* Component.mdx */}
 
import { Meta } from '@storybook/blocks';
import * as ComponentStories from './component.stories';
 
{/* This MDX file is now called "Special Docs" */}
<Meta of={ComponentStories} name="Special Docs" />

`of`

類型：CSF 檔案匯出

指定哪個 CSF 檔案附加至此 MDX 檔案。傳遞來自 CSF 檔案的完整匯出集合 (而非預設匯出！)。

{/* ButtonDocs.mdx */}
 
import { Meta, Story } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />

使用 of 屬性將 MDX 檔案附加至元件的 stories 有兩個用途

確保 MDX 內容顯示在側邊欄元件的 story 清單中。依預設，它將被命名為在 main.js 中設定的 docs.defaultName 選項 (預設為 "Docs") 的任何值。但可以使用name 屬性覆寫此設定。
將元件及其 stories 附加至 MDX 檔案，讓您可以在「附加」模式中使用其他文件區塊 (例如使用 Stories 區塊)。

of 屬性是選用的。如果您不想將特定的 CSF 檔案附加至此 MDX 檔案，您可以選擇使用 title 屬性來控制位置，或完全省略 Meta，讓自動標題決定其位置。

`title`

類型：string

設定未附加 MDX 檔案的標題。

{/* Introduction.mdx */}
 
import { Meta } from '@storybook/blocks';
 
{/* Override the docs entry's location in the sidebar with title */}
<Meta title="path/to/Introduction" />

如果您想變更文件項目與元件 stories 的排序方式，請使用Story 排序，或依順序將特定的 MDX 檔案新增至 main.js 中的 stories 欄位。

已附加與未附加

在 Storybook 中，當文件項目 (MDX 檔案) 透過 Meta 的of 屬性與 story 檔案相關聯時，即為「附加」。附加的文件項目會顯示在側邊欄中，元件下方的 stories 清單旁邊。

「未附加」的文件條目與故事檔案無關聯，並且可以透過 Meta 的 title 屬性，顯示在側邊欄的任何位置。