嵌入故事

观看视频教程

将故事嵌入到 Storybook 中，以便与团队成员和更广泛的开发者社区分享您的作品。要使用嵌入功能，您的 Storybook 必须发布并公开访问。

Storybook 原生支持 <iframe> 嵌入。如果您使用 Chromatic 来发布 Storybook，您也可以在 Notion、Medium 和无数其他支持 oEmbed 标准的平台上嵌入故事。

使用工具栏嵌入故事，然后粘贴已发布故事的 URL。例如

// oEmbed
https://5ccbc373887ca40020446347-wtuhidckxo.chromatic.com/?path=/story/shadowboxcta--default
 
// iframe embed
<iframe
  src="https://5ccbc373887ca40020446347-wtuhidckxo.chromatic.com/?path=/story/shadowboxcta--default&full=1&shortcuts=false&singleStory=true"
  width="800"
  height="260"
></iframe>

要嵌入没有 Storybook 工具栏的普通故事，请点击 Storybook 右上角的“在新选项卡中打开画布”图标，获取画布 URL。例如

// oEmbed
https://5ccbc373887ca40020446347-wtuhidckxo.chromatic.com/iframe.html?id=/story/shadowboxcta--default&viewMode=story
 
// iframe embed
 <iframe
  src="https://5ccbc373887ca40020446347-wtuhidckxo.chromatic.com/iframe.html?id=shadowboxcta--default&viewMode=story&shortcuts=false&singleStory=true"
  width="800"
  height="200"
></iframe>

嵌入文档

通过将 viewMode=story 替换为故事的唯一自动生成的文档条目来嵌入文档页面。

// oEmbed
https://5ccbc373887ca40020446347-wtuhidckxo.chromatic.com/iframe.html?id=shadowboxcta--docs&viewMode=docs&shortcuts=false&singleStory=true
 
// iframe embed
 <iframe
  src="https://5ccbc373887ca40020446347-wtuhidckxo.chromatic.com/iframe.html?id=shadowboxcta--docs&viewMode=docs&shortcuts=false&singleStory=true"
  width="800"
  height="400"
></iframe>

在其他平台上嵌入故事

每个平台都有不同级别的嵌入支持。查看您服务的文档，了解他们推荐的嵌入外部内容的方式。

如何在 Medium 上嵌入

将 Storybook URL 粘贴到您的 Medium 文章中，然后按 Enter 键。嵌入将自动调整大小以适合故事的高度。

在编辑文章时，Medium 会将所有嵌入渲染为非交互式的。文章发布后，它将变为交互式。在 Medium 上预览演示.

如何在 Notion 上嵌入

在您的 Notion 文档中，键入 /embed，按 Enter 键，然后将故事 URL 粘贴为嵌入链接。您可以根据需要调整嵌入大小。

Embed Notion

如何在 Ghost 上嵌入

在您的 Ghost 文章中键入 /html，按 Enter 键，然后粘贴 iframe URL。您可以根据需要通过宽度和高度属性调整嵌入大小。

Embed Ghost

嵌入故事

使用工具栏嵌入故事

在没有工具栏的情况下嵌入故事

嵌入文档

在其他平台上嵌入故事