Story 渲染

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

为每个故事运行代码

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

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

.storybook/preview.ts

// 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 的文件，并添加类似以下的标签

.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 中。

然而，也可以通过在 main.js 文件中定义的预设来以编程方式修改预览 head HTML。有关更多信息，请阅读预设文档。

添加到 <body>

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

您可以通过在 .storybook 目录中创建一个名为 preview-body.html 的文件，并添加类似以下的标签来完成此操作

.storybook/preview-body.html

<div id="custom-root"></div>

如果您的项目使用相对单位（如 rem 或 em）进行尺寸设置，您可以通过向 preview-body.html 添加一个 style 标签来更新基础 font-size

.storybook/preview-body.html

<style>
  html {
    font-size: 15px;
  }
</style>

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

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