元数据

使用 Meta 块可以将自定义 MDX 文档页面与组件的故事列表关联。它不渲染任何内容，但在 MDX 文件中起着两个作用

将 MDX 文件关联到组件及其故事，或者
控制侧边栏中未关联文档条目的位置。

{/* 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`

类型：布尔值

确定 MDX 文件是否充当自动文档模板。如果为 true，则 MDX 文件不会像通常那样被索引。

`name`

类型：字符串

设置关联的文档条目的名称。可以通过为每个文件的 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 文件导出

指定关联到此 MDX 文件的 CSF 文件。传递 CSF 文件中的**所有导出**（而不是默认导出！）。

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

使用 of 属性将 MDX 文件关联到组件的故事有两个作用

确保 MDX 内容显示在组件故事列表内的侧边栏中。默认情况下，它的名称将设置为 main.js 中 docs.defaultName（默认为 "Docs"）选项的值。但这可以通过name 属性覆盖。
将组件及其故事关联到 MDX 文件，允许你以“关联”模式使用其他文档块（例如使用 Stories 块）。

of 属性是可选的。如果你不想将特定的 CSF 文件关联到此 MDX 文件，则可以使用 title 属性来控制位置，或者完全省略 Meta，并让自动标题决定其位置。

`title`

类型：字符串

设置一个未关联的 MDX 文件的标题。

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

如果您想更改组件的故事与文档条目排序，请使用故事排序，或者按顺序将特定的 MDX 文件添加到 main.js 中的 stories 字段。

关联与未关联

在 Storybook 中，当文档条目（MDX 文件）通过 Meta 的 of 属性与故事文件关联时，它就被认为是“关联”的。关联的文档条目显示在侧边栏中组件下方的故事列表旁边。

“未关联”的文档条目与故事文件无关，可以通过 Meta 的 title 属性在侧边栏的任何位置显示。