步骤
用于设置流程、教程和故障排除的编号分步指南,支持图标、代码块和嵌套内容。
使用 Steps 创建清晰的编号操作指南,例如设置和故障排除流程。
用法
<Steps>
<Step title="Install">Add the package.</Step>
<Step title="Configure">Set your options.</Step>
<Step title="Run">Start the build.</Step>
</Steps>
基本步骤
1
安装软件包npm install @jamdesk/cli2
初始化项目jamdesk init3
启动开发服务器jamdesk dev<Steps>
<Step title="Install the package">
```bash
npm install @jamdesk/cli
```
</Step>
<Step title="Initialize your project">
```bash
jamdesk init
```
</Step>
<Step title="Start the dev server">
```bash
jamdesk dev
```
</Step>
</Steps>
不带标题的步骤
Steps 也可以不带标题:
1
从 GitHub 克隆仓库。
2
使用 npm install 安装依赖。
3
运行开发服务器。
<Steps>
<Step>
Clone the repository from GitHub.
</Step>
<Step>
Install dependencies with `npm install`.
</Step>
<Step>
Run the development server.
</Step>
</Steps>
步骤中的丰富内容
每个步骤都可以包含任意内容:
1
配置 API创建配置文件:
config.json
{
"apiKey": "your-api-key",
"endpoint": "https://api.example.com"
}妥善保管 API 密钥!切勿将其提交到版本控制系统。
2
发送第一个请求使用 SDK 发送请求:
const response = await client.getData();
console.log(response);带图标的步骤
使用图标代替数字,以丰富视觉呈现:
克隆仓库
从 GitHub 克隆到本地计算机。
安装依赖
运行包管理器的安装命令。
开始开发
启动开发服务器。
<Steps>
<Step title="Clone the repository" icon="code-branch">
Clone from GitHub to your local machine.
</Step>
<Step title="Install dependencies" icon="download">
Run the package manager install command.
</Step>
<Step title="Start developing" icon="rocket">
Launch the development server.
</Step>
</Steps>
标题大小
在 Steps 容器上使用 titleSize 控制标题层级:
1
第一步
此标题会渲染为 h3 元素。
2
第二步
有助于 SEO 和文档结构。
<Steps titleSize="h3">
<Step title="First Step">
This title renders as an h3 element.
</Step>
<Step title="Second Step">
Useful for SEO and document structure.
</Step>
</Steps>
属性
Steps
p | h2 | h3default: p步骤标题使用的标题元素。
Step
string可选的步骤标题。
string图标名称、URL 或路径(替代步骤编号)。
solid | regular | light | thin | sharp-solid | duotone | brandsdefault: solidFont Awesome 图标样式。
p | h2 | h3覆盖父级 Steps 的 titleSize。未设置时继承父级值。
number手动设置步骤编号(省略时自动分配)。
