嵌入 Stories

觀看影片教學

嵌入 Stories，向團隊成員和廣大的開發人員社群展示您的作品。若要使用嵌入功能，您的 Storybook 必須已發佈且可公開存取。

Storybook 支援開箱即用的 <iframe> 嵌入。如果您使用 Chromatic 來發佈 Storybook，您也可以將 Stories 嵌入到 Notion、Medium 和其他無數支援 oEmbed 標準的平台中。

使用工具列嵌入 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>

若要嵌入不含 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 作為嵌入連結。您可以視需要調整嵌入大小。

Embed Notion

如何在 Ghost 中嵌入

在您的 Ghost 文章中輸入 /html，按下 Enter 並貼上 iframe URL。您可以視需要透過寬度和高度屬性調整嵌入大小。

Embed Ghost

嵌入 Stories

使用工具列嵌入 Story

不使用工具列嵌入 Story

嵌入文件

在其他平台嵌入 Stories