i18n(zh-cn): Update tutorial/*/*.mdx (#7584)

* i18n(zh-cn): Update `tutorial/*.mdx`

* i18n(zh-cn): Update `tutorial/2-pages/*.mdx`

* i18n(zh-cn): Update `tutorial/3-components/*.mdx`

* i18n(zh-cn): Update `tutorial/4-layouts/*.mdx`

* i18n(zh-cn): Update `tutorial/5-astro-api/*.mdx`

* i18n(zh-cn): Update `tutorial/6-islands/*.mdx`

* i18n(zh-cn): Update `3.mdx`

* i18n(zh-cn): Update `4.mdx`

* i18n(zh-cn): Update `2.mdx`

* i18n(zh-cn): Update `3.mdx`

* i18n(zh-cn): Update `2.mdx`

* i18n(zh-cn): Update `2.mdx`

---------

Co-authored-by: liruifengv <liruifeng1024@gmail.com>

src/content/docs/zh-cn/tutorial/1-setup/1.mdx

@@ -11,6 +11,7 @@ import Box from '~/components/tutorial/Box.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - 安装构建 Astro 过程中你可能用到的工具
@@ -49,7 +50,9 @@ v18.14.1
 本教程将使用 **VS Code**，但你可以使用适合你操作系统的任何编辑器。
 :::
 
+<Steps>
 1. [下载并安装 VS Code](https://code.visualstudio.com/#alt-downloads) 或选择的其他代码编辑器。
+</Steps>
 
 <Box icon="question-mark">
 

src/content/docs/zh-cn/tutorial/1-setup/2.mdx

@@ -11,6 +11,7 @@ import Box from '~/components/tutorial/Box.astro';
 import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - 运行 `create astro` 安装向导来创建一个新的 Astro 项目
@@ -22,6 +23,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 创建新 Astro 站点的首选方法是通过我们的 `create astro` 设置向导。
 
+<Steps>
 1. 在终端的命令行中，使用你首选的包管理器运行以下命令：
 
     <PackageManagerTabs>
@@ -60,16 +62,18 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 6. 当提示询问 `Would you like to install dependencies?`（你想现在安装依赖吗？）时输入 `y`（现在安装）。
 
 7. 当提示询问 `Would you like to initialize a new git repository?`（你想要初始化一个新的 Git 仓库吗？）时输入 `y`（要初始化）。
+</Steps>
 
 安装向导完成后，你不再需要此终端。你现在可以打开 VS Code 继续。
 
 ## 在 VS Code 中打开你的项目
 
-1. 打开 VS Code。系统将提示你打开一个文件夹。选择你在安装向导期间创建的文件夹。
+<Steps>
+8. 打开 VS Code。系统将提示你打开一个文件夹。选择你在安装向导期间创建的文件夹。
 
-2. 如果这是你第一次打开 Astro 项目，你应该会看到一条通知，询问你是否要安装推荐的扩展。点击查看推荐扩展，选择 [Astro 语言支持](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)。这将为你的 Astro 代码提供语法提示和自动代码补全功能。
+9. 如果这是你第一次打开 Astro 项目，你应该会看到一条通知，询问你是否要安装推荐的扩展。点击查看推荐扩展，选择 [Astro 语言支持](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)。这将为你的 Astro 代码提供语法提示和自动代码补全功能。
 
-3. 打开 VS Code 终端，可以看到类似如下提示：
+10. 打开 VS Code 终端，可以看到类似如下提示：
 
     ```sh
     user@machine:~/tutorial$
@@ -78,6 +82,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
     :::tip[快捷键]
     按 <kbd>Ctrl + J</kbd>（macOS: <kbd>Cmd ⌘ + J</kbd>）在 VS Code 中打开终端。
     :::
+</Steps>
 
 你现在可以使用 VS Code 的内置的终端，而不是计算机自带的终端程序。
 
@@ -87,7 +92,8 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 ### 启动开发服务
 
-1. 通过在 VS Code 的终端中输入以下命令来启动 Astro 开发服务：
+<Steps>
+11. 通过在 VS Code 的终端中输入以下命令来启动 Astro 开发服务：
 
     <PackageManagerTabs>
       <Fragment slot="npm">
@@ -108,19 +114,23 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
     </PackageManagerTabs>
 
     现在你应该能在终端中看到 Astro 正在以开发模式运行的提示信息。🚀
+</Steps>
 
 ## 查看你网站的预览
 
 你的项目文件包含显示 Astro 网站所需的所有代码，但浏览器负责将你的代码显示为网页。
 
-1. 点击终端窗口中的 `localhost` 链接，查看 Astro 网站的实时预览！
+<Steps>
+12. 点击终端窗口中的 `localhost` 链接，查看 Astro 网站的实时预览！
 
      （如果端口 4321 可用，Astro 默认使用 `http://localhost:4321`。）
 
      以下是 Astro“初始项目”入门网站在浏览器预览中的样子：
 
      ![顶部带有 Astro 字样的空白白页。](/tutorial/minimal.png)
 
+</Steps>
+
 :::tip[Astro 开发服务器]
 
 当 Astro 服务器以开发模式运行时，你将**无法**在终端窗口中运行命令。相反，此窗格会在你预览站点时为你提供反馈。

src/content/docs/zh-cn/tutorial/1-setup/3.mdx

@@ -11,13 +11,15 @@ import Box from '~/components/tutorial/Box.astro';
 import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - 对新网站的第一次编辑
 </PreCheck>
 
 ## 编辑你的主页
 
+<Steps>
 1. 打开你的代码编辑器，然后在资源管理器文件窗口中导航至 `src/pages/index.astro`，并单击文件名打开文件内容。
 
     `index.astro` 文件的内容应该如下所示：
@@ -52,6 +54,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
     ```
 
 3. 检查浏览器预览，你应该会看到你的页面内容已更新。
+</Steps>
 
 恭喜！你现在是一名 Astro 开发人员！
 

src/content/docs/zh-cn/tutorial/1-setup/4.mdx

@@ -9,6 +9,7 @@ import Badge from '~/components/Badge.astro';
 import Checklist from '~/components/Checklist.astro';
 import Box from '~/components/tutorial/Box.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - 将你的项目存储在线上
@@ -24,18 +25,21 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 尽管有几种方法可以将你的本地代码存储在 GitHub 中，但本教程将指导你完成一种不需要在命令行中使用 git 的方法。
 
+<Steps>
 1. 在浏览器中登录 GitHub.com，点击屏幕右上角的 <kbd>+</kbd> 新建一个代码仓库（Repository）。
 
 2. 为你的仓库起一个名称。不必与你的项目文件夹同名。
 
 3. 你将看到一些选项，但无需更改任何默认设置。向下滚动并单击按钮以 <kbd>Create Repository</kbd>（创建仓库）。
 
 4. 你将看到各种后续的选项步骤，但你不需要更改其中的任何一个。记下仓库的地址 `URL`。现在可以不执行任何操作然后退出页面。
+</Steps>
 
 ## 将本地代码提交到 GitHub
 
 在上一节中，你对页面内容进行了更改。这意味着你的项目文件已更改，VS Code 应在 “源” 菜单 `Source Control` 图标顶部显示一个数字。这个源选项卡是你定期去更新 GitHub 上的文件的地方。
 
+<Steps>
 1. 单击 VS Code 中的 “源代码管理” 选项卡 `Source Control` 以查看已更改文件的列表。如果你看到需要安装 `git` 的消息，请按照提供的说明进行操作，然后重新加载 VS Code。
 
 2. 单击提交消息上方的 <kbd>•••</kbd> “3个点” 的菜单并选择 <kbd>Remote</kbd> > <kbd>Add Remote</kbd>。
@@ -49,6 +53,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 6. 你可能会看到一条消息，告诉你没有 “staged” 提交，并询问你是否要暂存它们。单击 <kbd>Always</kbd>（总是）并继续。
 
 7. 最后，更改文件列表应替换为 <kbd>Publish</kbd> 按钮。单击此按钮将你提交的更改发送到 GitHub。
+</Steps>
 
 ### 在 GitHub 上查看你的项目
 

src/content/docs/zh-cn/tutorial/1-setup/5.mdx

@@ -11,6 +11,7 @@ import Box from '~/components/tutorial/Box.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - 将你的 GitHub 仓库添加为新的 Netlify 应用程序
@@ -25,6 +26,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 ## 创建一个新的 Netlify 站点
 
+<Steps>
 1. 如果你还没有账号，请在 [Netlify](https://netlify.com) 创建一个免费账号。
 
      记下你的用户名。你可以在 `https://app.netlify.com/teams/username` 查看仪表板和你创建的网站
@@ -34,6 +36,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
      系统会要求你连接到 Git 提供商。选择 GitHub 并按照屏幕上的步骤验证你的 GitHub 账号。然后，从提供的列表中选择你的 Astro 项目的 GitHub 仓库。
 
 3. 在最后一步，Netlify 将向你显示应用程序的站点设置。对于你的 Astro 项目，默认值应该是正确的，因此你可以向下滚动并单击 <kbd>Deploy site</kbd>。
+</Steps>
 
 恭喜你拥有一个 Astro 网站！
 

src/content/docs/zh-cn/tutorial/1-setup/index.mdx

@@ -9,6 +9,7 @@ description: >-
 ---
 import Checklist from '~/components/Checklist.astro';
 import Box from '~/components/tutorial/Box.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 现在你已经知道你要搭建什么了，是时候来设置你所需的所有工具！
 
@@ -22,23 +23,28 @@ import Box from '~/components/tutorial/Box.astro';
 <summary>按照以下说明操作，然后直接进入第二单元！</summary>
 
 **设置 StackBlitz**
+
+<Steps>
 1. 访问 [astro.new](https://astro.new) 然后点击 `Empty Project` 的 `Open in StackBlitz` 按钮以在 StackBlitz 中打开它。
 
 2. 在右上方点击 `Sign in` 以使用你的 GitHub 账号登录。
 
 3. 在 StackBlitz 编辑器窗口的左上方，点击 `fork` 模板（保存到你自己的账号中）。
 
 4. 等待项目加载完毕，你将看到 `Empty Project` 的实时预览。
+</Steps>
 
 **进行修改**
 
 在文件窗口中，你应该可以看到 `src/pages/index.astro`。点击打开它，按照[编写你的第一行 Astro 代码](/zh-cn/tutorial/1-setup/3/)来修改此文件。
 
 **创建 GitHub 仓库**
 
+<Steps>
 1. 点击文件列表顶部的 <kbd>Connect Repository</kbd> 按钮，输入一个新的仓库名称，然后点击 <kbd>Create repo & push</kbd>。
 
 2. 当你有修改要提交到 GitHub 时，工作区左上方将出现一个 `Commit` 按钮。点击此按钮并输入提交信息 `commit message`，然后它将被提交到你的仓库。
+</Steps>
 
 **部署你的网站**
 

src/content/docs/zh-cn/tutorial/2-pages/1.mdx

@@ -8,6 +8,7 @@ description: |-
 import Checklist from '~/components/Checklist.astro';
 import Box from '~/components/tutorial/Box.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 现在你知道 `.astro` 文件负责你网站上的页面了，是时候来一起新建一个吧！
 
@@ -19,6 +20,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 ## 创建一个新的 `.astro` 文件
 
+<Steps>
 1. 在你的代码编辑器的文件窗口中，导航到 `src/pages/` 文件夹，你会看到现有的 `index.astro` 文件。
 
 2. 在同一文件夹中，创建一个名为 `about.astro` 的新文件。
@@ -30,6 +32,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
     :::
 
 4. 在地址栏中的网站预览的 URL 末尾添加 `/about`，并检查你是否能在那里看到一个页面加载。(例如：`http://localhost:4321/about`)
+</Steps>
 
 现在，你的“关于”页面看起来应该和第一页完全一样，但我们现在要更改一下！
 
@@ -81,9 +84,11 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 <details>
 <summary>给我看一下步骤：</summary>
+<Steps>
 1. 在 `src/pages/blog.astro` 创建一个新文件。
 2. 复制 `index.astro` 的全部内容并将其粘贴到 `blog.astro`。
 3. 在每个页面的顶部[添加第三个页面的导航链接](#添加导航链接)：
+</Steps>
 
 ```astro title="src/pages/index.astro" ins={4}
 <body>
@@ -122,6 +127,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 当你对你的网站预览满意时，**提交**你的修改到 GitHub 的在线仓库。
 
+<Steps>
 1. 在 VS Code 中，预览自上次提交到 GitHub 后有变化的文件。
 
     - 进入左边菜单中的 **Source Control tab**。它应该有一个小小的数字“3”显示。
@@ -133,6 +139,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 3. 单击按钮 <kbd>Sync Changes</kbd> 来同步到 GitHub。
 
 4. 等待几分钟后，访问你的 Netlify URL 以验证你的更改是否已实时发布。
+</Steps>
 
 :::tip[定期提交和部署]
 每次结束工作时都遵循这些步骤！你的更改将在你的 GitHub 仓库中更新。如果你已部署到 Netlify 网站，它将被重新打包并发布。

src/content/docs/zh-cn/tutorial/2-pages/2.mdx

@@ -12,6 +12,7 @@ import Box from '~/components/tutorial/Box.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro'
 import PreCheck from '~/components/tutorial/PreCheck.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 现在你已经使用 `.astro` 文件构建了页面，是时候使用 `.md` 文件编写一些博客文章！
 
@@ -23,6 +24,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 ## 创建你的第一个 `.md` 文件
 
+<Steps>
 1. 在 `src/pages/posts/` 创建一个新目录。
 
 2. 在新的 `/posts/` 文件夹中添加一个新的（空）文件 `post-1.md`。
@@ -32,9 +34,11 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 4. 将浏览器预览 URL 更改为查看 `/posts/post-2`。（这是你尚未创建的页面。）
 
     请注意预览“空”页面和不存在页面时控制台的不同输出。这将有助于你进行故障排查。   
+</Steps>
 
 ## 编写 Markdown 内容
 
+<Steps>
 1. 将以下代码复制或键入到 `post-1.md` 中
 
     ```markdown title="src/pages/posts/post-1.md"
@@ -71,13 +75,15 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 2. 在 `localhost:4321/posts/post-1` 再次查看你的浏览器上的页面预览。你现在应该可以在此页面上看到文章内容。
 
 3. 使用浏览器的开发工具检查此页面。请注意，虽然你没有键入任何 HTML 元素，但你的 Markdown 已转换为 HTML。你可以看到标题、段落和列表项等元素。
+</Steps>
 
 :::note
 文件顶部的信息，在代码块内，称为 frontmatter。此数据（包括标签和文章图像）是 Astro 可以使用的*有关*你的文章的信息。它不会自动出现在页面上，但你稍后会在教程中了解它的作用。
 :::
 
 ## 链接到你的文章
 
+<Steps>
 1. 在 `src/pages/blog.astro` 中使用`<a href=""><a/>`标签链接到你的第一篇文章：
     ```astro title="src/pages/blog.astro" ins={16-18}
     ---
@@ -161,7 +167,8 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 4. 检查你的浏览器预览并确保：
 
-     - `文章1`、`文章2` 和 `文章3` 的所有链接都指向你网站上的工作页面。（如果你发现错误，请检查你在 `blog.astro` 上的链接或你的 Markdown 文件名。）
+     `文章1`、`文章2` 和 `文章3` 的所有链接都指向你网站上的工作页面。（如果你发现错误，请检查你在 `blog.astro` 上的链接或你的 Markdown 文件名。）
+</Steps>
 
 <Box icon="question-mark">
 

src/content/docs/zh-cn/tutorial/2-pages/3.mdx

@@ -12,6 +12,7 @@ import Box from '~/components/tutorial/Box.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 现在你有了一个带有 HTML 内容的多页面网站，是时候来添加一些动态的 HTML 了！
 
@@ -51,6 +52,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 </html>
 ```
 
+<Steps>
 1. 在 frontmatter 中的代码栅栏之间添加以下一行 JavaScript：
 
     ```astro title="src/pages/about.astro" ins={2}
@@ -91,14 +93,16 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
     你只是在你的 `.astro` 文件的两个部分分别定义然后使用了一个**变量**，而不是直接在 HTML 标签中输入文本。
 
 4. 使用同样的模式在 `index.astro`（主页）和 `blog.astro`（我的 Astro 学习博客）创建一个 `pageTitle` 变量。在这两个地方更新这些页面的 HTML，使你的页面标题与每个页面上显示的标题一致。
+</Steps>
 
 :::note[要点]
-- 在你的 Astro 脚本中使用 JavaScript 或 TypeScript 表达式**定义变量**。
-- 在你的 Astro 模板中**使用**这些大括号内的变量来告诉 Astro 你正在使用一些 JavaScript。
+1. 在你的 Astro 脚本中使用 JavaScript 或 TypeScript 表达式**定义变量**。
+2. 在你的 Astro 模板中**使用**这些大括号内的变量来告诉 Astro 你正在使用一些 JavaScript。
 :::
 
 ## 在 Astro 中编写 JavaScript 表达式
 
+<Steps>
 1. 把下面的 JavaScript 添加到你的 frontmatter 的**代码栅栏**之间：
 
       (你可以为自己写一些代码，但本教程将使用以下例子)。
@@ -134,6 +138,8 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
       {skills.map((skill) => <li>{skill}</li>)}
     </ul>
     ```
+</Steps>
+
 :::note[要点]
 1. 编写 Astro 模板非常像编写 HTML，但你可以在其中加入 JavaScript 表达式。
 2. Astro 的 frontmatter 脚本只包含 JavaScript。
@@ -178,6 +184,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 你也可以使用脚本变量来选择是否渲染你的 HTML `<body>`内容中的个别元素。
 
+<Steps>
 1. 在你的 frontmatter 脚本中添加以下几行来定义变量：
 
     ```astro title="src/pages/about.astro" ins={13-15}
@@ -212,6 +219,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
     ```
 
 3. 在进行下一步之前，将你的修改提交到 GitHub。如果你想保存你的工作进度并更新你的实时网站，请随时这样做。
+</Steps>
 
 :::tip
 Astro 的模板语法类似于 JSX 语法。如果你想知道如何在你的 HTML 中使用你的脚本，那么搜索一下 JSX 中是如何做到的，这可能是一个很好的出发点！