嵌入故事

觀看影片教學

嵌入故事以向團隊成員和廣大的開發者社群展示您的作品。為了使用嵌入功能，您的 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

嵌入故事

使用工具列嵌入故事

不使用工具列嵌入故事

嵌入文件

在其他平台上嵌入故事