Jamdesk Documentation logo

步骤

用于设置流程、教程和故障排除的编号分步指南,支持图标、代码块和嵌套内容。

使用 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/cli
2
初始化项目
jamdesk init
3
启动开发服务器
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: solid

Font Awesome 图标样式。

p | h2 | h3

覆盖父级 Steps 的 titleSize。未设置时继承父级值。

number

手动设置步骤编号(省略时自动分配)。

下一步

组件概览

浏览所有可用组件

MDX 基础

了解如何在 MDX 中使用组件