嵌入故事

嵌入故事以向队友和整个开发者社区展示你的工作。为了使用嵌入，你的 Storybook 必须已发布并可公开访问。

¥Embed stories to showcase your work to teammates and the developer community at large. In order to use embeds, your Storybook must be published and publicly accessible.

Storybook 开箱即用地支持 <iframe> 嵌入。如果你将 Chromatic 用于 发布 Storybook，你还可以在 Notion、Medium 和无数其他支持 oEmbed 标准的平台中嵌入故事。

¥Storybook supports <iframe> embeds out of the box. If you use Chromatic to publish Storybook, you can also embed stories in Notion, Medium, and countless other platforms that support the oEmbed standard.

使用工具栏嵌入故事

¥Embed a story with the toolbar

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

¥Embed a story with the toolbar, and paste the published story URL. For example:

// 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>

嵌入不带工具栏的故事

¥Embed a story without the toolbar

要嵌入没有 Storybook 工具栏的普通故事，请单击 Storybook 右上角的 "在新标签页中打开画布" 图标以获取画布 URL。例如：

¥To embed a plain story without Storybook's toolbar, click the "open canvas in new tab" icon in the top-right corner of Storybook to get the canvas URL. For example:

// 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>

嵌入文档

¥Embed documentation

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

¥Embed a documentation page by replacing viewMode=story with the uniquely auto-generated documentation entry for the 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>

在其他平台上嵌入故事

¥Embed stories on other platforms

每个平台都有不同级别的嵌入支持。检查你的服务文档，了解他们建议如何嵌入外部内容。

¥Every platform has different levels of embed support. Check the documentation of your service to see how they recommend embedding external content.