步骤

要为任务编号列表设置样式以创建分步指南，请使用 <Steps> 组件。

预览

1. 创建一个新的 Starlight 项目

   npm

   npm create astro@latest -- --template starlight

   pnpm

   pnpm create astro --template starlight

   Yarn

   yarn create astro --template starlight

2. 编写你的第一个文档页面。

导入

import { Steps } from '@astrojs/starlight/components';

用法

使用 <Steps> 组件为任务编号列表设置样式。这对于需要清晰突出显示每个步骤的更复杂的分步指南非常有用。

将 <Steps> 包装在标准的 Markdown 有序列表周围。所有常用的 Markdown 语法都适用于 <Steps> 内部。

MDX

import { Steps } from '@astrojs/starlight/components';

<Steps>

1. Import the component into your MDX file:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. Wrap `<Steps>` around your ordered list items.

</Steps>

Markdoc

{% steps %}

1. Import the component into your MDX file:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. Wrap `<Steps>` around your ordered list items.

{% /steps %}

预览

1. 将组件导入到你的 MDX 文件中

   import { Steps } from '@astrojs/starlight/components';

2. 将 <Steps> 包装在你的有序列表项周围。

<Steps> 属性

实现： Steps.astro

<Steps> 组件不接受任何属性。