i18n(zh-cn): Update tutorial/* (#12461)

Co-authored-by: Nin3 <[email protected]>
Co-authored-by: Yan <[email protected]>

Author: 3 people

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

@@ -105,7 +105,7 @@ Astro 的 `<style>` 标签还可以使用 `define:vars={ {...} }` 指令引用 `
     const finished = false;
     const goal = 3;
   
-    const skillColor = "navy";
+    const skillColor = "crimson";
     ---
     ```
 
@@ -125,7 +125,7 @@ Astro 的 `<style>` 标签还可以使用 `define:vars={ {...} }` 指令引用 `
     </style>
     ```
 
-3. 在浏览器预览中查看“关于”页面。你应该看到技能现在是海军蓝色`navy`，由传递给 `define:vars` 指令的 `skillColor` 变量设置。
+3. 在浏览器预览中查看“关于”页面。你应该看到技能现在是深红色，由传递给 `define:vars` 指令的 `skillColor` 变量设置。
 </Steps>
 
 <Box icon="puzzle-piece">
@@ -150,7 +150,7 @@ Astro 的 `<style>` 标签还可以使用 `define:vars={ {...} }` 指令引用 `
     ```
 
  2. 在你的 frontmatter 脚本中添加任何缺失的变量定义，以便你的新 `<style>` 标签成功地将这些样式应用到你的技能列表中：
-    - 文字颜色为海军蓝
+    - 文字颜色为深红色
     - 文本是粗体
     - 列表项全部大写（全部大写字母）
 
@@ -175,7 +175,7 @@ const happy = true;
 const finished = false;
 const goal = 3;
 
-const skillColor = "navy";
+const skillColor = "crimson";
 const fontWeight = "bold";
 const textCase = "uppercase";
 ---

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

@@ -73,7 +73,7 @@ import { Steps } from '@astrojs/starlight/components';
     const finished = false;
     const goal = 3;
 
-    const skillColor = "navy";
+    const skillColor = "crimson";
     const fontWeight = "bold";
     const textCase = "uppercase";
     ---

src/content/docs/zh-cn/tutorial/3-components/3.mdx

@@ -88,12 +88,12 @@ import Badge from "~/components/Badge.astro"
 ## 添加响应式样式
 
 <Steps>
-1. 在 `Navigation.astro` 中使用 CSS 类来控制你的导航链接。将现有的导航链接包裹在一个带有类名 `nav-links` 的 `<div>` 元素中。
+1. 在 `Navigation.astro` 中使用 CSS 类来控制你的导航链接。将现有的导航链接包裹在一个带有类名 `nav-links` 的 `<div>` 元素中，并且把 id 属性设置为 `main-menu`。
 
     ```astro title="src/components/Navigation.astro" ins={3,7}
     ---
     ---
-    <div class="nav-links">
+    <div id="main-menu" class="nav-links">
       <a href="/">首页</a>
       <a href="/about/">关于</a>
       <a href="/blog/">博客</a>
@@ -110,7 +110,7 @@ import Badge from "~/components/Badge.astro"
     首先定义在较小屏幕尺寸上应该渲染的布局！较小的屏幕尺寸需要更简单的布局，然后，调整你的样式以适应较大的设备。如果你先设计复杂情况，那么接下来你反而要努力将其简化。
     :::
 
-    ```css title="src/styles/global.css" ins={23-100}
+    ```css title="src/styles/global.css" ins={23-60}
     html {
       background-color: #f1f5f9;
       font-family: sans-serif;
@@ -137,9 +137,6 @@ import Badge from "~/components/Badge.astro"
 
     .nav-links {
       width: 100%;
-      top: 5rem;
-      left: 48px;
-      background-color: #ff9776;
       display: none;
       margin: 0;
     }
@@ -152,17 +149,14 @@ import Badge from "~/components/Badge.astro"
       font-size: 1.2rem;
       font-weight: bold;
       text-transform: uppercase;
+      color: #0d0950;
     }
 
     .nav-links a:hover,
     .nav-links a:focus {
       background-color: #ff9776;
     }
 
-    .expanded {
-      display: unset;
-    }
-
     @media screen and (min-width: 636px) {
       .nav-links {
         margin-left: 5em;
@@ -176,7 +170,6 @@ import Badge from "~/components/Badge.astro"
         display: inline-block;
         padding: 15px 20px;
       }
-
     }
     ```
 </Steps>

src/content/docs/zh-cn/tutorial/3-components/4.mdx

@@ -12,74 +12,65 @@ import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
 import { Steps } from '@astrojs/starlight/components';
 
-让我们在移动屏幕上添加一个汉堡菜单（Hamburger Menus）以打开和关闭你的导航链接，这需要一些客户端的交互！
+让我们在移动屏幕上添加一个按钮以打开和关闭你的导航菜单，这需要一些客户端的交互！
 
 <PreCheck>
-  - 创建一个汉堡菜单组件
+  - 创建一个菜单组件
   - 编写一个 `<script>` 使你的网站访问者可以打开和关闭导航菜单
   - 将你的 JavaScript 移动到 `.js` 文件中
 </PreCheck>
 
-## 搭建一个汉堡菜单组件
+## 搭建一个菜单组件
 
-创建一个 `<Hamburger />` 组件，用于打开和关闭移动端菜单。
+创建一个 `<Menu />` 组件，用于打开和关闭移动端菜单。
 
 <Steps>
-1. 在 `src/components/` 中创建一个名为 `Hamburger.astro` 的文件。
+1. 在 `src/components/` 中创建一个名为 `Menu.astro` 的文件。
 
-2. 将以下代码复制到你的组件中。这将表示你的三行「汉堡」菜单，在移动设备上打开和关闭导航链接菜单。（稍后你将把新的 CSS 样式添加到 `global.css` 中。）
+2. 将以下代码复制到你的组件中。这将创建一个按钮，用于在移动端切换导航链接的可见性。（稍后你将把新的 CSS 样式添加到 `global.css` 中。）
 
-    ```astro title="src/components/Hamburger.astro"
+    ```astro title="src/components/Menu.astro"
     --- 
     ---
-    <div class="hamburger">
-      <span class="line"></span>
-      <span class="line"></span>
-      <span class="line"></span>
-    </div>
+    <button aria-expanded="false" aria-controls="main-menu" class="menu">
+      Menu
+    </button>
     ```
 
-3. 将这个新的 `<Hamburger />` 组件放置在 `Header.astro` 的 `<Navigation />` 组件之前。
+3. 将这个新的 `<Menu />` 组件放置在 `Header.astro` 的 `<Navigation />` 组件之前。
 
     <details>
     <summary>给我看看代码！</summary>
 
     ```astro title="src/components/Header.astro" ins={2,7}
     ---
-    import Hamburger from './Hamburger.astro';
+    import Menu from './Menu.astro';
     import Navigation from './Navigation.astro';
     ---
     <header>
       <nav>
-        <Hamburger />
+        <Menu />
         <Navigation />
       </nav>
     </header>
     ```
     </details>
 
-4. 为你的 Hamburger 组件添加以下样式：
+4. 为你的 Menu 组件添加以下样式，包括一些响应式样式：
 
-    ```css title="src/styles/global.css" ins={2-13, 56-58}
+    ```css title="src/styles/global.css" ins={2-9, 33-35, 51-53}
     /* 导航样式 */
