@intlayer/docs 5.5.11 → 5.6.0

package/docs/zh/intlayer_with_vite+react.md

@@ -1,35 +1,38 @@
 ---
-createdAt: 2025-03-07
-updatedAt: 2025-06-29
-title: 翻译您的 React Native 和 Expo 移动应用（i18n）
-description: 了解如何使您的 React Native 和 Expo 移动应用支持多语言。按照文档进行国际化（i18n）和翻译。
+createdAt: 2024-03-07
+updatedAt: 2024-03-07
+title: 在 Vite + React 中使用 Intlayer 入门
+description: 学习如何使用 Intlayer 为您的 Vite 和 React 应用添加国际化 (i18n)。按照本指南使您的应用支持多语言。
 keywords:
   - 国际化
   - 文档
   - Intlayer
   - Vite
   - React
-  - React Native
+  - i18n
   - JavaScript
 slugs:
   - doc
   - environment
-  - react-native-and-expo
----
+  - vite-and-react
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4---
+
+# 使用 Intlayer 结合 Vite 和 React 开始国际化 (i18n)
 
-# 使用 Intlayer、Vite 和 React 开始国际化（i18n）
+<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"/>
 
 请参阅 GitHub 上的[应用模板](https://github.com/aymericzip/intlayer-vite-react-template)。
 
 ## 什么是 Intlayer？
 
-**Intlayer** 是一个创新的开源国际化（i18n）库，旨在简化现代 Web 应用中的多语言支持。
+**Intlayer** 是一个创新的开源国际化 (i18n) 库，旨在简化现代 Web 应用的多语言支持。
 
 使用 Intlayer，您可以：
 
-- **通过组件级声明式字典轻松管理翻译**。
-- **动态本地化元数据、路由和内容**。
-- **通过自动生成的类型确保 TypeScript 支持**，提升自动补全和错误检测能力。
+- **轻松管理翻译**，使用组件级别的声明式字典。
+- **动态本地化元数据**、路由和内容。
+- **确保 TypeScript 支持**，通过自动生成的类型提升自动补全和错误检测。
 - **享受高级功能**，如动态语言环境检测和切换。
 
 ---
@@ -42,32 +45,32 @@ slugs:
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
-npm install --save-dev vite-intlayer
+npm install vite-intlayer --save-dev
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer react-intlayer
-pnpm add --save-dev vite-intlayer
+pnpm add vite-intlayer --save-dev
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer react-intlayer
-yarn add --save-dev vite-intlayer
+yarn add vite-intlayer --save-dev
 ```
 
 - **intlayer**
 
-  核心包，提供国际化工具，用于配置管理、翻译、[内容声明](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/get_started.md)、转译以及[命令行工具](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_cli.md)。
+  核心包，提供用于配置管理、翻译、[内容声明](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/get_started.md)、转译和[CLI命令](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_cli.md)的国际化工具。
 
 - **react-intlayer**
-  将 Intlayer 集成到 React 应用中的包。它提供了 React 国际化的上下文提供者和钩子。
+  将 Intlayer 集成到 React 应用中的包。它提供了用于 React 国际化的上下文提供者和钩子。
 
 - **vite-intlayer**
-  包括用于将 Intlayer 与 [Vite 打包工具](https://vite.dev/guide/why.html#why-bundle-for-production) 集成的 Vite 插件，以及用于检测用户首选语言环境、管理 Cookie 和处理 URL 重定向的中间件。
+  包含用于将 Intlayer 集成到[Vite 打包工具](https://vite.dev/guide/why.html#why-bundle-for-production)的 Vite 插件，以及用于检测用户首选语言环境、管理 Cookie 和处理 URL 重定向的中间件。
 
-### 第 2 步：配置您的项目
+### 第2步：配置您的项目
 
-创建一个配置文件来配置您的应用程序语言：
+创建一个配置文件来配置您应用程序的语言：
 
 ```typescript fileName="intlayer.config.ts" codeFormat="typescript"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -78,7 +81,7 @@ const config: IntlayerConfig = {
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // 您的其他语言环境
+      // 您的其他语言
     ],
     defaultLocale: Locales.ENGLISH,
   },
@@ -91,16 +94,15 @@ export default config;
 import { Locales } from "intlayer";
 
 /** @type {import('intlayer').IntlayerConfig} */
