> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiIyYjNkMGM4My0xNjNmLTQxZmItYWNhMS01OThmMzkzODE0MzAiLCJleHAiOjE3NzgyNjM4ODMsImlhdCI6MTc3ODI2MzU4M30.3-csDpRYArZkYUnj3rCaiUAs3rDDE8GbZXgckF3qYlQ
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# 步骤组件

> 了解如何在 Fern Docs 中使用步骤组件创建带自动编号的顺序教程和操作指南。

`<Steps>` 组件可将顺序内容组织起来，并自动添加编号和锚点链接。可用于教程、操作指南、安装说明，或任何需要按顺序执行的内容。

## 用法

<div>
  <div>
    <Steps>
      <Step>
        登录您的账户并前往 **设置**。
      </Step>

      <Step>
        选择 **修改密码** 并输入新密码。
      </Step>
    </Steps>
  </div>
</div>

```jsx Markdown
<Steps>
  <Step>
    登录您的账户并前往 **设置**。
  </Step>
  <Step>
    选择 **修改密码** 并输入新密码。
  </Step>
</Steps>
```

## 变体

### 带标题的步骤

为步骤添加标题，便于组织和理清思路。

<div>
  <div>
    <Steps>
      <Step title="安装 Plants SDK">
        首先，使用您的包管理器安装 Plants API SDK。
      </Step>

      <Step title="获取您的 garden API 密钥">
        注册 Plants API 账户并生成您的 garden 访问密钥。
      </Step>

      <Step title="初始化 garden 客户端">
        导入并设置 Plants 客户端，开始追踪您的植物。
      </Step>
    </Steps>
  </div>
</div>

```jsx Markdown
<Steps>
  <Step title="安装 Plants SDK">
    首先，使用您的包管理器安装 Plants API SDK。
  </Step>
  <Step title="获取您的 garden API 密钥">
    注册 Plants API 账户并生成您的 garden 访问密钥。
  </Step>
  <Step title="初始化 garden 客户端">
    导入并设置 Plants 客户端，开始追踪您的植物。
  </Step>
</Steps>
```

### 使用 Markdown 标题的步骤

您也可以使用 Markdown 标题来定义步骤，无需 `<Step>` 组件。直接在 `<Steps>` 内放置 `##` 或 `###` 标题，它们将自动转换为带锚点链接的步骤标题。

当设置了 `toc={true}` 时，每个步骤在目录中的位置与其标题级别相对应——`##` 标题出现在第 2 层，`###` 标题出现在第 3 层。

<div>
  <div>
    <Steps toc={true}>
      ## 安装 Plants SDK

      首先，使用您的包管理器安装 Plants API SDK。

      ## 配置您的 API 密钥

      注册 Plants API 账户并生成您的 garden 访问密钥。

      ## 初始化 garden 客户端

      导入并设置 Plants 客户端，开始追踪您的植物。
    </Steps>
  </div>
</div>

```jsx Markdown
<Steps toc={true}>

## 安装 Plants SDK

首先，使用您的包管理器安装 Plants API SDK。

## 配置您的 API 密钥

注册 Plants API 账户并生成您的 garden 访问密钥。

## 初始化 garden 客户端

导入并设置 Plants 客户端，开始追踪您的植物。

</Steps>
```

### 嵌套组件的步骤

步骤可以包含丰富的内容，包括提示框、手风琴、代码块和其他组件。

<div>
  <div>
    <Steps>
      <Step title="检查植物适应性">
        在向 garden 中添加新植物之前，请确认它能够适应您的气候。大多数室内植物喜爱 65-75°F 之间的温度和适中的湿度。
      </Step>

      <Step title="选择浇水计划">
        不同植物有不同的浇水需求。

        <AccordionGroup>
          <Accordion title="多肉植物">
            多肉植物和仙人掌将水分储存在叶片和茎中，因此不需要频繁浇水。每 2-3 周浇一次水，让土壤在两次浇水之间彻底干透。过度浇水是导致多肉植物死亡的最常见原因。
          </Accordion>

          <Accordion title="热带植物">
            像 Monsteras、Pothos 和 Philodendrons 这样的热带植物喜爱持续的湿润。当土壤表层 1 英寸感觉干燥时浇水，通常每周一次。这些植物在湿度较高的环境中长势良好。
          </Accordion>
        </AccordionGroup>
      </Step>

      <Step title="将植物添加到追踪器">
        在系统中记录您的植物，即可获得个性化的护理提醒并跟踪其生长情况。

        <Note>
          请记得包含植物的位置（室内或室外）和光照条件，以便获得准确的护理建议。
        </Note>
      </Step>
    </Steps>
  </div>
</div>

```jsx Markdown
<Steps>
  <Step title="检查植物适应性">
    在向 garden 中添加新植物之前，请确认它能够适应您的气候。大多数室内植物喜爱 65-75°F 之间的温度和适中的湿度。
  </Step>
  <Step title="选择浇水计划">
    不同植物有不同的浇水需求。
    <AccordionGroup>
    <Accordion title="多肉植物">
      多肉植物和仙人掌将水分储存在叶片和茎中，因此不需要频繁浇水。每 2-3 周浇一次水，让土壤在两次浇水之间彻底干透。过度浇水是导致多肉植物死亡的最常见原因。
    </Accordion>
    <Accordion title="热带植物">
      像 Monsteras、Pothos 和 Philodendrons 这样的热带植物喜爱持续的湿润。当土壤表层 1 英寸感觉干燥时浇水，通常每周一次。这些植物在湿度较高的环境中长势良好。
    </Accordion>
    </AccordionGroup>
  </Step>
  <Step title="将植物添加到追踪器">
    在系统中记录您的植物，即可获得个性化的护理提醒并跟踪其生长情况。

    <Note>请记得包含植物的位置（室内或室外）和光照条件，以便获得准确的护理建议。</Note>
  </Step>
</Steps>
```

## 属性

### `<Steps>` 属性

<ParamField path="toc" type="boolean" required={false}>
  是否将步骤包含在目录中。默认为 `false`。

  在 `<Steps>` 内使用 [Markdown 标题](#steps-with-markdown-headings) 时，标题级别决定步骤在目录层级中的位置。`##` 表示第 2 层，`###` 表示第 3 层。
</ParamField>

<ParamField path="tocDepth" type="number" required={false}>
  当启用 `toc` 时，步骤在目录中显示的深度。可选值为 `1`、`2` 或 `3`，默认为 `3`。

  使用 [Markdown 标题](#steps-with-markdown-headings) 时，`tocDepth` 会根据标题级别自动设置。使用 `<Step>` 组件时，请手动设置该属性以控制目录中的嵌套层级。

  ```jsx Markdown
  <Steps toc={true} tocDepth={2}>
    <Step title="第一步">
      此步骤在目录中显示在第 2 层。
    </Step>
    <Step title="第二步">
      此步骤同样显示在第 2 层。
    </Step>
  </Steps>
  ```
</ParamField>

### `<Step>` 属性

<ParamField path="title" type="string" required={false}>
  步骤的可选标题
</ParamField>

<ParamField path="id" type="string" required={false}>
  步骤的唯一 ID。用于链接和导航。如未指定，将自动生成一个 ID。
</ParamField>

<ParamField path="className" type="string" required={false}>
  应用于步骤的额外 CSS 类名
</ParamField>