Storybook 怎么把已发布的 Story 与文档页以 iframe 形式嵌入 Notion 等外部平台

Storybook 怎么把已发布的 Story 与文档页以 iframe 形式嵌入 Notion 等外部平台【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybookStorybook 原生支持通过iframe把单个 story 嵌入到其他页面。如果你的目标是把已发布的 Story 或它的 Docs 文档页嵌进 Notion、Medium、Ghost 等平台需要满足一个前提Storybook 必须已发布并公开可访问。发布到 Chromatic 的 Storybook 还支持 oEmbed 标准粘贴 URL 即可内联渲染发布到其他静态托管服务的则可以直接使用文档给出的 iframe 代码。前提先把 Storybook 发布并公开访问嵌入的前提是拿到一个可公开访问的 Storybook URL所以先完成构建与发布具体步骤见 Publish Storybook。在项目根目录构建静态站点以 npm 为例npm run build-storybook用 Chromatic CLI 发布需先在 Chromatic 注册并生成 project-token把your-project-token替换为你自己的 tokennpx chromatic --project-tokenyour-project-token发布完成后Chromatic 会在终端打印预览链接形如https://random-uuid.chromatic.com。文档示例输出Build 1 published. View it online at https://www.chromatic.com/build?appId...number1.上面两段是文档给出的示例结果你的输出中链接和 build 编号会不同。打开预览链接确认页面可公开访问这个域名就是后面所有嵌入 URL 的前缀。如果你不用 Chromatic构建产物也可以部署到 GitHub Pages、Netlify、AWS S3 等任意静态托管但那样只能走通用的 iframe 嵌入方式下文“组装 iframe 代码”一节oEmbed 直贴 URL 的能力依赖 Chromatic 发布。获取 Story 的 URL文档提供两种取 URL 的方式取决于嵌入时是否保留 Storybook 的工具栏。带工具栏直接用已发布的 story URL在 Storybook 的 toolbar 里嵌入 story把已发布的 story URL 粘贴进去即可。文档中的示例Chromatic 发布地址shadowboxcta--default为 story ID// oEmbed // https://5ccbc373887ca40020446347-wtuhidckxo.chromatic.com/?path/story/shadowboxcta--default不带工具栏从 canvas 页面取 URL如果只想要纯 story 画布、不带 Storybook 工具栏在 Storybook 界面右上角点击 “open canvas in new tab” 图标会得到 canvas URL。文档示例// https://5ccbc373887ca40020446347-wtuhidckxo.chromatic.com/iframe.html?id/story/shadowboxcta--defaultviewModestory注意iframe.html?id...viewModestory这段路径和参数要保留它决定渲染的是 story 视图。组装 iframe 代码拿到上面的 URL 后在 URL 上追加文档指定的查询参数再包一层iframe。以下示例中的域名和 story ID 来自 Embed stories实际使用时替换为你自己发布环境的域名与 story IDwidth、height可按需调整。嵌入 story带工具栏在 story URL 后追加full1shortcutsfalsesingleStorytrueiframe srchttps://5ccbc373887ca40020446347-wtuhidckxo.chromatic.com/?path/story/shadowboxcta--defaultfull1shortcutsfalsesingleStorytrue width800 height260 /iframe嵌入 story不带工具栏使用 canvas URL追加shortcutsfalsesingleStorytrueiframe srchttps://5ccbc373887ca40020446347-wtuhidckxo.chromatic.com/iframe.html?idshadowboxcta--defaultviewModestoryshortcutsfalsesingleStorytrue width800 height200 /iframe嵌入 Docs 文档页文档页与 story 共用同一套iframe.html入口区别在于两处id换成该 story 自动生成的文档条目即在 story ID 后用--拼上docs如shadowboxcta--docsviewModestory替换为viewModedocs。iframe srchttps://5ccbc373887ca40020446347-wtuhidckxo.chromatic.com/iframe.html?idshadowboxcta--docsviewModedocsshortcutsfalsesingleStorytrue width800 height400 /iframe关于追加的参数shortcuts对应 Storybook 的ui.enableShortcuts取false时禁用快捷键full对应全屏显示singleStory标识当前页面是该组件的唯一 story——这些查询参数的可用取值在 features-and-behavior 中有完整表格。在 Notion 等平台中嵌入不同平台的嵌入支持程度不同需以你所用平台的文档为准。Notion在文档中输入/embed按 Enter把 story URL 粘贴为嵌入链接之后可以按需调整嵌入块大小。这是 Chromatic 发布 oEmbed 的路径粘贴的是原始 story URL不需要手写 iframe 代码。Ghost可选分支在文章中输入/html按 Enter粘贴上面组装好的 iframe URL通过width、height属性调整大小。Medium可选分支在文章中直接粘贴 Storybook URL 后按 Enter嵌入块会自动按 story 高度调整。注意编辑状态下 Medium 渲染的嵌入不可交互文章发布后才可交互。验证与限制验证方式按各平台步骤粘贴后嵌入块内应渲染出对应的 story 或文档页且可通过width、heightNotion 为嵌入块自身调整尺寸。嵌入内容必须来自已公开访问的 Storybook本地localhost地址无法用于外部平台。限制 1oEmbed 直贴 URL如 Notion 的/embed仅适用于发布到 Chromatic 的 Storybook发布到其他托管服务时使用通用 iframe 代码。限制 2发布 Storybook 的页面若被搜索引擎抓取会影响检索展示可通过在 config 目录的manager-head.html中配置noindex控制见 Publish Storybook。文档中所有5ccbc373887ca40020446347-wtuhidckxo.chromatic.com域名与shadowboxctastory 均为示例值不代表固定格式要求替换为自己的发布地址与 story ID 即可。【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考