-// 配置对象，定义国际化设置
 const config = {
   internationalization: {
     locales: [
-      Locales.ENGLISH, // 英语
-      Locales.FRENCH, // 法语
-      Locales.SPANISH, // 西班牙语
-      // 你的其他语言
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // 您的其他语言
     ],
-    defaultLocale: Locales.ENGLISH, // 默认语言为英语
+    defaultLocale: Locales.ENGLISH,
   },
 };
 
@@ -111,40 +113,22 @@ export default config;
 const { Locales } = require("intlayer");
 
 /** @type {import('intlayer').IntlayerConfig} */
-// 配置对象，定义国际化设置
 const config = {
   internationalization: {
     locales: [
-      Locales.ENGLISH, // 英语
-      Locales.FRENCH, // 法语
-      Locales.SPANISH, // 西班牙语
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
       // 你的其他语言
     ],
-    defaultLocale: Locales.ENGLISH, // 默认语言为英语
+    defaultLocale: Locales.ENGLISH,
   },
 };
 
 module.exports = config;
 ```
 
-> 通过此配置文件，您可以设置本地化的 URL、中间件重定向、Cookie 名称、内容声明的位置和扩展名，禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
-
-### 第三步：在您的 Vite 配置中集成 Intlayer
-
-将 intlayer 插件添加到您的配置中。
-
-```typescript fileName="vite.config.ts" codeFormat="typescript"
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-import { intlayerPlugin } from "vite-intlayer";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), intlayerPlugin()],
-});
-```
-
-> 通过此配置文件，您可以设置本地化 URL、中间件重定向、Cookie 名称、内容声明的位置和扩展名、禁用 Intlayer 控制台日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
+> 通过此配置文件，您可以设置本地化的 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名，禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
 
 ### 第三步：在您的 Vite 配置中集成 Intlayer
 
@@ -183,29 +167,6 @@ module.exports = defineConfig({
 });
 ```
 
-> `intlayerPlugin()` 是用于将 Intlayer 集成到 Vite 的插件。它确保构建内容声明文件并在开发模式下监视它们。在 Vite 应用中定义了 Intlayer 环境变量。此外，它还提供别名以优化性能。
-
-### 第四步：声明您的内容
-
-创建并管理您的内容声明以存储翻译：
-
-```tsx fileName="src/app.content.tsx" contentDeclarationFormat="typescript"
-import { t, type Dictionary } from "intlayer";
-import type { ReactNode } from "react";
-
-const appContent = {
-  key: "app",
-  content: {
-    viteLogo: t({
-      en: "Vite logo",
-      fr: "Logo Vite",
-      es: "Logo Vite",
-    }),
-    reactLogo: t({
-      en: "React logo",
-      fr: "Logo React",
-```
-
 > `intlayerPlugin()` Vite 插件用于将 Intlayer 集成到 Vite 中。它确保内容声明文件的构建，并在开发模式下监视这些文件。在 Vite 应用程序中定义了 Intlayer 环境变量。此外，它还提供别名以优化性能。
 
 ### 第4步：声明您的内容
@@ -227,7 +188,7 @@ const appContent = {
     reactLogo: t({
       en: "React logo",
       fr: "Logo React",
-      es: "React 标志",
+      es: "Logo React",
     }),
 
     title: "Vite + React",
@@ -262,7 +223,7 @@ const appContent = {
       es: "Haga clic en los logotipos de Vite y React para obtener más información",
     }),
   },
