代码片段贡献

在文档中添加或更新代码片段。此页面概述了代码片段的结构。

¥Add or update the code snippets in the documentation. This page outlines how the code snippets are structured.

文档框架

¥Documented frameworks

Storybook 维护 各种框架 的代码片段。随着框架 API 的发展，我们会尝试使它们保持最新状态。但跟踪每个框架中的每个 API 更改很棘手。

¥Storybook maintains code snippets for a variety of frameworks. We try to keep them up to date as framework APIs evolve. But it's tricky to keep track of every API change in every framework.

我们欢迎社区对代码片段做出贡献。以下是我们有代码片段的框架矩阵。帮助我们为你最喜欢的框架添加代码片段。

¥We welcome community contributions to the code snippets. Here's a matrix of the frameworks we have snippets for. Help us add snippets for your favorite framework.

设置

¥Setup

假设你已经关注了 本地环境指南，你需要做的第一件事就是通过运行以下命令在本地 Storybook monorepo 上创建一个分支：

¥Assuming you've already followed the local environment guide, the first thing you need to do is create a branch on your local Storybook monorepo by running the following command:

git checkout -b code-snippets-for-framework

在添加代码片段之前，请使用你选择的编辑器打开 docs 文件夹。熟悉文档，包括代码片段的组织方式及其内容。

¥Before adding your snippets, open the docs folder with your editor of choice. Get familiarized with the documentation, including how the snippets are organized and their contents.

然后在 Storybook monorepo 的根文件夹中，运行以下命令：

¥Then inside the root folder of the Storybook monorepo, run the following command:

yarn task

选择选项 Synchronize documentation (sync-docs) 并输入你的 frontpage 项目文件夹的路径。现在 monorepo docs 文件夹内的每个文件更改都将反映在 src/content/docs 的 frontpage repo 中。

¥Select the option Synchronize documentation (sync-docs) and type the path of your frontpage project folder. Now every file change inside the monorepo docs folder will be reflected in the frontpage repo at src/content/docs.

添加你的第一个代码片段

¥Add your first snippet

现在你已经熟悉了文档的结构，是时候添加代码片段了。首先，转到 docs/snippets/ 文件夹并为你选择的框架创建一个新目录（例如，ember）。

¥Now that you're familiar with how the documentation is structured, it's time to add the code snippets. First, go to the docs/snippets/ folder and create a new directory for your framework of choice (e.g., ember).

浏览文档并查找你愿意贡献的代码片段。例如，在 设置页面 上，你应该看到类似以下内容：

¥Browse the documentation and look for the code snippets you're willing to contribute. For example, on the setup page, you should see something similar to:

// /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，类似于其他框架，并引用它。

¥Create the file ember/your-component.js.mdx, similar to the other frameworks, and reference it.

// /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 */}

查看其余文档并重复该过程。

¥Go through the rest of the documentation and repeat the process.

预览你的工作

¥Preview your work

在提交你的贡献之前，我们建议你根据 Storybook 网站检查你的工作。这样做可以防止文档在最后一刻出现问题，也是维护人员在提交拉取请求后更快地合并的好方法。但是，如果不这样做，维护者之一将通知你你的贡献存在问题。

¥Before submitting your contribution, we advise you to check your work against the Storybook website. Doing this prevents last-minute issues with the documentation and is also an excellent way for the maintainers to merge faster once you submit the pull request. However, failing to do so will lead one of the maintainers to notify you that your contribution has an issue.

首先分叉 frontpage repo 并在本地克隆。

¥Start by forking frontpage repo and cloning it locally.

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

导航到 frontpage 目录并使用以下命令安装所需的依赖：

¥Navigate to the frontpage directory and install the required dependencies with the following command:

yarn

接下来，确保你已从 Storybook monorepo 运行 Synchronize documentation (sync-docs) 任务。然后，执行以下命令启动 Storybook 网站。

¥Next, make sure that you have running the Synchronize documentation (sync-docs) task from Storybook monorepo. Then, execute the following command to launch the Storybook website.

yarn start:docs-only

打开浏览器窗口到 http://localhost:8000，单击文档链接，然后从下拉列表中选择你的框架。

¥Open a browser window to http://localhost:8000, click the Docs link, and select your framework from the dropdown.

查看文档并检查你的工作。

¥Go through the documentation and check your work.

提交你的贡献

¥Submit your contribution

最后，在 Storybook monorepo 中提交、推送并打开拉取请求。添加你所做工作的清晰描述，其中一位维护人员将指导你完成合并过程。

¥Finally, commit, push and open a pull request in the Storybook monorepo. Add a clear description of the work you've done, and one of the maintainers will guide you through the merge process.

了解有关为 Storybook 做贡献的更多信息

¥Learn more about contributing to Storybook

• RFC 流程 用于编写功能请求

  ¥RFC process for authoring feature requests

• 代码 用于功能和错误修复

  ¥Code for features and bug fixes

• 框架 用于开始使用新框架

  ¥Frameworks to get started with a new framework

• 文档 用于文档改进、拼写错误和澄清

  ¥Documentation for documentation improvements, typos, and clarifications

• 示例 提供有关新代码片段和示例

  ¥Examples for new snippets and examples