# 步骤

编辑 Fumadocs、Starlight 和 Prosefly MDX 中的有序操作说明与分步指南。

import ContentEditor from '@/components/editor/ContentEditor.astro';

使用 Prosefly 的 MDX 组件编辑器编辑有序操作步骤，同时保留 Fumadocs、Starlight 或 Prosefly 网站使用的语法。

## 支持的配置

同一个编辑器支持 [Astro](/zh-cn/frameworks/astro/)、[Starlight](/zh-cn/frameworks/starlight/)、[Fumadocs](/zh-cn/frameworks/fumadocs/) 和 [Prosefly](/zh-cn/frameworks/lotus/) 配置。选择与你的网站匹配的配置，即可查看该集成支持的组件语法和编辑控件。

## 可视化编辑

直接编辑各步骤的内容，通过分组的添加操作插入新步骤。单项控件可以将步骤前移、后移或删除。调整内容顺序后，分组会按新的顺序显示步骤。

[可视化编辑器演示](/docs/zh-cn/editor/visual-editor/)展示了步骤组件与普通 Markdown 的编辑。

<ContentEditor content="steps" />

## 源码示例

{/* prettier-ignore */}
```mdx
import { Steps } from '@astrojs/starlight/components';

<Steps>

1. **连接仓库**

   授权包含文档的仓库。

2. **审阅并发布**

   发布前检查正文和导航的修改。

</Steps>
```

## 配置差异

Starlight 和 Prosefly 在 Steps 内使用 Markdown 有序列表。Fumadocs 在 Steps 内使用多个 Step 组件，通常在每项中放置一个标题。请使用与网站组件相匹配的形式。

步骤组件用于说明操作，不会执行操作或记录完成状态。需要复选框时，请使用[任务列表](/docs/zh-cn/editor/markdown/task-list/)。

## 相关 MDX 指南

继续阅读：[标签页](/docs/zh-cn/editor/components/tabs/) · [卡片](/docs/zh-cn/editor/components/card/) · [提示块](/docs/zh-cn/editor/components/callout/).