-} satisfies Dictionary;
+} 满足 Dictionary;
 
 export default appContent;
 ```
@@ -277,13 +238,11 @@ const appContent = {
     viteLogo: t({
       en: "Vite logo",
       fr: "Logo Vite",
-      zh: "Vite 标志",
       es: "Logo Vite",
     }),
     reactLogo: t({
       en: "React logo",
       fr: "Logo React",
-      zh: "React 标志",
       es: "Logo React",
     }),
 
@@ -292,7 +251,6 @@ const appContent = {
     count: t({
       en: "count is ",
       fr: "le compte est ",
-      zh: "计数是 ",
       es: "el recuento es ",
     }),
 
@@ -340,13 +298,11 @@ const appContent = {
       en: "Vite logo",
       fr: "Logo Vite",
       es: "Logo Vite",
-      zh: "Vite 标志",
     }),
     reactLogo: t({
       en: "React logo",
       fr: "Logo React",
       es: "Logo React",
-      zh: "React 标志",
     }),
 
     title: "Vite + React",
@@ -355,7 +311,6 @@ const appContent = {
       en: "count is ",
       fr: "le compte est ",
       es: "el recuento es ",
-      zh: "计数是 ",
     }),
 
     edit:
@@ -381,8 +336,7 @@ const appContent = {
       },
 
     readTheDocs: t({
-      zh: "点击 Vite 和 React 标志以了解更多信息",
-      en: "Click on the Vite and React logos to learn more",
+      en: "点击 Vite 和 React 标志以了解更多信息",
       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",
     }),
@@ -400,7 +354,6 @@ module.exports = appContent;
     "viteLogo": {
       "nodeType": "translation",
       "translation": {
-        "zh": "Vite 标志",
         "en": "Vite logo",
         "fr": "Logo Vite",
         "es": "Logo Vite"
@@ -427,7 +380,7 @@ module.exports = appContent;
     "count": {
       "nodeType": "translation",
       "translation": {
-        "zh": "计数是 ",
+        "zh": "计数为 ",
         "en": "count is ",
         "fr": "le compte est ",
         "es": "el recuento es "
@@ -445,14 +398,17 @@ module.exports = appContent;
     "readTheDocs": {
       "nodeType": "translation",
       "translation": {
-        "zh": "点击 Vite 和 React 标志以了解更多信息"
+        "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,mjx,cjs,cjx}`）。
+> 您的内容声明可以定义在应用程序中的任何位置，只要它们被包含在 `contentDir` 目录中（默认是 `./src`）。并且匹配内容声明文件的扩展名（默认是 `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`）。
 
 > 更多详情，请参阅[内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/get_started.md)。
 
@@ -500,7 +456,7 @@ const AppContent: FC = () => {
   );
 };
 
