嵌入故事
嵌入故事可以将你的工作展示给队友和整个开发者社区。要使用嵌入功能,你的 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 右上角的“在新标签页中打开 Canvas”图标,获取 Canvas 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 粘贴为嵌入链接。你可以根据需要调整嵌入内容的大小。
如何在 Ghost 中嵌入
在你的 Ghost 文章中输入 /html
,按 Enter 并粘贴 iframe URL。你可以根据需要通过 width 和 height 属性调整嵌入内容的大小。