故事渲染

在 Storybook 中，你的故事在更大的 Storybook Web 应用内的特定“预览”iframe（也称为 Canvas）中渲染。预览的 JavaScript 构建配置由 builder 配置控制，但你可能还希望为每个故事运行一些代码或直接控制渲染的 HTML 以帮助你的故事正确渲染。

¥In Storybook, your stories render in a particular “preview” iframe (also called the Canvas) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a builder config, but you also may want to run some code for every story or directly control the rendered HTML to help your stories render correctly.

为每个故事运行代码

¥Running code for every story

预览文件 (.storybook/preview.js|ts) 中执行的代码会针对 Storybook 中的每个故事运行。这对于设置全局样式、初始化库或渲染组件所需的任何其他内容很有用。

¥Code executed in the preview file (.storybook/preview.js|ts) runs for every story in your Storybook. This is useful for setting up global styles, initializing libraries, or anything else required to render your components.

以下是如何使用预览文件初始化必须在组件渲染之前运行的库的示例：

¥Here's an example of how you might use the preview file to initialize a library that must run before your components render:

// .storybook/preview.ts
// Replace your-renderer with the renderer you are using (e.g., react, vue3)
import { Preview } from '@storybook/your-renderer';
 
import { initialize } from '../lib/your-library';
 
initialize();
 
const preview: Preview = {
  // ...
};
 
export default preview;

添加到 <head>

¥Adding to <head>

如果你需要向预览 iframe 的 head 添加额外元素，例如加载静态样式表、字体文件或类似内容，你可以创建一个名为 .storybook/preview-head.html 的文件并添加如下标签：

¥If you need to add extra elements to the head of the preview iframe, for instance, to load static stylesheets, font files, or similar, you can create a file called .storybook/preview-head.html and add tags like this:

{/* .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 应用 UI。

¥Storybook will inject these tags into the preview iframe where your components render, not the Storybook application UI.

但是，也可以使用 main.js 文件中定义的预设以编程方式修改预览头 HTML。阅读预设文档了解更多信息。

¥However, it's also possible to modify the preview head HTML programmatically using a preset defined in the main.js file. Read the presets documentation for more information.

添加到 <body>

¥Adding to <body>

有时，你可能需要向 <body> 添加不同的标签。有助于添加一些自定义内容根。

¥Sometimes, you may need to add different tags to the <body>. Helpful for adding some custom content roots.

你可以通过在 .storybook 目录中创建一个名为 preview-body.html 的文件并添加如下标签来实现这一点：

¥You can accomplish this by creating a file called preview-body.html inside your .storybook directory and adding tags like this:

{/*  .storybook/preview-body.html */}
 
<div id="custom-root"></div>

如果在你的项目中使用相对大小（如 rem 或 em），你可以通过向 preview-body.html 添加 style 标签来更新基本 font-size：

¥If using relative sizing in your project (like rem or em), you may update the base font-size by adding a style tag to preview-body.html:

{/* .storybook/preview-body.html */}
 
<style>
  html {
    font-size: 15px;
  }
</style>

Storybook 会将这些标签注入到你的组件渲染的预览 iframe 中，而不是 Storybook 应用 UI。

¥Storybook will inject these tags into the preview iframe where your components render, not the Storybook application UI.

就像你可以自定义预览 head HTML 标签一样，你也可以按照相同的步骤使用预设自定义预览 body。要获取有关如何执行此操作的更多信息，请参阅预设文档。

¥Just like how you have the ability to customize the preview head HTML tag, you can also follow the same steps to customize the preview body with a preset. To obtain more information on how to do this, refer to the presets documentation.