嵌入 stories
观看视频教程
嵌入 stories，向团队成员和更广泛的开发者社区展示您的工作成果。为了使用嵌入功能，您的 Storybook 必须已发布且公开可访问。
Storybook 开箱即用地支持 <iframe> 嵌入。如果您使用 Chromatic 发布 Storybook，您还可以将 stories 嵌入到 Notion、Medium 以及无数其他支持 oEmbed 标准的平台中。
使用工具栏嵌入 story
使用工具栏嵌入 story，并粘贴已发布的 story 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>不使用工具栏嵌入 story
要嵌入不带 Storybook 工具栏的纯 story，请点击 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 替换为 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>在其他平台上嵌入 stories
每个平台对嵌入的支持程度不同。请查看您所用平台的服务文档，了解他们推荐如何嵌入外部内容。
如何在 Medium 中嵌入
将 Storybook URL 粘贴到您的 Medium 文章中，然后按 Enter 键。嵌入内容将自动调整大小以适应 story 的高度。
在编辑文章时，Medium 会将所有嵌入内容渲染为非交互式。一旦您的文章发布，它将变为交互式。在 Medium 上预览演示。
如何在 Notion 中嵌入
在您的 Notion 文档中，输入 /embed，按 Enter 键，然后粘贴 story URL 作为嵌入链接。您可以根据需要调整嵌入内容的大小。
如何在 Ghost 中嵌入
在您的 Ghost 文章中输入 /html，按 Enter 键，然后粘贴 iframe URL。您可以根据需要通过 width 和 height 属性调整嵌入内容的大小。