-const App = () => (
+const App: FC = () => (
   <IntlayerProvider>
     <AppContent />
   </IntlayerProvider>
@@ -659,7 +615,7 @@ const LocaleSwitcher = () => {
 
 ### （可选）步骤 7：为您的应用程序添加本地化路由
 
-此步骤的目的是为每种语言创建唯一的路由。这对于 SEO 以及 SEO 友好的 URL 非常有用。
+此步骤的目的是为每种语言创建唯一的路由。这对于 SEO 和 SEO 友好的 URL 非常有用。
 示例：
 
 ```plaintext
@@ -668,7 +624,7 @@ const LocaleSwitcher = () => {
 - 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) 的示例：
 
@@ -690,21 +646,21 @@ const { internationalization, middleware } = configuration;
 const { locales, defaultLocale } = internationalization;
 
 /**
- * 一个处理本地化的组件，包裹子组件并提供适当的语言环境上下文。
- * 它管理基于 URL 的语言检测和验证。
+ * 一个处理本地化的组件，使用适当的语言环境上下文包裹子组件。
+ * 它管理基于 URL 的语言环境检测和验证。
  */
 const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
   children,
   locale,
 }) => {
-  const { pathname, search } = useLocation(); // 获取当前的 URL 路径
+  const { pathname, search } = useLocation(); // 获取当前的URL路径
 
-  // 确定当前的语言环境，如果未提供则使用默认语言环境
+  // 确定当前的语言环境，如果未提供则回退到默认语言环境
   const currentLocale = locale ?? defaultLocale;
 
   // 移除路径中的语言环境前缀以构建基础路径
   const pathWithoutLocale = getPathWithoutLocale(
-    pathname // 当前的 URL 路径
+    pathname // 当前的URL路径
   );
 
   /**
@@ -722,7 +678,7 @@ const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
       );
     }
 
-    // 使用 IntlayerProvider 包裹子组件，并设置当前语言环境
+    // 使用 IntlayerProvider 包裹子组件并设置当前语言环境
     return (
       <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
     );
@@ -737,13 +693,13 @@ const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
         .filter(
           (locale) => locale.toString() !== defaultLocale.toString() // 排除默认语言环境
         )
-        .includes(currentLocale) // 检查当前语言是否在有效语言列表中
+        .includes(currentLocale) // 检查当前语言环境是否在有效语言列表中
     ) {
-      // 重定向到不带语言前缀的路径
+      // 重定向到无语言前缀的路径
       return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
     }
 
-    // 使用 IntlayerProvider 包裹子组件并设置当前语言
+    // 使用 IntlayerProvider 包裹子组件并设置当前语言环境
     return (
       <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
     );
@@ -766,18 +722,18 @@ export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
             // 路由模式用于捕获语言环境（例如 /en/，/fr/）并匹配所有后续路径
             path={`/${locale}/*`}
             key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // 用语言环境管理包装子组件
+            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // 使用语言环境管理包装子组件
           />
         ))}
 
       {
-        // 如果禁用默认语言环境的前缀，则直接在根路径渲染子组件
+        // 如果禁用默认语言环境前缀，则直接在根路径渲染子组件
         !middleware.prefixDefault && (
           <Route
             path="*"
             element={
               <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // 用语言环境管理包装子组件
+            } // 使用语言环境管理包装子组件
           />
         )
       }
@@ -799,12 +755,13 @@ import {
   useLocation,
 } from "react-router-dom"; // 用于管理导航的路由组件
 
-// 从 Intlayer 中解构配置
+// 从 Intlayer 配置中解构
 const { internationalization, middleware } = configuration;
 const { locales, defaultLocale } = internationalization;
 
 /**
- * 一个处理本地化并用适当的语言环境上下文包裹子组件的组件。
+ * 一个处理本地化的组件，使用适当的语言环境上下文包裹子组件。
+/**
  * 它管理基于 URL 的语言检测和验证。
  */
 const AppLocalized = ({ children, locale }) => {
@@ -813,9 +770,9 @@ const AppLocalized = ({ children, locale }) => {
   // 确定当前语言，如果未提供则回退到默认语言
   const currentLocale = locale ?? defaultLocale;
 
-  // 从路径中移除语言前缀以构建基础路径
+  // 从路径中移除语言前缀以构造基础路径
   const pathWithoutLocale = getPathWithoutLocale(
-    pathname // 当前的 URL 路径
+    pathname // 当前 URL 路径
   );
 
   /**
@@ -862,7 +819,7 @@ const AppLocalized = ({ children, locale }) => {
 };
 
 /**
- * 一个设置语言特定路由的路由组件。
+ * 一个设置特定语言路由的路由组件。
  * 它使用 React Router 来管理导航并渲染本地化组件。
  */
 export const LocaleRouter = ({ children }) => (
@@ -882,7 +839,7 @@ export const LocaleRouter = ({ children }) => (
         ))}
 
       {
-        // 如果禁用默认语言环境前缀，则直接在根路径渲染子组件
+        // 如果禁用默认语言环境的前缀，则直接在根路径渲染子组件
         !middleware.prefixDefault && (
           <Route
             path="*"
@@ -923,7 +880,7 @@ const AppLocalized = ({ children, locale }) => {
   // 确定当前的语言环境，如果未提供则使用默认语言环境
   const currentLocale = locale ?? defaultLocale;
 
-  // 从路径中移除语言环境前缀以构建基础路径
+  // 移除路径中的语言环境前缀以构建基础路径
   const pathWithoutLocale = getPathWithoutLocale(
     pathname // 当前的 URL 路径
   );
@@ -934,7 +891,7 @@ const AppLocalized = ({ children, locale }) => {
   if (middleware.prefixDefault) {
     // 验证语言环境
     if (!locale || !locales.includes(locale)) {
-      // 重定向到带有更新路径的默认语言环境
+      // 重定向到带有默认语言环境的更新路径
       return (
         <Navigate
           to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
@@ -960,7 +917,7 @@ const AppLocalized = ({ children, locale }) => {
         )
         .includes(currentLocale) // 检查当前语言环境是否在有效语言环境列表中
     ) {
-      // 重定向到没有语言前缀的路径
+      // 重定向到不带语言前缀的路径
       return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
     }
 
@@ -987,7 +944,7 @@ const LocaleRouter = ({ children }) => (
             // 路由模式用于捕获语言环境（例如 /en/，/fr/）并匹配所有后续路径
             path={`/${locale}/*`}
             key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // 用本地化管理包装子组件
+            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // 使用本地化管理包装子组件
           />
         ))}
 
@@ -998,7 +955,7 @@ const LocaleRouter = ({ children }) => (
             path="*"
             element={
               <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // 用本地化管理包装子组件
+            } // 使用本地化管理包装子组件
           />
         )
       }
@@ -1046,7 +1003,7 @@ const App = () => (
 );
 ```
 
-同时，您还可以使用 `intLayerMiddlewarePlugin` 为您的应用程序添加服务器端路由。该插件将根据 URL 自动检测当前语言环境并设置相应的语言环境 Cookie。如果未指定语言环境，插件将根据用户浏览器的语言偏好确定最合适的语言环境。如果未检测到任何语言环境，则会重定向到默认语言环境。
+同时，您还可以使用 `intLayerMiddlewarePlugin` 为您的应用程序添加服务器端路由。该插件将根据 URL 自动检测当前语言环境并设置相应的语言环境 Cookie。如果未指定语言环境，插件将根据用户浏览器的语言偏好确定最合适的语言环境。如果未检测到任何语言环境，它将重定向到默认语言环境。
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
@@ -1081,9 +1038,9 @@ module.exports = defineConfig({
 });
 ```
 
-### （可选）步骤 8：当语言环境变化时更改 URL
+### （可选）步骤 8：在语言切换时更改 URL
 
-要在语言环境变化时更改 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"
 import { useLocation, useNavigate } from "react-router-dom";
@@ -1102,7 +1059,7 @@ const LocaleSwitcher: FC = () => {
 
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (locale) => {
-      // 构建带有更新后的语言环境的 URL
+      // 构建带有更新后语言环境的 URL
       // 例如: /es/about?foo=bar
       const pathWithLocale = getLocalizedUrl(`${pathname}${search}`, locale);
 
@@ -1131,15 +1088,15 @@ const LocaleSwitcher: FC = () => {
               {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>
@@ -1195,11 +1152,11 @@ const LocaleSwitcher = () => {
               {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}>
@@ -1230,7 +1187,7 @@ const LocaleSwitcher = () => {
 
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (locale) => {
-      // 构造带有更新后语言环境的 URL
+      // 构建带有更新后的语言环境的 URL
       // 例如：/es/about?foo=bar
       const pathWithLocale = getLocalizedUrl(`${pathname}${search}`, locale);
 
@@ -1259,15 +1216,15 @@ const LocaleSwitcher = () => {
               {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>
@@ -1289,16 +1246,16 @@ const LocaleSwitcher = () => {
 > - [`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)
 
-以下是更新后的**第9步**，增加了说明并优化了代码示例：
+以下是更新后的**步骤9**，增加了解释并优化了代码示例：
 
 ---
 
-### （可选）第9步：切换 HTML 的语言和方向属性
+### （可选）步骤9：切换HTML的语言和方向属性
 
-当您的应用程序支持多语言时，更新 `<html>` 标签的 `lang` 和 `dir` 属性以匹配当前语言环境是至关重要的。这样做可以确保：
+当您的应用程序支持多语言时，更新 `<html>` 标签的 `lang` 和 `dir` 属性以匹配当前语言环境非常重要。这样做可以确保：
 
 - **无障碍访问**：屏幕阅读器和辅助技术依赖正确的 `lang` 属性来准确发音和解释内容。
-- **文本渲染**：`dir`（方向）属性确保文本以正确的顺序呈现（例如，英语为从左到右，阿拉伯语或希伯来语为从右到左），这对可读性至关重要。
+- **文本渲染**：`dir`（方向）属性确保文本以正确的顺序呈现（例如，英语为从左到右，阿拉伯语或希伯来语为从右到左），这对于可读性至关重要。
 - **搜索引擎优化（SEO）**：搜索引擎使用 `lang` 属性来确定页面的语言，有助于在搜索结果中提供正确的本地化内容。
 
 通过在语言环境更改时动态更新这些属性，您可以确保所有支持语言的用户都能获得一致且无障碍的体验。
@@ -1323,7 +1280,7 @@ export const useI18nHTMLAttributes = () => {
   const { locale } = useLocale();
 
   useEffect(() => {
-    // 将语言属性更新为当前的语言环境。
+    // 将语言属性更新为当前语言环境。
     document.documentElement.lang = locale;
 
     // 根据当前语言环境设置文本方向。
@@ -1339,16 +1296,16 @@ import { getHTMLTextDir } from "intlayer";
 
 /**
  * 根据当前语言环境更新 HTML <html> 元素的 `lang` 和 `dir` 属性。
- * - `lang`：告知浏览器和搜索引擎页面的语言。
- * - `dir`：确保正确的阅读顺序（例如，英语为 'ltr'，阿拉伯语为 'rtl'）。
+ * - `lang`：通知浏览器和搜索引擎页面的语言。
+ * - `dir`：确保正确的阅读顺序（例如，英文为 'ltr'，阿拉伯文为 'rtl'）。
  *
- * 此动态更新对于正确的文本渲染、无障碍访问和 SEO 至关重要。
+ * 此动态更新对于正确的文本渲染、无障碍访问和SEO至关重要。
  */
 export const useI18nHTMLAttributes = () => {
   const { locale } = useLocale();
 
   useEffect(() => {
-    // 将语言属性更新为当前语言环境。
+    // 将语言属性更新为当前的语言环境。
     document.documentElement.lang = locale;
 
     // 根据当前语言环境设置文本方向。
@@ -1365,7 +1322,7 @@ const { getHTMLTextDir } = require("intlayer");
 /**
  * 根据当前语言环境更新 HTML <html> 元素的 `lang` 和 `dir` 属性。
  * - `lang`：告知浏览器和搜索引擎页面的语言。
- * - `dir`：确保正确的阅读顺序（例如，英语为 'ltr'，阿拉伯语为 'rtl'）。
+ * - `dir`：确保正确的阅读顺序（例如，英文为 'ltr'，阿拉伯文为 'rtl'）。
  *
  * 这种动态更新对于正确的文本渲染、无障碍访问和 SEO 至关重要。
  */
@@ -1395,10 +1352,36 @@ import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
 import "./App.css";
 
 const AppContent: FC = () => {
-  // 使用该 Hook 根据当前语言环境更新 <html> 标签的 lang 和 dir 属性。
+  // 应用该 Hook，根据当前语言环境更新 <html> 标签的 lang 和 dir 属性。
   useI18nHTMLAttributes();
 
-  // ... 组件的其他部分
+  // ... 组件的其余部分
+};
+
+const App: FC = () => (
+  <IntlayerProvider>
+    <AppContent />
+  </IntlayerProvider>
+);
+
+export default App;
+```
+
+#### 在您的应用程序中使用 Hook
+
+将该 Hook 集成到您的主组件中，以便在语言环境更改时更新 HTML 属性：
+
+```tsx fileName="src/App.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { IntlayerProvider, useIntlayer } from "react-intlayer";
+import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
+import "./App.css";
+
+const AppContent: FC = () => {
+  // 应用该 Hook，根据语言环境更新 <html> 标签的 lang 和 dir 属性。
+  useI18nHTMLAttributes();
+
+  // ... 组件的其余部分
 };
 
 const App: FC = () => (
@@ -1416,7 +1399,7 @@ import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
 import "./App.css";
 
 const AppContent = () => {
-  // 应用该钩子以根据当前语言环境更新 <html> 标签的 lang 和 dir 属性。
+  // 应用该 Hook，根据语言环境更新 <html> 标签的 lang 和 dir 属性。
   useI18nHTMLAttributes();
 
   // ... 组件的其余部分
@@ -1438,7 +1421,7 @@ const { useI18nHTMLAttributes } = require("./hooks/useI18nHTMLAttributes");
 require("./App.css");
 
 const AppContent = () => {
-  // 应用该钩子以根据当前语言环境更新 <html> 标签的 lang 和 dir 属性。
+  // 应用该 Hook，根据语言环境更新 <html> 标签的 lang 和 dir 属性。
   useI18nHTMLAttributes();
 
   // ... 组件的其余部分
@@ -1453,14 +1436,15 @@ const App = () => (
 module.exports = App;
 ```
 
-通过应用这些更改，您的应用将：
+通过应用这些更改，您的应用程序将：
 
 - 确保 **语言** (`lang`) 属性正确反映当前语言环境，这对 SEO 和浏览器行为非常重要。
-- 根据语言环境调整 **文本方向** (`dir`)，提升不同阅读顺序语言的可读性和可用性。
+- 根据语言环境调整 **文本方向** (`dir`)，提升对不同阅读顺序语言的可读性和可用性。
 - 提供更 **无障碍** 的体验，因为辅助技术依赖这些属性以实现最佳功能。
 
 ### （可选）步骤 10：创建本地化链接组件
 
+```tsx fileName="src/App.tsx" codeFormat="typescript"
 // 应用该钩子以根据当前语言环境更新 <html> 标签的 lang 和 dir 属性。
 useI18nHTMLAttributes();
 
@@ -1475,25 +1459,25 @@ const App = () => (
 
 module.exports = App;
 
-````
+```
 
-通过应用这些更改，您的应用程序将：
+通过应用这些更改，您的应用将能够：
 
-- 确保 **语言** (`lang`) 属性正确反映当前语言环境，这对于 SEO 和浏览器行为非常重要。
-- 根据语言环境调整 **文本方向** (`dir`)，提升对不同阅读顺序语言的可读性和可用性。
-- 提供更好的 **无障碍** 体验，因为辅助技术依赖这些属性以实现最佳功能。
+- 确保 **语言** (`lang`) 属性正确反映当前的语言环境，这对于 SEO 和浏览器行为非常重要。
+- 根据语言环境调整 **文本方向** (`dir`)，提升不同阅读顺序语言的可读性和可用性。
+- 提供更好的 **无障碍** 体验，因为辅助技术依赖这些属性来实现最佳功能。
 
 ### （可选）步骤 10：创建本地化链接组件
 
-为了确保您的应用程序的导航遵循当前的语言环境，您可以创建一个自定义的 `Link` 组件。该组件会自动为内部 URL 添加当前语言的前缀。例如，当讲法语的用户点击“关于”页面的链接时，他们会被重定向到 `/fr/about`，而不是 `/about`。
+为了确保您的应用程序的导航尊重当前的语言环境，您可以创建一个自定义的 `Link` 组件。该组件会自动为内部 URL 添加当前语言的前缀。例如，当讲法语的用户点击“关于”页面的链接时，他们会被重定向到 `/fr/about`，而不是 `/about`。
 
 这种行为有几个好处：
 
 - **SEO 和用户体验**：本地化的 URL 有助于搜索引擎正确索引特定语言的页面，并为用户提供其偏好的语言内容。
-- **一致性**：通过在整个应用程序中使用本地化链接，您可以确保导航保持在当前语言环境内，防止意外的语言切换。
+- **一致性**：通过在整个应用中使用本地化链接，您可以确保导航保持在当前语言环境内，防止意外的语言切换。
 - **可维护性**：将本地化逻辑集中在单个组件中简化了 URL 的管理，使您的代码库更易于维护和扩展，随着应用程序的增长。
 
-下面是一个用 TypeScript 实现的本地化 `Link` 组件示例：
+下面是一个使用 TypeScript 实现的本地化 `Link` 组件示例：
 
 ```tsx fileName="src/components/Link.tsx" codeFormat="typescript"
 import { getLocalizedUrl } from "intlayer";
@@ -1518,16 +1502,16 @@ export const checkIsExternalLink = (href?: string): boolean =>
   /^https?:\/\//.test(href ?? "");
 
 /**
- * 一个自定义的 Link 组件，根据当前的语言环境调整 href 属性。
- * 对于内部链接，它使用 `getLocalizedUrl` 在 URL 前添加语言前缀（例如 /fr/about）。
- * 这确保导航保持在相同的语言环境上下文中。
+ * 一个自定义的 Link 组件，根据当前语言环境动态调整 href 属性。
+ * 对于内部链接，使用 `getLocalizedUrl` 在 URL 前添加语言前缀（例如 /fr/about）。
+ * 这样可以确保导航保持在相同的语言环境上下文中。
  */
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   ({ href, children, ...props }, ref) => {
     const { locale } = useLocale();
     const isExternalLink = checkIsExternalLink(href);
 
-    // 如果链接是内部链接且提供了有效的 href，则获取本地化的 URL。
+    // 如果链接是内部链接且 href 有效，则获取本地化的 URL。
     const hrefI18n =
       href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
 
@@ -1540,7 +1524,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
 );
 
 Link.displayName = "Link";
-````
+```
 
 ```jsx fileName="src/components/Link.mjx" codeFormat="esm"
 import { getLocalizedUrl } from "intlayer";
@@ -1548,16 +1532,16 @@ import { useLocale } from "react-intlayer";
 import { forwardRef } from "react";
 
 /**
- * 用于检查给定 URL 是否为外部链接的工具函数。
- * 如果 URL 以 http:// 或 https:// 开头，则被视为外部链接。
+ * 工具函数，用于检查给定的 URL 是否为外部链接。
+ * 如果 URL 以 http:// 或 https:// 开头，则视为外部链接。
  */
 export const checkIsExternalLink = (href?: string): boolean =>
   /^https?:\/\//.test(href ?? "");
 
 /**
- * 一个自定义的 Link 组件，根据当前语言环境调整 href 属性。
- * 对于内部链接，它使用 `getLocalizedUrl` 在 URL 前添加语言环境前缀（例如 /fr/about）。
- * 这确保导航保持在相同的语言环境上下文中。
+ * 一个自定义的 Link 组件，根据当前语言环境动态调整 href 属性。
+ * 对于内部链接，使用 `getLocalizedUrl` 在 URL 前加上语言环境前缀（例如 /fr/about）。
+ * 这样可以确保导航保持在相同的语言环境上下文中。
  */
 export const Link = forwardRef(({ href, children, ...props }, ref) => {
   const { locale } = useLocale();
@@ -1589,7 +1573,7 @@ const { forwardRef } = require("react");
 const checkIsExternalLink = (href) => /^https?:\/\//.test(href ?? "");
 
 /**
- * 一个自定义的 Link 组件，根据当前语言环境调整 href 属性。
+ * 一个自定义的 Link 组件，根据当前语言环境动态调整 href 属性。
  * 对于内部链接，使用 `getLocalizedUrl` 在 URL 前添加语言前缀（例如 /fr/about）。
  * 这样可以确保导航保持在相同的语言环境上下文中。
  */
@@ -1597,7 +1581,7 @@ const Link = forwardRef(({ href, children, ...props }, ref) => {
   const { locale } = useLocale();
   const isExternalLink = checkIsExternalLink(href);
 
-  // 如果链接是内部链接且提供了有效的 href，则获取本地化的 URL。
+  // 如果链接是内部链接且 href 有效，则获取本地化的 URL。
   const localizedHref = isExternalLink ? href : getLocalizedUrl(href, locale);
 
   return (
@@ -1624,12 +1608,12 @@ Link.displayName = "Link";
   `useLocale` 钩子提供当前的语言环境（例如，法语为 `fr`）。
 
 - **本地化 URL**：  
-  对于内部链接（即非外部链接），使用 `getLocalizedUrl` 自动为 URL 添加当前语言环境前缀。这意味着如果用户使用的是法语，传入 `/about` 作为 `href` 会被转换为 `/fr/about`。
+  对于内部链接（即非外部链接），使用 `getLocalizedUrl` 自动为 URL 添加当前语言环境前缀。这意味着如果用户使用的是法语，传入的 `/about` 会被转换为 `/fr/about`。
 
 - **返回链接**：  
   该组件返回一个带有本地化 URL 的 `<a>` 元素，确保导航与当前语言环境保持一致。
 
-通过在整个应用中集成此 `Link` 组件，您可以维护一致且具语言感知的用户体验，同时还可提升 SEO 和可用性。
+通过在整个应用中集成此 `Link` 组件，您可以维护一致且具语言感知的用户体验，同时提升 SEO 和可用性。
 
 ### 配置 TypeScript
 
@@ -1641,24 +1625,6 @@ Intlayer 使用模块增强（module augmentation）来利用 TypeScript 的优
 
 确保您的 TypeScript 配置包含自动生成的类型。
 
-````json5 fileName="tsconfig.json"
-{
-  // ... 您现有的 TypeScript 配置
-  "include": [
-该组件返回一个带有本地化 URL 的 `<a>` 元素，确保导航与当前语言环境保持一致。
-
-通过在整个应用中集成此 `Link` 组件，您可以保持一致且具语言感知的用户体验，同时还能提升 SEO 和可用性。
-
-### 配置 TypeScript
-
-Intlayer 使用模块扩展来利用 TypeScript 的优势，使您的代码库更健壮。
-
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
-
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
-
-确保您的 TypeScript 配置包含自动生成的类型。
-
 ```json5 fileName="tsconfig.json"
 {
   // ... 您现有的 TypeScript 配置
@@ -1667,13 +1633,13 @@ Intlayer 使用模块扩展来利用 TypeScript 的优势，使您的代码库
     ".intlayer/**/*.ts", // 包含自动生成的类型
   ],
 }
-````
+```
 
 ### Git 配置
 
-建议忽略 Intlayer 生成的文件，这样可以避免将它们提交到您的 Git 仓库。
+建议忽略 Intlayer 生成的文件，这样可以避免将它们提交到您的 Git 仓库中。
 
-为此，您可以在 `.gitignore` 文件中添加以下内容：
+为此，您可以在 `.gitignore` 文件中添加以下指令：
 
 ```plaintext
 # 忽略 Intlayer 生成的文件
@@ -1688,9 +1654,9 @@ Intlayer 使用模块扩展来利用 TypeScript 的优势，使您的代码库
 
 该扩展提供：
 
-- **翻译键的自动补全**
+- **翻译键的自动补全**。
 - **实时错误检测**，用于缺失的翻译。
-- **内联预览**，展示翻译内容。
+- **内联预览**已翻译的内容。
 - **快速操作**，轻松创建和更新翻译。
 
 有关如何使用该扩展的更多详细信息，请参阅[Intlayer VS Code 扩展文档](https://intlayer.org/doc/vs-code-extension)。
@@ -1699,7 +1665,7 @@ Intlayer 使用模块扩展来利用 TypeScript 的优势，使您的代码库
 
 ### 深入了解
 
-要进一步使用，您可以实现[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_visual_editor.md)或使用[内容管理系统（CMS）](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md)来外部化您的内容。
+要进一步使用，您可以实现[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_visual_editor.md)或使用[内容管理系统（CMS）](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md)将内容外部化。
 
 ---