程式碼片段貢獻

在文件中新增或更新程式碼片段。此頁面概述程式碼片段的結構。

已記錄的框架

Storybook 維護各種框架的程式碼片段。我們會盡力在框架 API 發展時保持程式碼片段的最新狀態。但要追蹤每個框架中的每個 API 變更非常困難。

我們歡迎社群為程式碼片段做出貢獻。以下是我們提供程式碼片段的框架矩陣。請協助我們為您喜愛的框架新增程式碼片段。

設定

假設您已遵循本機環境指南，您需要做的第一件事是在本機 Storybook monorepo 上建立分支，方法是執行下列命令

git checkout -b code-snippets-for-framework

在新增您的程式碼片段之前，請使用您選擇的編輯器開啟 docs 資料夾。熟悉文件，包括程式碼片段的組織方式及其內容。

然後在 Storybook monorepo 的根資料夾內，執行下列命令

yarn task

選取 同步文件 (sync-docs) 選項，然後輸入您的 frontpage 專案資料夾的路徑。現在，monorepo docs 資料夾內的每個檔案變更都會反映在 src/content/docs 的 frontpage repo 中。

新增您的第一個程式碼片段

現在您已熟悉文件的結構方式，是時候新增程式碼片段了。首先，前往 docs/snippets/ 資料夾，然後為您選擇的框架建立一個新目錄 (例如 ember)。

瀏覽文件，然後尋找您想要貢獻的程式碼片段。例如，在設定頁面上，您應該會看到類似以下內容

// /docs/get-started/setup.md
 
{/* prettier-ignore-start */}
 
<CodeSnippets
  paths={[
    'react/your-component.js.mdx',
    'react/your-component.ts.mdx',
    'angular/your-component.ts.mdx',
    'vue/your-component.3.js.mdx',
    'svelte/your-component.js.mdx',
    'web-components/your-component.js.mdx',
    'solid/your-component.js.mdx',
    'solid/your-component.ts.mdx',
  ]}
/>
 
{/* prettier-ignore-end */}

建立檔案 ember/your-component.js.mdx，類似於其他框架，並參考它。

// /docs/get-started/setup.md
 
{/* prettier-ignore-start */}
 
<CodeSnippets
  paths={[
    'react/your-component.js.mdx',
    'react/your-component.ts.mdx',
    'angular/your-component.ts.mdx',
    'vue/your-component.3.js.mdx',
    'svelte/your-component.js.mdx',
    'web-components/your-component.js.mdx',
    'solid/your-component.js.mdx',
    'solid/your-component.ts.mdx',
    'ember/your-component.js.mdx', //👈🏼 The code snippet you created.
  ]}
/>
 
{/* prettier-ignore-end */}

瀏覽其餘文件並重複此程序。

預覽您的工作

在提交您的貢獻之前，我們建議您根據 Storybook 網站檢查您的工作。這樣做可以避免文件出現最後一分鐘的問題，並且也是維護人員在您提交提取要求後更快合併的好方法。但是，如果沒有這樣做，維護人員會通知您，您的貢獻存在問題。

首先，分叉frontpage repo並在本機複製它。

git clone https://github.com/your-username/frontpage.git

導覽至 frontpage 目錄，然後使用下列命令安裝所需的相依性

yarn

接下來，請確定您已從 Storybook monorepo 執行 同步文件 (sync-docs) 工作。然後，執行下列命令來啟動 Storybook 網站。

yarn start:docs-only

開啟瀏覽器視窗至 https://127.0.0.1:8000，按一下「文件」連結，然後從下拉式選單中選取您的框架。

瀏覽文件並檢查您的工作。

提交您的貢獻

最後，在 Storybook monorepo 中提交、推送並開啟提取要求。新增您所完成工作的清楚描述，其中一位維護人員將引導您完成合併程序。

深入了解如何貢獻 Storybook

• RFC 流程，用於撰寫功能要求
• 程式碼，用於功能和錯誤修正
• 框架，以開始使用新的框架
• 文件，用於改進文件、錯字和澄清
• 範例，用於新的程式碼片段和範例