Story 渲染

在 Storybook 中，您的 stories 會在較大的 Storybook 網路應用程式內的特定「預覽」iframe（也稱為畫布）中呈現。預覽的 JavaScript 建置設定由建置工具設定控制，但您可能也希望為每個 story 執行一些程式碼，或直接控制呈現的 HTML，以協助您的 stories 正確呈現。

為每個 story 執行程式碼

在預覽檔案 (.storybook/preview.js|ts) 中執行的程式碼會針對 Storybook 中的每個 story 執行。這對於設定全域樣式、初始化函式庫，或呈現元件所需的任何其他事項非常有用。

以下範例說明如何使用預覽檔案來初始化必須在元件呈現之前執行的函式庫

// .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>

如果您需要在預覽 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。若要取得更多關於如何執行此操作的資訊，請參閱預設設定文件。