@intlayer/docs 9.1.3 → 9.2.0

package/docs/zh/intlayer_with_vite+react.md

@@ -71,9 +71,284 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 
 ---
 
-### 第5步：在代码中使用 Intlayer
+## 在 Vite 和 React 应用中分步设置 Intlayer 指南
 
-在整个应用程序中访问您的内容字典：
+<Tabs defaultTab="video">
+  <Tab label="Video" value="video">
+
+<iframe title="The best i18n solution for Vite and React? Discover Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
+
+  </Tab>
+  <Tab label="Code" value="code">
+
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-vite-react-template?file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+  <Tab label="Demo" value="demo">
+
+<iframe
+  src="https://intlayer-vite-react-template.vercel.app"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo - intlayer-vite-react-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+</Tabs>
+
+在 GitHub 上查看 [应用模板](https://github.com/aymericzip/intlayer-vite-react-template)。
+
+<Steps>
+
+<Step number={1} title="安装依赖项">
+
+使用 npm 安装必要的包：
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
+> `--interactive` 标志是可选的。如果你是 AI 代理，请使用 `intlayer-cli init`。
+
+> 此命令将检测你的环境并安装所需的包。例如：
+
+```bash packageManager="npm"
+npm install intlayer react-intlayer
+npm install vite-intlayer --save-dev
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer react-intlayer
+pnpm add vite-intlayer --save-dev
+```
+
+```bash packageManager="yarn"
+yarn add intlayer react-intlayer
+yarn add vite-intlayer --save-dev
+```
+
+```bash packageManager="bun"
+bun add intlayer react-intlayer
+bun add vite-intlayer --dev
+```
+
+- **intlayer**
+  核心包，为配置管理、翻译、[内容声明](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)、转译和 [CLI 命令](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/index.md)提供国际化工具。
+
+- **react-intlayer**
+  将 Intlayer 与 React 应用集成的包。它提供用于 React 国际化的上下文提供者和钩子。
+
+- **vite-intlayer**
+  包含用于将 Intlayer 与 [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production) 集成的 Vite 插件，以及用于检测用户首选语言区域、管理 cookie 和处理 URL 重定向的中间件。
+
+</Step>
+
+<Step number={2} title="配置你的项目">
+
+创建配置文件以配置应用的语言：
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // 你的其他语言区域
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+> 通过此配置文件，你可以设置本地化 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名、禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅 [配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
+
+</Step>
+
+<Step number={3} title="在 Vite 配置中集成 Intlayer">
+
+将 intlayer 插件添加到你的配置中。
+
+```typescript fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayer } from "vite-intlayer";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+> `intlayer()` Vite 插件用于将 Intlayer 与 Vite 集成。它确保构建内容声明文件，并在开发模式中监视它们。它在 Vite 应用中定义 Intlayer 环境变量。此外，它提供别名以优化性能。
+
+</Step>
+
+<Step number={4} title="声明你的内容">
+
+创建和管理你的内容声明以存储翻译：
+
+```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+import type { ReactNode } from "react";
+
+const appContent = {
+  key: "app",
+  content: {
+    viteLogo: t({
+      zh: "Vite 徽标",
+      en: "Vite logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+    reactLogo: t({
+      zh: "React 徽标",
+      en: "React logo",
+      fr: "Logo React",
+      es: "Logo React",
+    }),
+
+    title: "Vite + React",
+
+    count: t({
+      zh: "计数是 ",
+      en: "count is ",
+      fr: "le compte est ",
+      es: "el recuento es ",
+    }),
+
+    edit: t<ReactNode>({
+      zh: (
+        <>
+          编辑 <code>src/App.tsx</code> 并保存以测试 HMR
+        </>
+      ),
+      en: (
+        <>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </>
+      ),
+      fr: (
+        <>
+          Éditez <code>src/App.tsx</code> et enregistrez pour tester HMR
+        </>
+      ),
+      es: (
+        <>
+          Edita <code>src/App.tsx</code> y guarda para probar HMR
+        </>
+      ),
+    }),
+
+    readTheDocs: t({
+      zh: "点击 Vite 和 React 徽标了解更多信息",
+      en: "Click on the Vite and React logos to learn more",
+      fr: "Cliquez sur les logos Vite et React pour en savoir plus",
+      es: "Haga clic en los logotipos de Vite y React para obtener más información",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+```json fileName="src/app.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "app",
+  "content": {
+    "viteLogo": {
+      "nodeType": "translation",
+      "translation": {
+        "zh": "Vite 徽标",
+        "en": "Vite logo",
+        "fr": "Logo Vite",
+        "es": "Logo Vite"
+      }
+    },
+    "reactLogo": {
+      "nodeType": "translation",
+      "translation": {
+        "zh": "React 徽标",
+        "en": "React logo",
+        "fr": "Logo React",
+        "es": "Logo React"
+      }
+    },
+    "title": {
+      "nodeType": "translation",
+      "translation": {
+        "zh": "Vite + React",
+        "en": "Vite + React",
+        "fr": "Vite + React",
+        "es": "Vite + React"
+      }
+    },
+    "count": {
+      "nodeType": "translation",
+      "translation": {
+        "zh": "计数是 ",
+        "en": "count is ",
+        "fr": "le compte est ",
+        "es": "el recuento es "
+      }
+    },
+    "edit": {
+      "nodeType": "translation",
+      "translation": {
+        "zh": "编辑 src/App.tsx 并保存以测试 HMR",
+        "en": "Edit src/App.tsx and save to test HMR",
+        "fr": "Éditez src/App.tsx et enregistrez pour tester HMR",
+        "es": "Edita src/App.tsx y guarda para probar HMR"
+      }
+    },
+    "readTheDocs": {
+      "nodeType": "translation",
+      "translation": {
+        "zh": "点击 Vite 和 React 徽标了解更多信息",
+        "en": "Click on the Vite and React logos to learn more",
+        "fr": "Cliquez sur les logos Vite et React pour en savoir plus",
+        "es": "Haga clic en los logotipos de Vite y React para obtener más información"
+      }
+    }
+  }
+}
+```
+
+> 你的内容声明可以定义在应用的任何地方，只要它们包含在 `contentDir` 目录中（默认为 `./src`）。并匹配内容声明文件扩展名（默认为 `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`）。
+
+> 有关更多详细信息，请参阅 [内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
+
+> 如果你的内容文件包含 TSX 代码，你应该考虑在内容文件中导入 `import React from "react";`。
+
+</Step>
+
+<Step number={5} title="在代码中使用 Intlayer">
+
+在整个应用中访问你的内容字典：
 
 ```tsx {5,9} fileName="src/App.tsx" codeFormat={["typescript", "esm"]}
 import { useState, type FC } from "react";
@@ -122,7 +397,7 @@ const App: FC = () => (
 export default App;
 ```
 
-> 如果您想在字符串属性中使用内容，例如 `alt`、`title`、`href`、`aria-label` 等，必须调用函数的值，如下所示：
+> 如果你想在 `string` 属性中使用你的内容，例如 `alt`、`title`、`href`、`aria-label` 等，你可以使用函数的值，如下所示：
 
 > ```html
 > <img src="{content.image.src.value}" alt="{content.image.value}" />
@@ -130,15 +405,15 @@ export default App;
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-> 要了解有关 `useIntlayer` 钩子的更多信息，请参阅[文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useIntlayer.md)。
+> 要了解更多关于 `useIntlayer` 钩子的信息，请参阅 [文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useIntlayer.md)。
 
-> 如果您的应用程序已经存在，您可以结合使用 [Intlayer 编译器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/compiler.md) 和 [提取命令](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/extract.md) 在一秒钟内转换成干个组件。
+> 如果你的应用已经存在，你可以使用 [Intlayer 编译器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/compiler.md)以及 [extract 命令](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/extract.md)在瞬间转换数千个组件。
 
-<Steps>
+</Step>
 
-<Step number={6} title="更改内容的语言">
+<Step number={6} title="更改内容的语言" isOptional={true}>
 
-要更改内容的语言，可以使用 `useLocale` 钩子提供的 `setLocale` 函数。该函数允许您设置应用程序的语言环境并相应地更新内容。
+要更改内容的语言，你可以使用 `useLocale` 钩子提供的 `setLocale` 函数。此函数允许你设置应用的语言区域并相应地更新内容。
 
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -149,19 +424,21 @@ const LocaleSwitcher: FC = () => {
   const { setLocale } = useLocale();
 
   return (
-    <button onClick={() => setLocale(Locales.English)}>切换语言到英语</button>
+    <button onClick={() => setLocale(Locales.English)}>
+      Change Language to English
+    </button>
   );
 };
 ```
 
-> 要了解有关 `useLocale` 钩子的更多信息，请参阅[文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useLocale.md)。
+> 要了解更多关于 `useLocale` 钩子的信息，请参阅 [文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useLocale.md)。
 
 </Step>
 
-<Step number={7} title="为您的应用程序添加本地化路由">
+<Step number={7} title="将本地化路由添加到你的应用" isOptional={true}>
 
-此步骤的目的是为每种语言创建唯一的路由。这对于 SEO 和 SEO 友好的 URL 非常有用。
-示例：
+此步骤的目的是为每种语言创建唯一的路由。这对于 SEO 和 SEO 友好的 URL 很有用。
+例如：
 
 ```plaintext
 - https://example.com/about
@@ -169,31 +446,31 @@ const LocaleSwitcher: FC = () => {
 - https://example.com/fr/about
 ```
 
-> 默认情况下，默认语言的路由不会添加前缀。如果您想为默认语言添加前缀，可以在配置中将 `middleware.prefixDefault` 选项设置为 `true`。更多信息请参见[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
+> 默认情况下，默认语言区域的路由没有前缀。如果你想为默认语言区域加前缀，你可以在配置中设置 `middleware.prefixDefault` 选项为 `true`。有关更多信息，请参阅 [配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
 
-要为您的应用添加本地化路由，您可以创建一个 `LocaleRouter` 组件，包裹应用的路由并处理基于语言的路由。以下是使用 [React Router](https://reactrouter.com/home) 的示例：
+要将本地化路由添加到你的应用，你可以创建一个 `LocaleRouter` 组件，该组件包装你应用的路由并处理基于语言区域的路由。以下是使用 [React Router](https://reactrouter.com/home) 的示例：
 
 ```tsx fileName="src/components/LocaleRouter.tsx" codeFormat={["typescript", "esm"]}
 import { localeMap } from "intlayer"; // 来自 'intlayer' 的实用函数和类型
-import type { FC, PropsWithChildren } from "react"; // React 中函数组件和属性的类型
-import { IntlayerProvider } from "react-intlayer"; // 国际化上下文提供者
-import { BrowserRouter, Route, Routes } from "react-router-dom"; // 用于管理导航的路由组件
+import type { FC, PropsWithChildren } from "react"; // React 功能组件和 props 的类型
+import { IntlayerProvider } from "react-intlayer"; // 国际化上下文的提供者
+import { BrowserRouter, Route, Routes } from "react-router-dom"; // 用于管理导航的路由器组件
 
 /**
- * 一个设置特定语言路由的路由组件。
- * 它使用 React Router 来管理导航并渲染本地化组件。
+ * 设置特定于语言区域的路由的路由器组件。
+ * 它使用 React Router 来管理导航和渲染本地化的组件。
  */
 export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
   <BrowserRouter>
     <Routes>
       {localeMap(({ locale, urlPrefix }) => (
         <Route
-          // 路由模式用于捕获语言环境（例如 /en/，/fr/）并匹配所有后续路径
+          // 路由模式以捕获语言区域（例如 /en/、/fr/）并匹配所有后续路径
           path={`${urlPrefix}/*`}
           key={locale}
           element={
             <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
-          } // 使用语言环境管理包装子组件
+          } // 用语言区域管理包装子元素
         />
       ))}
     </Routes>
@@ -201,9 +478,9 @@ export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
 );
 ```
 
-> 注意：如果您使用 `routing.mode: 'no-prefix' | 'search-params'`，您可能不需要使用 `localeMap` 函数。
+> 注意：如果你使用 `routing.mode: 'no-prefix' | 'search-params'`，你可能不需要使用 `localeMap` 函数。
 
-然后，您可以在应用中使用 `LocaleRouter` 组件：
+然后，你可以在应用中使用 `LocaleRouter` 组件：
 
 ```tsx fileName="src/App.tsx" codeFormat={["typescript", "esm"]}
 import { LocaleRouter } from "./components/LocaleRouter";
@@ -218,9 +495,11 @@ const App: FC = () => (
 );
 ```
 
-同时，您还可以使用 `intlayerProxy` 为您的应用程序添加服务器端路由。该插件将根据 URL 自动检测当前语言环境并设置相应的语言环境 Cookie。如果未指定语言环境，插件将根据用户浏览器的语言偏好确定最合适的语言环境。如果未检测到任何语言环境，它将重定向到默认语言环境。
+同时，你还可以使用 `intlayerProxy` 为你的应用添加服务端路由。此插件将根据 URL 自动检测当前语言区域并设置适当的语言区域 cookie。如果未指定语言区域，该插件将根据用户的浏览器语言偏好确定最合适的语言区域。如果未检测到语言区域，它将重定向到默认语言区域。
+
+> 注意，要在生产环境中使用 `intlayerProxy`，你需要将 `vite-intlayer` 包从 `devDependencies` 转移到 `dependencies`。
 
-> 请注意，要在生产环境中使用 `intlayerProxy`，您需要将 `vite-intlayer` 包从 `devDependencies` 切换到 `dependencies`。
+> 从 Intlayer v9 开始，`intlayerProxy()` 被直接捆绑到 `intlayer()` 插件中，并通过 `routing.enableProxy` 选项（默认为 `true`）启用。如下所示单独注册现在是可选的 — 为了向后兼容和需要控制插件顺序的设置而保留。设置 `routing.enableProxy: false` 以选择退出。请参阅 [v9 发布说明](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/releases/v9.md)。
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { defineConfig } from "vite";
@@ -242,9 +521,9 @@ export default defineConfig({
 
 </Step>
 
-<Step number={8} title="在语言切换时更改 URL">
+<Step number={8} title="当语言区域改变时改变 URL" isOptional={true}>
 
-要在语言切换时更改 URL，可以使用 `useLocale` 钩子提供的 `onLocaleChange` 属性。同时，可以使用 `react-router-dom` 中的 `useLocation` 和 `useNavigate` 钩子来更新 URL 路径。
+要在语言区域改变时改变 URL，你可以使用 `useLocale` 钩子提供的 `onLocaleChange` 属性。同时，你可以使用 `react-router-dom` 中的 `useLocation` 和 `useNavigate` 钩子来更新 URL 路径。
 
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat={["typescript", "esm"]}
 import { useLocation, useNavigate } from "react-router-dom";
@@ -258,13 +537,13 @@ import { useLocale } from "react-intlayer";
 import { type FC } from "react";
 
 const LocaleSwitcher: FC = () => {
-  const { pathname, search } = useLocation(); // 获取当前的 URL 路径。例如：/fr/about?foo=bar
+  const { pathname, search } = useLocation(); // 获取当前 URL 路径。例如：/fr/about?foo=bar
   const navigate = useNavigate();
 
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (locale) => {
-      // 构建带有更新后语言环境的 URL
-      // 例如: /es/about?foo=bar
+      // 使用更新后的语言区域构造 URL
+      // 例如：/es/about?foo=bar
       const pathWithLocale = getLocalizedUrl(`${pathname}${search}`, locale);
 
       // 更新 URL 路径
@@ -288,19 +567,19 @@ const LocaleSwitcher: FC = () => {
             key={localeItem}
           >
             <span>
-              {/* 语言环境 - 例如 FR */}
+              {/* 语言区域 - 例如 FR */}
               {localeItem}
             </span>
             <span>
-              {/* 该语言环境中的语言名称 - 例如 Français */}
+              {/* 使用其自己的语言区域的语言 - 例如 Français */}
               {getLocaleName(localeItem, locale)}
             </span>
             <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* 当前语言环境中的语言名称 - 例如当当前语言环境设置为 Locales.SPANISH 时显示 Francés */}
+              {/* 使用当前语言区域的语言 - 例如当前语言区域设置为 Locales.SPANISH 时的 Francés */}
               {getLocaleName(localeItem)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* 英文中的语言名称 - 例如 French */}
+              {/* 英文中的语言 - 例如 French */}
               {getLocaleName(localeItem, Locales.ENGLISH)}
             </span>
           </a>
@@ -318,25 +597,25 @@ const LocaleSwitcher: FC = () => {
 > - [`getLocalizedUrl` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getLocalizedUrl.md)
 > - [`getHTMLTextDir` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getHTMLTextDir.md)
 > - [`hrefLang` 属性](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
-> - [`lang` 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/lang)
-> - [`dir` 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/dir)
-> - [`aria-current` 属性](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-current)
+> - [`lang` 属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
+> - [`dir` 属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
+> - [`aria-current` 属性](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
-以下是更新后的**步骤9**，增加了解释并优化了代码示例：
+以下是更新的 **步骤 9**，包含添加的解释和精炼的代码示例：
 
 ---
 
 </Step>
 
-<Step number={9} title="切换HTML的语言和方向属性">
+<Step number={9} title="切换 HTML 语言和方向属性" isOptional={true}>
 
-当您的应用程序支持多语言时，更新 `<html>` 标签的 `lang` 和 `dir` 属性以匹配当前语言环境非常重要。这样做可以确保：
+当你的应用支持多种语言时，至关重要的是更新 `<html>` 标签的 `lang` 和 `dir` 属性以匹配当前语言区域。这样做可以确保：
 
-- **无障碍访问**：屏幕阅读器和辅助技术依赖正确的 `lang` 属性来准确发音和解释内容。
-- **文本渲染**：`dir`（方向）属性确保文本以正确的顺序呈现（例如，英语为从左到右，阿拉伯语或希伯来语为从右到左），这对于可读性至关重要。
-- **搜索引擎优化（SEO）**：搜索引擎使用 `lang` 属性来确定页面的语言，有助于在搜索结果中提供正确的本地化内容。
+- **可访问性**：屏幕阅读器和辅助技术依赖于正确的 `lang` 属性来准确发音和解释内容。
+- **文本渲染**：`dir`（方向）属性确保文本以适当的顺序呈现（例如，英文为从左到右，阿拉伯文或希伯来文为从右到左），这对于可读性至关重要。
+- **SEO**：搜索引擎使用 `lang` 属性来确定你的页面的语言，帮助在搜索结果中提供正确的本地化内容。
 
-通过在语言环境更改时动态更新这些属性，您可以确保所有支持语言的用户都能获得一致且无障碍的体验。
+通过在语言区域改变时动态更新这些属性，你可以为所有支持的语言的用户保证一致和可访问的体验。
 
 #### 实现该 Hook