编写内容组件

步骤组件

以 Markdown 格式查看

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

用法

1

登录您的账户并前往 设置。

2

选择 修改密码 并输入新密码。

Markdown
1<Steps>
2  <Step>
3    登录您的账户并前往 **设置**。
4  </Step>
5  <Step>
6    选择 **修改密码** 并输入新密码。
7  </Step>
8</Steps>

变体

带标题的步骤

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

1

安装 Plants SDK

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

2

获取您的 garden API 密钥

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

3

初始化 garden 客户端

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

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

使用 Markdown 标题的步骤

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

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

1

安装 Plants SDK

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

2

配置您的 API 密钥

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

3

初始化 garden 客户端

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

Markdown
1<Steps toc={true}>
2
3## 安装 Plants SDK
4
5首先，使用您的包管理器安装 Plants API SDK。
6
7## 配置您的 API 密钥
8
9注册 Plants API 账户并生成您的 garden 访问密钥。
10
11## 初始化 garden 客户端
12
13导入并设置 Plants 客户端，开始追踪您的植物。
14
15</Steps>

嵌套组件的步骤

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

1

检查植物适应性

在向 garden 中添加新植物之前，请确认它能够适应您的气候。大多数室内植物喜爱 65-75°F 之间的温度和适中的湿度。

2

选择浇水计划

不同植物有不同的浇水需求。

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

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

3

将植物添加到追踪器

在系统中记录您的植物，即可获得个性化的护理提醒并跟踪其生长情况。

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

属性

<Steps> 属性

toc
boolean

是否将步骤包含在目录中。默认为 false。

在 <Steps> 内使用 Markdown 标题 时，标题级别决定步骤在目录层级中的位置。## 表示第 2 层，### 表示第 3 层。

tocDepth
number

当启用 toc 时，步骤在目录中显示的深度。可选值为 1、2 或 3，默认为 3。

使用 Markdown 标题 时，tocDepth 会根据标题级别自动设置。使用 <Step> 组件时，请手动设置该属性以控制目录中的嵌套层级。

Markdown
1<Steps toc={true} tocDepth={2}>
2  <Step title="第一步">
3    此步骤在目录中显示在第 2 层。
4  </Step>
5  <Step title="第二步">
6    此步骤同样显示在第 2 层。
7  </Step>
8</Steps>

<Step> 属性

title
string

步骤的可选标题

id
string

步骤的唯一 ID。用于链接和导航。如未指定，将自动生成一个 ID。

className
string

应用于步骤的额外 CSS 类名