-    .hamburger {
-      padding-right: 20px;
-      cursor: pointer;
-    }
-
-    .hamburger .line {
-      display: block;
-      width: 40px;
-      height: 5px;
-      margin-bottom: 10px;
-      background-color: #ff9776;
+    .menu {
+      background-color: #0d0950;
+      border: none;
+      color: #fff;
+      font-size: 1.2rem;
+      font-weight: bold;
+      padding: 5px 10px;
     }
 
     .nav-links {
       width: 100%;
-      top: 5rem;
-      left: 48px;
-      background-color: #ff9776;
       display: none;
       margin: 0;
     }
@@ -92,13 +83,15 @@ import { Steps } from '@astrojs/starlight/components';
       font-size: 1.2rem;
       font-weight: bold;
       text-transform: uppercase;
+      color: #0d0950;
     }
 
-    .nav-links a:hover, a:focus {
+    .nav-links a:hover,
+    .nav-links a:focus{
       background-color: #ff9776;
     }
-
-    .expanded {
+  
+    :has(.menu[aria-expanded="true"]) .nav-links {
       display: unset;
     }
 
@@ -116,7 +109,7 @@ import { Steps } from '@astrojs/starlight/components';
         padding: 15px 20px;
       }
 
-      .hamburger {
+      .menu {
         display: none;
       }
     }
@@ -125,24 +118,27 @@ import { Steps } from '@astrojs/starlight/components';
 
 ## 编写你的第一个 script 标签
 
-你的页眉还不具有**交互性**，因为它无法响应用户输入，比如点击汉堡菜单来显示或隐藏导航链接菜单。
+你的页眉还不具有**交互性**，因为它无法响应用户输入，比如点击菜单来显示或隐藏导航链接菜单。
 
 添加一个 `<script>` 标签提供客户端 JavaScript，以「监听」用户事件并做出相应的响应。
 
 <Steps>
 1. 将以下 `<script>` 标签添加到 `index.astro`，就在结束的 `</body>` 标签之前。
 
-    ```astro title="src/pages/index.astro" ins={2-6}
+    ```astro title="src/pages/index.astro" ins={2-9}
       <Footer />
       <script>
-        document.querySelector('.hamburger')?.addEventListener('click', () => {
-          document.querySelector('.nav-links')?.classList.toggle('expanded');
+        const menu = document.querySelector('.menu');
+
+        menu.addEventListener('click', () => {
+          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+          menu.setAttribute('aria-expanded', !isExpanded);
         });
       </script>
     </body>
     ```
 
-2. 再次在各种尺寸下检查你的浏览器预览，并验证你是否在这个页面上拥有一个能够根据屏幕尺寸响应并对用户输入作出响应的正常运作的汉堡菜单。
+2. 再次在各种尺寸下检查你的浏览器预览，并验证你是否在这个页面上拥有一个能够根据屏幕尺寸响应并对用户输入作出响应的正常运作的导航菜单。
 </Steps>
 
 ### 导入一个 `.js` 文件
@@ -153,26 +149,32 @@ import { Steps } from '@astrojs/starlight/components';
 1. 创建 `src/scripts/menu.js`（你将不得不创建一个新的 `/scripts/` 文件夹），并将你的 JavaScript 移动到其中。
 
     ```js title="src/scripts/menu.js"
-    document.querySelector('.hamburger').addEventListener('click', () => {
-      document.querySelector('.nav-links').classList.toggle('expanded');
+    const menu = document.querySelector('.menu');
+
+    menu.addEventListener('click', () => {
+      const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+      menu.setAttribute('aria-expanded', !isExpanded);
     });
     ```
 
 2. 用以下文件导入替换 `index.astro` 中的 `<script>` 标签的内容：
 
-    ```astro title="src/pages/index.astro" ins={7} del={3-5}
+    ```astro title="src/pages/index.astro" ins={10} del={3-8}
       <Footer />
       <script>
-        document.querySelector('.hamburger')?.addEventListener('click', () => {
-          document.querySelector('.nav-links')?.classList.toggle('expanded');
+        const menu = document.querySelector('.menu');
+
+        menu.addEventListener('click', () => {
+          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+          menu.setAttribute('aria-expanded', !isExpanded);
         });
 
         import "../scripts/menu.js";
       </script>
     </body>
     ```
 
-3. 再次在较小的尺寸下检查你的浏览器预览，验证汉堡菜单是否仍然可以打开和关闭导航链接菜单。
+3. 再次在较小的尺寸下检查你的浏览器预览，验证菜单是否仍然可以打开和关闭导航链接菜单。
 
 4. 在你的其他两个页面 `about.astro` 和 `blog.astro` 中添加相同的带有导入的 `<script>`，并验证每个页面上是否有一个响应式、交互式的页眉。
 

src/content/docs/zh-cn/tutorial/3-components/index.mdx

@@ -24,7 +24,7 @@ import Option from '~/components/tutorial/Option.astro';
 - 显示页面链接菜单的导航组件
 - 包含在每个页面底部的页脚组件
 - 在页脚中使用的社交媒体组件，链接到个人资料页面
-- 一个可交互的汉堡包组件，用于在移动设备上切换导航
+- 一个可交互的菜单组件，用于在移动设备上切换导航
 
 
 在此过程中，你将使用 CSS 和 JavaScript 来实现自适应屏幕尺寸变化和用户输入的响应式设计。

src/content/docs/zh-cn/tutorial/6-islands/2.mdx

@@ -29,8 +29,8 @@ import { Steps } from '@astrojs/starlight/components';
     ```astro title="src/components/ThemeIcon.astro"
     ---
     ---
-    <button id="themeToggle">
-      <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <button id="themeToggle" aria-label="Toggle theme">
+      <svg aria-hidden="true" width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
         <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
       </svg>
@@ -49,21 +49,30 @@ import { Steps } from '@astrojs/starlight/components';
     </style>
     ```
 
-2. 将图标添加到 `Header.astro` 中，以便它在所有页面上显示。不要忘记导入该组件。
+2. 在 `Header.astro` 中导入并添加 `<ThemeIcon  />` 组件，以便它在所有页面上显示。将 `<ThemeIcon />` 和 `<Menu />` 都包裹在一个 `<div>` 内部以将它们组合在一起进行样式设置，并按照以下方式添加 `<style>` 标签以提供一些基本样式来改善布局。
 
-     ```astro title="src/components/Header.astro" ins={4,9}
+     ```astro title="src/components/Header.astro" ins={4,8-9,11,16-21}
     ---
-    import Hamburger from './Hamburger.astro';
+    import Menu from './Menu.astro';
     import Navigation from './Navigation.astro';
     import ThemeIcon from './ThemeIcon.astro';
     ---
     <header>
       <nav>
-        <Hamburger />
-        <ThemeIcon />
+        <div>
+          <ThemeIcon />
+          <Menu />
+        </div>
         <Navigation />
       </nav>
     </header>
+    
+    <style>
+      div {
+        display: flex;
+        justify-content: space-between;
+      }
+    </style>
     ```
 
 3. 访问 `http://localhost:4321` 上的浏览器预览，查看图标是否出现在所有页面上。你可以尝试点击它，但你还没有编写脚本使其具有交互性。
@@ -82,12 +91,34 @@ import { Steps } from '@astrojs/starlight/components';
       color: #fff;
     }
 
+    .dark .menu {
+      background-color: #fff;
+      color: #000;
+    }
+
+    .dark .nav-links a:hover,
+    .dark .nav-links a:focus {
+      color: #0d0950;
+    }
+
     .dark .nav-links a {
       color: #fff;
     }
+
+    .dark a {
+      color: #ff9776;
+    }
     ```
 </Steps>
 
+:::tip[检查颜色的可访问性]
+当你更新网站以包含深色模式时，使用的某些颜色可能需要更新。
+
+添加新样式和颜色时，请务必检查渲染的网站，并在必要时进行调整！这可能意味着添加更多 `.dark` CSS 样式规则以在深色模式下显示不同的样式，或者你可能希望更新一些颜色，以便它们在两个主题中同样有效。
+
+在为你的网站创建一组颜色时，请考虑使用可访问性工具，例如对比度检查器。或者，你可以使用浏览器扩展程序对你的网站进行检查，以发现任何潜在问题。
+:::
+
 ## 添加客户端交互性
 
 要为 Astro 组件添加交互性，你可以使用 `<script>` 标签。该脚本可以从 `localStorage` 中检查和设置当前主题，并在单击图标时切换主题。