故事渲染
在 Storybook 中,你的故事会在 Storybook 主应用程序内的一个特定的“预览” iframe(也称为 Canvas)中渲染。预览的 JavaScript 构建配置由 构建器 配置控制,但你可能还想为每个故事运行一些代码,或直接控制渲染的 HTML,以帮助你的故事正确渲染。
为每个故事运行代码
在预览文件 (.storybook/preview.js|ts
) 中执行的代码会在你的 Storybook 中的每个故事运行时执行。这对于设置全局样式、初始化库或渲染组件所需的任何其他操作非常有用。
这是一个示例,展示如何使用预览文件来初始化必须在组件渲染之前运行的库
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Preview } from '@storybook/your-framework';
import { initialize } from '../lib/your-library';
initialize();
const preview: Preview = {
// ...
};
export default preview;
添加到 <head>
如果你需要在预览 iframe 的 head
中添加额外元素,例如加载静态样式表、字体文件或类似内容,你可以创建一个名为 .storybook/preview-head.html
的文件并添加如下标签
<!--
Pull in static files served from your Static directory or the internet
Example:
`main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts`
directory inside your `public` directory
-->
<link rel="preload" href="/fonts/my-font.woff2" />
<!-- Or you can load custom head-tag JavaScript: -->
<script src="https://use.typekit.net/xxxyyy.js"></script>
<script>
try {
Typekit.load();
} catch (e) {}
</script>
Storybook 会将这些标签注入到用于渲染组件的*预览 iframe* 中,而不是 Storybook 应用程序的用户界面中。
然而,也可以通过在 main.js
文件中定义的预设,以编程方式修改预览 head 的 HTML。请阅读 预设文档 获取更多信息。
添加到 <body>
有时,你可能需要向 <body>
添加不同的标签。这对于添加一些自定义内容根很有帮助。
你可以通过在你的 .storybook
目录下创建一个名为 preview-body.html
的文件并添加如下标签来实现此目的
<div id="custom-root"></div>
如果你的项目中使用了相对单位(例如 rem
或 em
),你可以通过向 preview-body.html
添加一个 style
标签来更新基础的 font-size
<style>
html {
font-size: 15px;
}
</style>
Storybook 会将这些标签注入到用于渲染组件的*预览 iframe* 中,而不是 Storybook 应用程序的用户界面中。
就像你可以自定义预览 head
HTML 标签一样,你也可以按照相同的步骤使用预设来自定义预览 body
。要获取更多关于如何执行此操作的信息,请参阅 预设文档。