diff --git a/docs/src/content/docs/zh-cn/components/steps.mdx b/docs/src/content/docs/zh-cn/components/steps.mdx new file mode 100644 index 00000000000..67c68c50e4d --- /dev/null +++ b/docs/src/content/docs/zh-cn/components/steps.mdx @@ -0,0 +1,120 @@ +--- +title: 步骤 +description: 了解如何设计任务编号列表的样式,以在 Starlight 中创建分步指南。 +--- + +import { Tabs, TabItem, Steps } from '@astrojs/starlight/components'; + +要设置任务编号列表的样式以创建分步指南,请使用 `` 组件。 + +import Preview from '~/components/component-preview.astro'; + + + + + +1. 创建一个新的 Starlight 项目: + + + + + + ```sh + npm create astro@latest -- --template starlight + ``` + + + + + + ```sh + pnpm create astro --template starlight + ``` + + + + + + ```sh + yarn create astro --template starlight + ``` + + + + + +2. 编写你的第一个文档页面。 + + + + + +## 导入 + +```tsx +import { Steps } from '@astrojs/starlight/components'; +``` + +## 用法 + +使用 `` 组件来设置任务编号列表的样式。 +这对于需要清楚地显示出有关每个步骤的、更复杂的分步指南来说,非常有用。 + +用 `` 将标准的 Markdown 有序列表包裹起来。 +所有常用的 Markdown 语法都适用于 ``。 + + + +````mdx +import { Steps } from '@astrojs/starlight/components'; + + + +1. 将组件导入到 MDX 文件中: + + ```js + import { Steps } from '@astrojs/starlight/components'; + ``` + +2. 用 `` 将你的有序列表包裹起来。 + + +```` + + + +````markdoc +{% steps %} + +1. 将组件导入到 MDX 文件中: + + ```js + import { Steps } from '@astrojs/starlight/components'; + ``` + +2. 用 `` 将你的有序列表包裹起来。 + +{% /steps %} +```` + + + + + +1. 将组件导入到 MDX 文件中: + + ```js + import { Steps } from '@astrojs/starlight/components'; + ``` + +2. 用 `` 将你的有序列表包裹起来。 + + + + + +## `` 的属性 + +**实现:** [`Steps.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Steps.astro) + +`` 组件不接受任何 props。