@intlayer/docs 8.0.0 → 8.0.1-canary.1

package/docs/zh/intlayer_with_vite+preact.md

@@ -24,7 +24,7 @@ history:
     changes: 初始化历史
 ---
 
-# 使用Intlayer翻译您的Vite and Preact | 国际化(i18n)
+# 使用 Intlayer 翻译您的 Vite 和 Preact 网站 | 国际化 (i18n)
 
 <Tabs defaultTab="video">
   <Tab label="Video" value="video">
@@ -45,28 +45,30 @@ history:
   </Tab>
 </Tabs>
 
-> 该包正在开发中。有关更多信息，请参见[问题](https://github.com/aymericzip/intlayer/issues/118)。通过点赞该问题，表达您对 Intlayer for Preact 的兴趣。
+## 目录
 
-请参阅 GitHub 上的[应用模板](https://github.com/aymericzip/intlayer-vite-preact-template)。
+<TOC/>
 
 ## 什么是 Intlayer？
 
-**Intlayer** 是一个创新的开源国际化（i18n）库，旨在简化现代 Web 应用程序的多语言支持。
+**Intlayer** 是一个创新的开源国际化 (i18n) 库，旨在简化现代 Web 应用程序的多语言支持。
 
 使用 Intlayer，您可以：
 
-- **通过组件级声明式字典轻松管理翻译**。
+- **轻松管理翻译**：使用组件级的声明式字典。
 - **动态本地化元数据、路由和内容**。
-- **确保 TypeScript 支持**，通过自动生成类型，提升自动补全和错误检测能力。
-- **受益于高级功能**，如动态语言环境检测和切换。
+- **确保 TypeScript 支持**：通过自动生成的类型，改进自动补全和错误检测。
+- **受益于高级功能**：例如动态语言环境检测和切换。
 
 ---
 
-## 在 Vite 和 Preact 应用中设置 Intlayer 的分步指南
+## 在 Vite 和 Preact 应用程序中设置 Intlayer 的分步指南
 
-### 第一步：安装依赖
+请参阅 GitHub 上的 [应用程序模板](https://github.com/aymericzip/intlayer-vite-preact-template)。
 
-使用 npm 安装所需的包：
+### 第 1 步：安装依赖项
+
+使用 npm 安装必要的包：
 
 ```bash packageManager="npm"
 npm install intlayer preact-intlayer
@@ -94,59 +96,19 @@ bunx intlayer init
 
 - **intlayer**
 
-- **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)。
-
-- **preact-intlayer**  
-  将 Intlayer 集成到 Preact 应用中的包。它提供了 Preact 国际化的上下文提供者和钩子。
-
-- **vite-intlayer**  
-  包含用于将 Intlayer 集成到[Vite 打包工具](https://vite.dev/guide/why.html#why-bundle-for-production)的 Vite 插件，以及用于检测用户首选语言、管理 Cookie 和处理 URL 重定向的中间件。
-
-### 第2步：配置您的项目
-
-创建一个配置文件来配置您应用程序的语言：
-
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
-import { Locales, type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // 您的其他语言
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
+  提供配置管理、翻译、[内容声明](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) 的核心包。
 
-export default config;
-```
+- **preact-intlayer**
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
+  将 Intlayer 与 Preact 应用程序集成的包。它为 Preact 国际化提供上下文提供者和钩子。
 
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // 您的其他语言
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
+- **vite-intlayer**
 
-export default config;
-```
+  包含用于将 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";
@@ -157,10 +119,14 @@ const config: IntlayerConfig = {
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // 您的其他语言
+      // 您的其他语言环境
     ],
     defaultLocale: Locales.ENGLISH,
   },
+  routing: {
+    mode: "prefix-no-default", // 默认：除默认语言环境外，为所有语言环境添加前缀
+    storage: ["cookie", "header"], // 默认：在 cookie 中存储语言环境并从 header 中检测
+  },
 };
 
 export default config;
@@ -176,10 +142,14 @@ const config = {
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // 您的其他语言
+      // 您的其他语言环境
     ],
     defaultLocale: Locales.ENGLISH,
   },
+  routing: {
+    mode: "prefix-no-default", // 默认：除默认语言环境外，为所有语言环境添加前缀
+    storage: ["cookie", "header"], // 默认：在 cookie 中存储语言环境并从 header 中检测
+  },
 };
 
 export default config;
@@ -195,35 +165,22 @@ const config = {
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // 您的其他语言
+      // 您的其他语言环境
     ],
     defaultLocale: Locales.ENGLISH,
   },
+  routing: {
+    mode: "prefix-no-default", // 默认：除默认语言环境外，为所有语言环境添加前缀
+    storage: ["cookie", "header"], // 默认：在 cookie 中存储语言环境并从 header 中检测
+  },
 };
 
 module.exports = config;
 ```
 
-> 通过此配置文件，您可以设置本地化的 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)。
 
-### 第3步：在您的 Vite 配置中集成 Intlayer
-
-将 intlayer 插件添加到您的配置中。
-
-```typescript fileName="vite.config.ts" codeFormat="typescript"
-import { defineConfig } from "vite";
-import preact from "@preact/preset-vite";
-import { intlayer } from "vite-intlayer";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [preact(), intlayer()],
-});
-```
-
-> 通过此配置文件，您可以设置本地化的 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名，禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
-
-### 第3步：在您的 Vite 配置中集成 Intlayer
+### 第 3 步：在 Vite 配置中集成 Intlayer
 
 将 intlayer 插件添加到您的配置中。
 
@@ -260,9 +217,9 @@ module.exports = defineConfig({
 });
 ```
 
-> `intlayer()` Vite 插件用于将 Intlayer 集成到 Vite 中。它确保内容声明文件的构建，并在开发模式下监视这些文件。它在 Vite 应用程序中定义了 Intlayer 环境变量。此外，它还提供别名以优化性能。
+> `intlayer()` Vite 插件用于将 Intlayer 与 Vite 集成。它确保构建内容声明文件并在开发模式下监视它们。它在 Vite 应用程序中定义了 Intlayer 环境变量。此外，它还提供别名以优化性能。
 
-### 第4步：声明您的内容
+### 第 4 步：声明内容
 
 创建并管理您的内容声明以存储翻译：
 
@@ -287,18 +244,12 @@ const appContent = {
     title: "Vite + Preact",
 
     count: t({
-      zh: "计数是 ",
       en: "count is ",
       fr: "le compte est ",
       es: "el recuento es ",
     }),
 
     edit: t<ComponentChildren>({
-      zh: (
-        <>
-          编辑 <code>src/app.tsx</code> 并保存以测试 HMR
-        </>
-      ),
       en: (
         <>
           Edit <code>src/app.tsx</code> and save to test HMR
@@ -317,7 +268,6 @@ const appContent = {
     }),
 
     readTheDocs: t({
-      zh: "点击 Vite 和 Preact 标志以了解更多信息",
       en: "Click on the Vite and Preact logos to learn more",
       fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
       es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
@@ -330,7 +280,7 @@ export default appContent;
 
 ```javascript fileName="src/app.content.mjs" contentDeclarationFormat="esm"
 import { t } from "intlayer";
-// import { h } from 'preact'; // 如果你直接在 .mjs 中使用 JSX，则需要此行
+// import { h } from 'preact'; // 如果直接在 .mjs 中使用 JSX，则需要此行
 
 /** @type {import('intlayer').Dictionary} */
 const appContent = {
@@ -362,7 +312,7 @@ const appContent = {
     }),
 
     readTheDocs: t({
-      en: "点击 Vite 和 Preact 标志以了解更多信息",
+      en: "Click on the Vite and Preact logos to learn more",
       fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
       es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
     }),
@@ -374,19 +324,19 @@ export default appContent;
 
 ```javascript fileName="src/app.content.cjs" contentDeclarationFormat="commonjs"
 const { t } = require("intlayer");
-// const { h } = require('preact'); // 如果你直接在 .cjs 文件中使用 JSX，则需要此行
+// const { h } = require('preact'); // 如果直接在 .cjs 中使用 JSX，则需要此行
 
 /** @type {import('intlayer').Dictionary} */
 const appContent = {
   key: "app",
   content: {
     viteLogo: t({
-      en: "Vite 标志",
+      en: "Vite logo",
       fr: "Logo Vite",
       es: "Logo Vite",
     }),
     preactLogo: t({
-      en: "Preact 标志",
+      en: "Preact logo",
       fr: "Logo Preact",
       es: "Logo Preact",
     }),
@@ -397,21 +347,18 @@ const appContent = {
       en: "count is ",
       fr: "le compte est ",
       es: "el recuento es ",
-      zh: "计数是 ",
     }),
 
     edit: t({
       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",
-      zh: "编辑 src/app.tsx 并保存以测试 HMR",
     }),
 
     readTheDocs: t({
       en: "Click on the Vite and Preact logos to learn more",
       fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
-      es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
-      zh: "点击 Vite 和 Preact 标志了解更多信息",
+      es: "Haga clic en los logotipos de Vite et Preact pour en savoir plus",
     }),
   },
 };
@@ -427,7 +374,6 @@ module.exports = appContent;
     "viteLogo": {
       "nodeType": "translation",
       "translation": {
-        "zh": "Vite 标志",
         "en": "Vite logo",
         "fr": "Logo Vite",
         "es": "Logo Vite"
@@ -436,7 +382,6 @@ module.exports = appContent;
     "preactLogo": {
       "nodeType": "translation",
       "translation": {
-        "zh": "Preact 标志",
         "en": "Preact logo",
         "fr": "Logo Preact",
         "es": "Logo Preact"
@@ -445,7 +390,6 @@ module.exports = appContent;
     "title": {
       "nodeType": "translation",
       "translation": {
-        "zh": "Vite + Preact",
         "en": "Vite + Preact",
         "fr": "Vite + Preact",
         "es": "Vite + Preact"
@@ -454,7 +398,6 @@ module.exports = appContent;
     "count": {
       "nodeType": "translation",
       "translation": {
-        "zh": "计数是 ",
         "en": "count is ",
         "fr": "le compte est ",
         "es": "el recuento es "
@@ -463,7 +406,7 @@ module.exports = appContent;
     "edit": {
       "nodeType": "translation",
       "translation": {
-        "en": "编辑 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"
       }
@@ -471,7 +414,7 @@ module.exports = appContent;
     "readTheDocs": {
       "nodeType": "translation",
       "translation": {
-        "en": "点击 Vite 和 Preact 标志以了解更多信息",
+        "en": "Click on the Vite and Preact logos to learn more",
         "fr": "Cliquez sur les logos Vite et Preact pour en savoir plus",
         "es": "Haga clic en los logotipos de Vite y Preact para obtener más información"
       }
@@ -480,22 +423,22 @@ module.exports = appContent;
 }
 ```
 
-> 您的内容声明可以定义在应用程序中的任何位置，只要它们被包含在 `contentDir` 目录中（默认是 `./src`）。并且文件扩展名需匹配内容声明文件扩展名（默认是 `.content.{json,ts,tsx,js,jsx,mjs,cjs}`）。
+> 只要您的内容声明包含在 `contentDir` 目录（默认情况下为 `./src`）中，就可以在应用程序的任何位置定义它们。并且需匹配内容声明文件扩展名（默认情况下为 `.content.{json,ts,tsx,js,jsx,mjs,cjs}`）。
 
-> 更多详情，请参考[内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/get_started.md)。
+> 有关更多详细信息，请参考 [内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
 
-> 如果您的内容文件包含 TSX 代码，您可能需要导入 `import { h } from "preact";`，或者确保您的 JSX pragma 已正确设置为 Preact。
+> 如果您的内容文件包含 TSX 代码，您可能需要导入 `import { h } from "preact";` 或确保正确设置 Preact 的 JSX pragma。
 
-### 第5步：在代码中使用 Intlayer
+### 第 5 步：在代码中使用 Intlayer
 
 在整个应用程序中访问您的内容字典：
 
 ```tsx {6,10} fileName="src/app.tsx" codeFormat="typescript"
 import { useState } from "preact/hooks";
 import type { FunctionalComponent } from "preact";
-import preactLogo from "./assets/preact.svg"; // 假设你有一个 preact.svg 文件
+import preactLogo from "./assets/preact.svg"; // 假设您有 preact.svg
 import viteLogo from "/vite.svg";
-import "./app.css"; // 假设你的 CSS 文件名为 app.css
+import "./app.css"; // 假设您的 CSS 文件名为 app.css
 import { IntlayerProvider, useIntlayer } from "preact-intlayer";
 
 const AppContent: FunctionalComponent = () => {
@@ -524,6 +467,12 @@ const AppContent: FunctionalComponent = () => {
         </button>
         <p>{content.edit}</p>
       </div>
+      {/* Markdown 内容 */}
+      <div>{content.myMarkdownContent}</div>
+
+      {/* HTML 内容 */}
+      <div>{content.myHtmlContent}</div>
+
       <p class="read-the-docs">{content.readTheDocs}</p>
     </>
   );
@@ -632,7 +581,7 @@ const App = () => (
 module.exports = App;
 ```
 
-> 如果您想在字符串属性中使用内容，例如 `alt`、`title`、`href`、`aria-label` 等，必须调用函数的值，如：
+> 如果您想在字符串属性中使用您的内容，例如 `alt`、`title`、`href`、`aria-label` 等，您必须调用该函数的值，例如：
 
 > ```jsx
 > <img src={content.image.src.value} alt={content.image.value} />
@@ -640,11 +589,11 @@ module.exports = App;
 
 > 注意：在 Preact 中，`className` 通常写作 `class`。
 
-> 要了解更多关于 `useIntlayer` 钩子的内容，请参阅[文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useIntlayer.md)（`preact-intlayer` 的 API 类似）。
+> 要了解有关 `useIntlayer` 钩子的更多信息，请参考 [文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useIntlayer.md)（`preact-intlayer` 的 API 类似）。
 
-### （可选）步骤 6：更改内容语言
+### （可选）第 6 步：更改内容语言
 
-要更改内容的语言，可以使用 `useLocale` 钩子提供的 `setLocale` 函数。此函数允许您设置应用程序的语言环境并相应地更新内容。
+要更改内容的语言，您可以使用 `useLocale` 钩子提供的 `setLocale` 函数。此函数允许您设置应用程序的语言环境并相应地更新内容。
 
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
 import type { FunctionalComponent } from "preact";
@@ -655,7 +604,9 @@ const LocaleSwitcher: FunctionalComponent = () => {
   const { setLocale } = useLocale();
 
   return (
-    <button onClick={() => setLocale(Locales.ENGLISH)}>将语言切换为英语</button>
+    <button onClick={() => setLocale(Locales.ENGLISH)}>
+      Change Language to English
+    </button>
   );
 };
 
@@ -670,7 +621,9 @@ const LocaleSwitcher = () => {
   const { setLocale } = useLocale();
 
   return (
-    <button onClick={() => setLocale(Locales.ENGLISH)}>将语言切换为英语</button>
+    <button onClick={() => setLocale(Locales.ENGLISH)}>
+      Change Language to English
+    </button>
   );
 };
 
@@ -685,18 +638,20 @@ const LocaleSwitcher = () => {
   const { setLocale } = useLocale();
 
   return (
-    <button onClick={() => setLocale(Locales.ENGLISH)}>切换语言到英语</button>
+    <button onClick={() => setLocale(Locales.ENGLISH)}>
+      Change Language to English
+    </button>
   );
 };
 
 module.exports = LocaleSwitcher;
 ```
 
-> 想了解更多关于 `useLocale` 钩子的内容，请参阅[文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useLocale.md)（`preact-intlayer` 的 API 类似）。
+> 要了解有关 `useLocale` 钩子的更多信息，请参考 [文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useLocale.md)（`preact-intlayer` 的 API 类似）。
 
-### （可选）步骤7：为您的应用添加本地化路由
+### （可选）步骤 7：为您的应用程序添加本地化路由
 
-此步骤的目的是为每种语言创建唯一的路由。这对于 SEO 和 SEO 友好的 URL 非常有用。
+此步骤的目的是为每种语言设置唯一的路由。这对于 SEO 和 SEO 友好的 URL 非常有用。
 示例：
 
 ```plaintext
@@ -705,410 +660,107 @@ module.exports = LocaleSwitcher;
 - https://example.com/fr/about
 ```
 
-> 默认情况下，默认语言的路由不会添加前缀。如果您想为默认语言添加前缀，可以在配置中将 `middleware.prefixDefault` 选项设置为 `true`。更多信息请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
-
-要为您的应用添加本地化路由，您可以创建一个 `LocaleRouter` 组件来包裹应用的路由，并处理基于语言的路由。以下是使用 [preact-iso](https://github.com/preactjs/preact-iso) 的示例：
-
-首先，安装 `preact-iso`：
+> 默认情况下，默认语言环境的路由不带前缀。如果您想为默认语言环境添加前缀，可以在配置中将 `routing.mode` 选项设置为 `"prefix-all"`。有关更多信息，请参阅 [配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
 
-```bash packageManager="npm"
-npm install preact-iso
-npx intlayer init
-```
-
-```bash packageManager="pnpm"
-pnpm add preact-iso
-pnpm intlayer init
-```
-
-```bash packageManager="yarn"
-yarn add preact-iso
-```
+要为您的应用程序添加本地化路由，您可以创建一个 `LocaleRouter` 组件，该组件包裹您的应用程序路由并处理基于语言环境的路由。以下是使用 [preact-iso](https://github.com/preactjs/preact-iso) 的示例：
 
 ```tsx fileName="src/components/LocaleRouter.tsx"  codeFormat="typescript"
-import { type Locales, configuration, getPathWithoutLocale } from "intlayer";
-import { ComponentChildren, FunctionalComponent } from "preact";
+import { localeMap } from "intlayer";
 import { IntlayerProvider } from "preact-intlayer";
-import { LocationProvider, useLocation } from "preact-iso";
-import { useEffect } from "preact/hooks";
-
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
-
-const Navigate: FunctionalComponent<{ to: string; replace?: boolean }> = ({
-  to,
-  replace,
-}) => {
-  const { route } = useLocation();
-  useEffect(() => {
-    route(to, replace);
-  }, [to, replace, route]);
-  return null;
-};
-
-/**
- * 一个处理本地化并用适当的语言环境上下文包裹子组件的组件。
- * 它管理基于 URL 的语言环境检测和验证。
- */
-/**
- * 一个处理本地化的组件，使用适当的语言环境上下文包裹子组件。
- * 它管理基于 URL 的语言环境检测和验证。
- */
-const AppLocalized: FunctionalComponent<{
-  children: ComponentChildren;
-  locale?: Locales;
-}> = ({ children, locale }) => {
-  const { path: pathname, url } = useLocation();
-
-  if (!url) {
-    return null;
-  }
-
-  const search = url.substring(pathname.length);
-
-  // 确定当前语言环境，如果未提供则回退到默认语言环境
-  const currentLocale = locale ?? defaultLocale;
-
-  // 从路径中移除语言环境前缀以构造基础路径
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // 当前 URL 路径
-  );
-
-  /**
-   * 如果 middleware.prefixDefault 为 true，则默认语言应始终带有前缀。
-   */
-  if (middleware.prefixDefault) {
-    // 验证语言
-    if (!locale || !locales.includes(locale)) {
-      // 重定向到带有更新路径的默认语言
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // 用新条目替换当前历史记录
-        />
-      );
-    }
-
-    // 使用 IntlayerProvider 包裹子组件并设置当前语言
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * 当 middleware.prefixDefault 为 false 时，默认语言不带前缀。
-     * 确保当前语言环境有效且不是默认语言环境。
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (loc) => loc.toString() !== defaultLocale.toString() // 排除默认语言环境
-        )
-        .includes(currentLocale) // 检查当前语言环境是否在有效语言环境列表中
-    ) {
-      // 重定向到无语言环境前缀的路径
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // 使用 IntlayerProvider 包裹子组件并设置当前语言环境
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
-
-const RouterContent: FunctionalComponent<{
-  children: ComponentChildren;
-}> = ({ children }) => {
-  const { path } = useLocation();
-
-  if (!path) {
-    return null;
-  }
-
-  const pathLocale = path.split("/")[1] as Locales;
-
-  const isLocaleRoute = locales
-    .filter((locale) => middleware.prefixDefault || locale !== defaultLocale)
-    .some((locale) => locale.toString() === pathLocale);
-
-  if (isLocaleRoute) {
-    return <AppLocalized locale={pathLocale}>{children}</AppLocalized>;
-  }
-
-  return (
-    <AppLocalized
-      locale={!middleware.prefixDefault ? defaultLocale : undefined}
-    >
-      {children}
-    </AppLocalized>
-  );
-};
+import { LocationProvider, Router, Route } from "preact-iso";
+import type { ComponentChildren, FunctionalComponent } from "preact";
 
 /**
- * 一个设置特定语言环境路由的路由组件。
- * 它使用 preact-iso 来管理导航并渲染本地化组件。
+ * 设置特定语言环境路由的路由组件。
+ * 它使用 preact-iso 管理导航并渲染本地化组件。
  */
 export const LocaleRouter: FunctionalComponent<{
   children: ComponentChildren;
 }> = ({ children }) => (
   <LocationProvider>
-    <RouterContent>{children}</RouterContent>
+    <Router>
+      {localeMap(({ locale, urlPrefix }) => ({ locale, urlPrefix }))
+        .sort((a, b) => b.urlPrefix.length - a.urlPrefix.length)
+        .map(({ locale, urlPrefix }) => (
+          <Route
+            key={locale}
+            path={`${urlPrefix}/:rest*`}
+            component={() => (
+              <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+            )}
+          />
+        ))}
+    </Router>
   </LocationProvider>
 );
 ```
 
 ```jsx fileName="src/components/LocaleRouter.jsx" codeFormat="esm"
-// 导入必要的依赖和函数
-import { configuration, getPathWithoutLocale } from "intlayer";
+import { localeMap } from "intlayer";
 import { IntlayerProvider } from "preact-intlayer";
-import { LocationProvider, useLocation } from "preact-iso";
-import { useEffect } from "preact/hooks";
-import { h } from "preact"; // JSX 所需
-
-// 从 Intlayer 中解构配置
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
-
-const Navigate = ({ to, replace }) => {
-  const { route } = useLocation();
-  useEffect(() => {
-    route(to, replace);
-  }, [to, replace, route]);
-  return null;
-};
+import { LocationProvider, Router, Route } from "preact-iso";
 
 /**
- * 一个处理本地化的组件，包裹子组件并提供相应的语言环境上下文。
- * 它管理基于 URL 的语言检测和验证。
- */
-const AppLocalized = ({ children, locale }) => {
-  const { path: pathname, url } = useLocation();
-
-  if (!url) {
-    return null;
-  }
-
-  const search = url.substring(pathname.length);
-
-  // 确定当前语言环境，如果未提供则回退到默认语言
-  const currentLocale = locale ?? defaultLocale;
-
-  // 从路径中移除语言前缀以构造基础路径
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // 当前 URL 路径
-  );
-
-  /**
-   * 如果 middleware.prefixDefault 为 true，默认语言应始终带有前缀。
-   */
-  if (middleware.prefixDefault) {
-    // 验证语言环境
-    if (!locale || !locales.includes(locale)) {
-      // 重定向到带有更新路径的默认语言环境
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // 用新的历史记录条目替换当前条目
-        />
-      );
-    }
-
-    // 使用 IntlayerProvider 包裹子组件并设置当前语言环境
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * 当 middleware.prefixDefault 为 false 时，默认语言环境不带前缀。
-     * 确保当前语言环境有效且不是默认语言环境。
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (loc) => loc.toString() !== defaultLocale.toString() // 排除默认语言环境
-        )
-        .includes(currentLocale) // 检查当前语言环境是否在有效语言环境列表中
-    ) {
-      // 重定向到不带语言环境前缀的路径
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // 使用 IntlayerProvider 包裹子组件并设置当前语言环境
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
-
-const RouterContent = ({ children }) => {
-  const { path } = useLocation();
-
-  if (!path) {
-    return null;
-  }
-
-  const pathLocale = path.split("/")[1];
-
-  const isLocaleRoute = locales
-    .filter((locale) => middleware.prefixDefault || locale !== defaultLocale)
-    .some((locale) => locale.toString() === pathLocale);
-
-  if (isLocaleRoute) {
-    return <AppLocalized locale={pathLocale}>{children}</AppLocalized>;
-  }
-
-  return (
-    <AppLocalized
-      locale={!middleware.prefixDefault ? defaultLocale : undefined}
-    >
-      {children}
-    </AppLocalized>
-  );
-};
-
-/**
- * 一个设置特定语言环境路由的路由组件。
- * 它使用 preact-iso 来管理导航并渲染本地化组件。
+ * 设置特定语言环境路由的路由组件。
+ * 它使用 preact-iso 管理导航并渲染本地化组件。
  */
 export const LocaleRouter = ({ children }) => (
   <LocationProvider>
-    <RouterContent>{children}</RouterContent>
+    <Router>
+      {localeMap(({ locale, urlPrefix }) => ({ locale, urlPrefix }))
+        .sort((a, b) => b.urlPrefix.length - a.urlPrefix.length)
+        .map(({ locale, urlPrefix }) => (
+          <Route
+            key={locale}
+            path={`${urlPrefix}/:rest*`}
+            component={() => (
+              <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+            )}
+          />
+        ))}
+    </Router>
   </LocationProvider>
 );
 ```
 
 ```jsx fileName="src/components/LocaleRouter.cjsx" codeFormat="commonjs"
-// 导入必要的依赖和函数
-const { configuration, getPathWithoutLocale } = require("intlayer");
+const { localeMap } = require("intlayer");
 const { IntlayerProvider } = require("preact-intlayer");
-const { LocationProvider, useLocation } = require("preact-iso");
-const { useEffect } = require("preact/hooks");
-const { h } = require("preact"); // JSX所需
-
-// 从Intlayer中解构配置
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
-
-const Navigate = ({ to, replace }) => {
-  const { route } = useLocation();
-  useEffect(() => {
-    route(to, replace);
-  }, [to, replace, route]);
-  return null;
-};
+const { LocationProvider, Router, Route } = require("preact-iso");
 
 /**
- * 一个处理本地化的组件，使用适当的语言环境上下文包裹子组件。
- * 它管理基于URL的语言环境检测和验证。
+ * 设置特定语言环境路由的路由组件。
+ * 它使用 preact-iso 管理导航并渲染本地化组件。
  */
-const AppLocalized = ({ children, locale }) => {
-  const { path: pathname, url } = useLocation();
-
-  if (!url) {
-    return null;
-  }
-
-  const search = url.substring(pathname.length);
-
-  // 确定当前语言环境，如果未提供则回退到默认语言环境
-  const currentLocale = locale ?? defaultLocale;
-
-  // 从路径中移除语言环境前缀以构造基础路径
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // 当前 URL 路径
-  );
-
-  /**
-   * 如果 middleware.prefixDefault 为 true，则默认语言环境应始终带有前缀。
-   */
-  if (middleware.prefixDefault) {
-    // 验证语言环境
-    if (!locale || !locales.includes(locale)) {
-      // 重定向到带有更新路径的默认语言环境
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // 替换当前历史记录条目为新的条目
-        />
-      );
-    }
-
-    // 使用 IntlayerProvider 包裹子组件并设置当前语言环境
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * 当 middleware.prefixDefault 为 false 时，默认语言环境不带前缀。
-     * 确保当前语言环境有效且不是默认语言环境。
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (loc) => loc.toString() !== defaultLocale.toString() // 排除默认语言环境
+const LocaleRouter = ({ children }) =>
+  h(
+    LocationProvider,
+    {},
+    h(
+      Router,
+      {},
+      localeMap(({ locale, urlPrefix }) => ({ locale, urlPrefix }))
+        .sort((a, b) => b.urlPrefix.length - a.urlPrefix.length)
+        .map(({ locale, urlPrefix }) =>
+          h(Route, {
+            key: locale,
+            path: `${urlPrefix}/:rest*`,
+            component: () => h(IntlayerProvider, { locale }, children),
+          })
         )
-        .includes(currentLocale) // 检查当前语言环境是否在有效语言环境列表中
-    ) {
-      // 重定向到无语言环境前缀的路径
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // 使用 IntlayerProvider 包裹子组件并设置当前语言环境
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
-
-const RouterContent = ({ children }) => {
-  const { path } = useLocation();
-
-  if (!path) {
-    return null;
-  }
-
-  const pathLocale = path.split("/")[1];
-
-  const isLocaleRoute = locales
-    .filter((locale) => middleware.prefixDefault || locale !== defaultLocale)
-    .some((locale) => locale.toString() === pathLocale);
-
-  if (isLocaleRoute) {
-    return <AppLocalized locale={pathLocale}>{children}</AppLocalized>;
-  }
-
-  return (
-    <AppLocalized
-      locale={!middleware.prefixDefault ? defaultLocale : undefined}
-    >
-      {children}
-    </AppLocalized>
+    )
   );
-};
-
-/**
- * 一个设置特定语言环境路由的路由组件。
- * 它使用 preact-iso 来管理导航并渲染本地化组件。
- */
-const LocaleRouter = ({ children }) => (
-  <LocationProvider>
-    <RouterContent>{children}</RouterContent>
-  </LocationProvider>
-);
 
 module.exports = { LocaleRouter };
 ```
 
-然后，你可以在你的应用中使用 `LocaleRouter` 组件：
+然后，您可以在应用程序中使用 `LocaleRouter` 组件：
 
 ```tsx fileName="src/app.tsx" codeFormat="typescript"
 import { LocaleRouter } from "./components/LocaleRouter";
 import type { FunctionalComponent } from "preact";
-tsx fileName="src/app.tsx" codeFormat="typescript"
-// ... 你的 AppContent 组件（在步骤5中定义）
+
+// ... 您的 AppContent 组件
 
 const App: FunctionalComponent = () => (
   <LocaleRouter>
@@ -1121,7 +773,8 @@ export default App;
 
 ```jsx fileName="src/app.jsx" codeFormat="esm"
 import { LocaleRouter } from "./components/LocaleRouter";
-// ... 你的 AppContent 组件（在步骤5中定义）
+
+// ... 您的 AppContent 组件
 
 const App = () => (
   <LocaleRouter>
@@ -1134,7 +787,8 @@ export default App;
 
 ```jsx fileName="src/app.cjsx" codeFormat="commonjs"
 const { LocaleRouter } = require("./components/LocaleRouter");
-// ... 你的 AppContent 组件（在步骤5中定义）
+
+// ... 您的 AppContent 组件
 
 const App = () => (
   <LocaleRouter>
@@ -1145,47 +799,12 @@ const App = () => (
 module.exports = App;
 ```
 
-同时，您还可以使用 `intlayerProxy` 为您的应用程序添加服务器端路由。该插件将根据 URL 自动检测当前语言环境并设置相应的语言环境 Cookie。如果未指定语言环境，插件将根据用户浏览器的语言偏好确定最合适的语言环境。如果仍未检测到语言环境，则会重定向到默认语言环境。
-
-```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
-import { defineConfig } from "vite";
-import preact from "@preact/preset-vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [preact(), intlayer(), intlayerProxy()],
-});
-```
-
-```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
-import { defineConfig } from "vite";
-import preact from "@preact/preset-vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
+### （可选）步骤 8：在语言环境更改时更改 URL
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [preact(), intlayer(), intlayerProxy()],
-});
-```
-
-```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
-const { defineConfig } = require("vite");
-const preact = require("@preact/preset-vite");
-const { intlayer, intlayerProxy } = require("vite-intlayer");
-
-// https://vitejs.dev/config/
-module.exports = defineConfig({
-  plugins: [preact(), intlayer(), intlayerProxy()],
-});
-```
-
-### （可选）步骤 8：当语言环境改变时更改 URL
-
-要在语言环境更改时更改 URL，您可以使用 `useLocale` 钩子提供的 `onLocaleChange` 属性。同时，您可以使用 `preact-iso` 中的 `useLocation` 和 `route` 来更新 URL 路径。
+要在语言环境更改时更改 URL，可以使用 `useLocale` 钩子提供的 `onLocaleChange` 属性。同时，您可以使用 `preact-iso` 中 `useLocation` 的 `route` 方法来更新 URL 路径。
 
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
-import { useLocation, route } from "preact-iso";
+import { useLocation } from "preact-iso";
 import {
   Locales,
   getHTMLTextDir,
@@ -1196,16 +815,15 @@ import { useLocale } from "preact-intlayer";
 import type { FunctionalComponent } from "preact";
 
 const LocaleSwitcher: FunctionalComponent = () => {
-  const location = useLocation();
+  const { url, route } = useLocation();
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (newLocale) => {
-      const currentFullPath = location.url; // preact-iso 提供完整的 URL
       // 使用更新后的语言环境构建 URL
-      // 例如: /es/about?foo=bar
-      const pathWithLocale = getLocalizedUrl(currentFullPath, newLocale);
+      // 示例：/es/about?foo=bar
+      const pathWithLocale = getLocalizedUrl(url, newLocale);
 
       // 更新 URL 路径
-      route(pathWithLocale, true); // true 表示替换当前历史记录
+      route(pathWithLocale, true); // true 表示替换 (replace)
     },
   });
 
@@ -1215,13 +833,13 @@ const LocaleSwitcher: FunctionalComponent = () => {
       <div id="localePopover" popover="auto">
         {availableLocales.map((localeItem) => (
           <a
-            href={getLocalizedUrl(location.url, localeItem)}
+            href={getLocalizedUrl(url, localeItem)}
             hreflang={localeItem}
             aria-current={locale === localeItem ? "page" : undefined}
             onClick={(e) => {
               e.preventDefault();
               setLocale(localeItem);
-              // 设置语言环境后，程序化导航将由 onLocaleChange 处理
+              // 设置语言环境后的程序化导航将由 onLocaleChange 处理
             }}
             key={localeItem}
           >
@@ -1230,15 +848,15 @@ const LocaleSwitcher: FunctionalComponent = () => {
               {localeItem}
             </span>
             <span>
-              {/* 语言在其自身语言环境中的名称 - 例如 Français */}
+              {/* 该语言环境自身的语言名称 - 例如 Français */}
               {getLocaleName(localeItem, localeItem)}
             </span>
             <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* 语言在当前语言环境中的名称 - 例如当前语言环境为 Locales.SPANISH 时显示 Francés */}
+              {/* 当前语言环境下的语言名称 - 例如当当前语言环境为 Locales.SPANISH 时显示 Francés */}
               {getLocaleName(localeItem, locale)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* 语言的英文名称 - 例如 French */}
+              {/* 英语名称 - 例如 French */}
               {getLocaleName(localeItem, Locales.ENGLISH)}
             </span>
           </a>
@@ -1252,7 +870,7 @@ export default LocaleSwitcher;
 ```
 
 ```jsx fileName="src/components/LocaleSwitcher.jsx" codeFormat="esm"
-import { useLocation, route } from "preact-iso";
+import { useLocation } from "preact-iso";
 import {
   Locales,
   getHTMLTextDir,
@@ -1260,14 +878,12 @@ import {
   getLocalizedUrl,
 } from "intlayer";
 import { useLocale } from "preact-intlayer";
-import { h } from "preact"; // 用于 JSX
 
 const LocaleSwitcher = () => {
-  const location = useLocation();
+  const { url, route } = useLocation();
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (newLocale) => {
-      const currentFullPath = location.url;
-      const pathWithLocale = getLocalizedUrl(currentFullPath, newLocale);
+      const pathWithLocale = getLocalizedUrl(url, newLocale);
       route(pathWithLocale, true);
     },
   });
@@ -1278,7 +894,7 @@ const LocaleSwitcher = () => {
       <div id="localePopover" popover="auto">
         {availableLocales.map((localeItem) => (
           <a
-            href={getLocalizedUrl(location.url, localeItem)}
+            href={getLocalizedUrl(url, localeItem)}
             hreflang={localeItem}
             aria-current={locale === localeItem ? "page" : undefined}
             onClick={(e) => {
@@ -1306,7 +922,7 @@ export default LocaleSwitcher;
 ```
 
 ```jsx fileName="src/components/LocaleSwitcher.cjsx" codeFormat="commonjs"
-const { useLocation, route } = require("preact-iso");
+const { useLocation } = require("preact-iso");
 const {
   Locales,
   getHTMLTextDir,
@@ -1314,45 +930,51 @@ const {
   getLocalizedUrl,
 } = require("intlayer");
 const { useLocale } = require("preact-intlayer");
-const { h } = require("preact"); // 用于 JSX
 
 const LocaleSwitcher = () => {
-  const location = useLocation();
+  const { url, route } = useLocation();
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (newLocale) => {
-      const currentFullPath = location.url;
-      const pathWithLocale = getLocalizedUrl(currentFullPath, newLocale);
+      const pathWithLocale = getLocalizedUrl(url, newLocale);
       route(pathWithLocale, true);
     },
   });
 
-  return (
-    <div>
-      <button popovertarget="localePopover">{getLocaleName(locale)}</button>
-      <div id="localePopover" popover="auto">
-        {availableLocales.map((localeItem) => (
-          <a
-            href={getLocalizedUrl(location.url, localeItem)}
-            hreflang={localeItem}
-            aria-current={locale === localeItem ? "page" : undefined}
-            onClick={(e) => {
+  return h(
+    "div",
+    {},
+    h("button", { popovertarget: "localePopover" }, getLocaleName(locale)),
+    h(
+      "div",
+      { id: "localePopover", popover: "auto" },
+      availableLocales.map((localeItem) =>
+        h(
+          "a",
+          {
+            href: getLocalizedUrl(url, localeItem),
+            hreflang: localeItem,
+            "aria-current": locale === localeItem ? "page" : undefined,
+            onClick: (e) => {
               e.preventDefault();
               setLocale(localeItem);
-            }}
-            key={localeItem}
-          >
-            <span>{localeItem}</span>
-            <span>{getLocaleName(localeItem, localeItem)}</span>
-            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {getLocaleName(localeItem, locale)}
-            </span>
-            <span dir="ltr" lang={Locales.ENGLISH}>
-              {getLocaleName(localeItem, Locales.ENGLISH)}
-            </span>
-          </a>
-        ))}
-      </div>
-    </div>
+            },
+            key: localeItem,
+          },
+          h("span", {}, localeItem),
+          h("span", {}, getLocaleName(localeItem, localeItem)),
+          h(
+            "span",
+            { dir: getHTMLTextDir(localeItem), lang: localeItem },
+            getLocaleName(localeItem, locale)
+          ),
+          h(
+            "span",
+            { dir: "ltr", lang: Locales.ENGLISH },
+            getLocaleName(localeItem, Locales.ENGLISH)
+          )
+        )
+      )
+    )
   );
 };
 
@@ -1361,25 +983,21 @@ module.exports = LocaleSwitcher;
 
 > 文档参考：
 >
-> > - [`useLocale` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useLocale.md)（`preact-intlayer` 的 API 类似）> - [`getLocaleName` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getLocaleName.md)> - [`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)> - [Popover API](https://developer.mozilla.org/zh-CN/docs/Web/API/Popover_API)> > - [`useLocale` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useLocale.md)（`preact-intlayer` 的 API 类似）> - [`getLocaleName` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getLocaleName.md)> - [`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)> - [Popover API](https://developer.mozilla.org/zh-CN/docs/Web/API/Popover_API)
-
-下面是更新后的**第9步**，增加了说明和优化的代码示例：
+> > - [`useLocale` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useLocale.md)（`preact-intlayer` 的 API 类似）> - [`getLocaleName` 钩子](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getLocaleName.md)> - [`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)> - [Popover API](https://developer.mozilla.org/zh-CN/docs/Web/API/Popover_API)
 
----
-
-### （可选）第9步：切换HTML的语言和方向属性
+### （可选）第 9 步：切换 HTML 语言和方向属性
 
-当您的应用支持多语言时，更新`<html>`标签的`lang`和`dir`属性以匹配当前语言环境非常重要。这样做可以确保：
+当您的应用程序支持多种语言时，更新 `<html>` 标签的 `lang` 和 `dir` 属性以匹配当前语言环境至关重要。这样做可以确保：
 
-- **无障碍性**：屏幕阅读器和辅助技术依赖正确的`lang`属性来准确发音和解释内容。
-- **文本渲染**：`dir`（方向）属性确保文本以正确的顺序呈现（例如，英语为从左到右，阿拉伯语或希伯来语为从右到左），这对可读性至关重要。
+- **无障碍性**：屏幕阅读器和辅助技术依靠正确的 `lang` 属性来准确发音和解释内容。
+- **文本渲染**：`dir`（方向）属性确保文本以正确的顺序呈现（例如，英语从左到右，阿拉伯语或希伯来语从右到左），这对于可读性至关重要。
 - **SEO**：搜索引擎使用 `lang` 属性来确定页面的语言，有助于在搜索结果中提供正确的本地化内容。
 
-通过在语言环境变化时动态更新这些属性，您可以确保所有支持语言的用户都能获得一致且无障碍的体验。
+通过在语言环境更改时动态更新这些属性，您可以确保所有支持语言的用户都能获得一致且无障碍的体验。
 
-#### 实现该 Hook
+#### 实现钩子
 
-创建一个自定义 Hook 来管理 HTML 属性。该 Hook 监听语言环境的变化并相应地更新属性：
+创建一个自定义钩子来管理 HTML 属性。该钩子监听语言环境更改并相应地更新属性：
 
 ```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx" codeFormat="typescript"
 import { useEffect } from "preact/hooks";
@@ -1388,8 +1006,8 @@ import { getHTMLTextDir } from "intlayer";
 
 /**
  * 根据当前语言环境更新 HTML <html> 元素的 `lang` 和 `dir` 属性。
- * - `lang`：通知浏览器和搜索引擎页面的语言。
- * - `dir`：确保正确的阅读顺序（例如，英语为 'ltr'，阿拉伯语为 'rtl'）。
+ * - `lang`: 通知浏览器和搜索引擎页面的语言。
+ * - `dir`: 确保正确的阅读顺序（例如，英语为 'ltr'，阿拉伯语为 'rtl'）。
  *
  * 这种动态更新对于正确的文本渲染、无障碍访问和 SEO 至关重要。
  */
@@ -1397,7 +1015,7 @@ export const useI18nHTMLAttributes = () => {
   const { locale } = useLocale();
 
   useEffect(() => {
-    // 将语言属性更新为当前的语言环境。
+    // 将语言属性更新为当前语言环境。
     document.documentElement.lang = locale;
 
     // 根据当前语言环境设置文本方向。
@@ -1444,22 +1062,22 @@ const useI18nHTMLAttributes = () => {
 module.exports = { useI18nHTMLAttributes };
 ```
 
-#### 在您的应用程序中使用该 Hook
+#### 在应用程序中使用钩子
 
-将该 Hook 集成到您的主组件中，以便在语言环境更改时更新 HTML 属性：
+将钩子集成到您的主组件中，以便在语言环境更改时更新 HTML 属性：
 
 ```tsx fileName="src/app.tsx" codeFormat="typescript"
 import type { FunctionalComponent } from "preact";
-import { IntlayerProvider } from "preact-intlayer"; // 如果 AppContent 需要，useIntlayer 已经导入
+import { IntlayerProvider } from "preact-intlayer"; // 如果 AppContent 需要，useIntlayer 已导入
 import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
 import "./app.css";
-// 第5步中定义的 AppContent
+// 第 5 步中的 AppContent 定义
 
 const AppWithHooks: FunctionalComponent = () => {
-  // 应用该 Hook 以根据当前语言环境更新 <html> 标签的 lang 和 dir 属性。
+  // 应用钩子以根据语言环境更新 <html> 标签的 lang 和 dir 属性。
   useI18nHTMLAttributes();
 
-  // 假设 AppContent 是您在第 5 步中定义的主要内容展示组件
+  // 假设 AppContent 是您在第 5 步中的主要内容显示组件
   return <AppContent />;
 };
 
@@ -1476,7 +1094,7 @@ export default App;
 import { IntlayerProvider } from "preact-intlayer";
 import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
 import "./app.css";
-// AppContent 定义来自第 5 步
+// 第 5 步中的 AppContent 定义
 
 const AppWithHooks = () => {
   useI18nHTMLAttributes();
@@ -1496,7 +1114,7 @@ export default App;
 const { IntlayerProvider } = require("preact-intlayer");
 const { useI18nHTMLAttributes } = require("./hooks/useI18nHTMLAttributes");
 require("./app.css");
-// 第5步中定义的 AppContent
+// 第 5 步中的 AppContent 定义
 
 const AppWithHooks = () => {
   useI18nHTMLAttributes();
@@ -1512,209 +1130,186 @@ const App = () => (
 module.exports = App;
 ```
 
-通过应用这些更改，您的应用程序将：
-
-- 确保 **语言** (`lang`) 属性正确反映当前的语言环境，这对于 SEO 和浏览器行为非常重要。
-- 根据语言环境调整 **文本方向** (`dir`)，提升不同阅读顺序语言的可读性和可用性。
-- 提供更**无障碍**的体验，因为辅助技术依赖这些属性来实现最佳功能。
+### （可选）第 10 步：创建本地化链接组件
 
-### （可选）步骤10：创建本地化链接组件
+为了确保您的应用程序导航尊重当前语言环境，您可以创建一个自定义 `Link` 组件。此组件会自动为内部 URL 添加当前语言前缀。
 
-为了确保您的应用导航尊重当前语言环境，您可以创建一个自定义的 `Link` 组件。该组件会自动为内部 URL 添加当前语言的前缀。
+这种行为在以下几个方面非常有用：
 
-这种行为有几个好处：
+- **SEO 和用户体验**：本地化 URL 帮助搜索引擎正确索引特定语言的页面，并为用户提供其首选语言的内容。
+- **一致性**：通过在整个应用程序中使用本地化链接，您可以确保导航保持在当前语言环境内，防止意外的语言切换。
+- **可维护性**：将本地化逻辑集中在单个组件中可以简化 URL 的管理。
 
-- **SEO 和用户体验**：本地化的 URL 有助于搜索引擎正确索引特定语言的页面，并为用户提供其偏好的语言内容。
-- **一致性**：通过在整个应用中使用本地化链接，您可以确保导航保持在当前语言环境内，避免意外的语言切换。
-- **可维护性**：将本地化逻辑集中在单个组件中简化了 URL 的管理。
+以下是 Preact 中本地化 `Link` 组件的实现：
 
-对于使用 `preact-iso` 的 Preact，通常使用标准的 `<a>` 标签进行导航，`preact-iso` 负责路由处理。如果你需要在点击时进行编程式导航（例如，在导航前执行某些操作），可以使用来自 `useLocation` 的 `route` 函数。下面是如何创建一个本地化 URL 的自定义锚点组件：
-
-```tsx fileName="src/components/LocalizedLink.tsx" codeFormat="typescript"
+```tsx fileName="src/components/Link.tsx" codeFormat="typescript"
 import { getLocalizedUrl } from "intlayer";
-import { useLocale, useLocation, route } from "preact-intlayer"; // 假设 useLocation 和 route 可以通过 preact-intlayer 从 preact-iso 重新导出，或者直接导入
-// 如果没有重新导出，直接导入：import { useLocation, route } from "preact-iso";
-import type { JSX } from "preact"; // 用于 HTMLAttributes
-import { forwardRef } from "preact/compat"; // 用于转发 refs
+import { useLocale } from "preact-intlayer";
+import { forwardRef } from "preact/compat";
+import type { JSX } from "preact";
 
-export interface LocalizedLinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
   href: string;
-  replace?: boolean; // 可选：替换历史记录状态
 }
 
 /**
- * 工具函数，用于检查给定的 URL 是否为外部链接。
- * 如果 URL 以 http:// 或 https:// 开头，则视为外部链接。
+ * 检查给定 URL 是否为外部链接的实用函数。
+ * 如果 URL 以 http:// 或 https:// 开头，则被视为外部链接。
  */
 export const checkIsExternalLink = (href?: string): boolean =>
   /^https?:\/\//.test(href ?? "");
 
 /**
- * 一个自定义的 Link 组件，根据当前语言环境调整 href 属性。
- * 对于内部链接，它使用 `getLocalizedUrl` 在 URL 前添加语言前缀（例如 /fr/about）。
- * 这确保导航保持在相同的语言环境中。
- * 它使用标准的 <a> 标签，但可以通过 preact-iso 的 `route` 触发客户端导航。
+ * 一个自定义 Link 组件，根据当前语言环境自适应 href 属性。
+ * 对于内部链接，它使用 `getLocalizedUrl` 为 URL 添加语言环境前缀（例如 /fr/about）。
+ * 这确保了导航保持在同一语言环境上下文中。
  */
-export const LocalizedLink = forwardRef<HTMLAnchorElement, LocalizedLinkProps>(
-  ({ href, children, onClick, replace = false, ...props }, ref) => {
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ href, children, ...props }, ref) => {
     const { locale } = useLocale();
-    const location = useLocation(); // 来自 preact-iso
     const isExternalLink = checkIsExternalLink(href);
 
+    // 如果链接是内部的且提供了有效的 href，则获取本地化 URL。
     const hrefI18n =
       href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
 
-    const handleClick = (event: JSX.TargetedMouseEvent<HTMLAnchorElement>) => {
-      if (onClick) {
-        onClick(event);
-      }
-      if (
-        !isExternalLink &&
-        href && // 确保 href 已定义
-        event.button === 0 && // 左键点击
-        !event.metaKey &&
-        !event.ctrlKey &&
-        !event.shiftKey &&
-        !event.altKey && // 标准修饰键检查
-        !props.target // 不在新标签页/窗口打开
-      ) {
-        event.preventDefault();
-        if (location.url !== hrefI18n) {
-          // 仅当 URL 不同时才导航
-          route(hrefI18n, replace); // 使用 preact-iso 的 route
-        }
-      }
-    };
-
     return (
-      <a href={hrefI18n} ref={ref} onClick={handleClick} {...props}>
+      <a href={hrefI18n} ref={ref} {...props}>
         {children}
       </a>
     );
   }
 );
+
+Link.displayName = "Link";
 ```
 
-```jsx fileName="src/components/LocalizedLink.jsx" codeFormat="esm"
+```jsx fileName="src/components/Link.jsx" codeFormat="esm"
 import { getLocalizedUrl } from "intlayer";
 import { useLocale } from "preact-intlayer";
-import { useLocation, route } from "preact-iso"; // 从 preact-iso 导入
 import { forwardRef } from "preact/compat";
-import { h } from "preact"; // 用于 JSX
 
+/**
+ * 检查给定 URL 是否为外部链接的实用函数。
+ * 如果 URL 以 http:// 或 https:// 开头，则被视为外部链接。
+ */
 export const checkIsExternalLink = (href) => /^https?:\/\//.test(href ?? "");
 
-export const LocalizedLink = forwardRef(
-  ({ href, children, onClick, replace = false, ...props }, ref) => {
-    const { locale } = useLocale();
-    const location = useLocation();
-    const isExternalLink = checkIsExternalLink(href);
+/**
+ * 一个自定义 Link 组件，根据当前语言环境自适应 href 属性。
+ * 对于内部链接，它使用 `getLocalizedUrl` 为 URL 添加语言环境前缀（例如 /fr/about）。
+ * 这确保了导航保持在同一语言环境上下文中。
+ */
+export const Link = forwardRef(({ href, children, ...props }, ref) => {
+  const { locale } = useLocale();
+  const isExternalLink = checkIsExternalLink(href);
 
-    const hrefI18n =
-      href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
+  // 如果链接是内部的且提供了有效的 href，则获取本地化 URL。
+  const hrefI18n =
+    href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
 
-    const handleClick = (event) => {
-      if (onClick) {
-        onClick(event);
-      }
-      if (
-        !isExternalLink &&
-        href &&
-        event.button === 0 &&
-        !event.metaKey &&
-        !event.ctrlKey &&
-        !event.shiftKey &&
-        !event.altKey &&
-        !props.target
-      ) {
-        event.preventDefault();
-        if (location.url !== hrefI18n) {
-          route(hrefI18n, replace);
-        }
-      }
-    };
+  return (
+    <a href={hrefI18n} ref={ref} {...props}>
+      {children}
+    </a>
+  );
+});
 
-    return (
-      <a href={hrefI18n} ref={ref} onClick={handleClick} {...props}>
-        {children}
-      </a>
-    );
-  }
-);
+Link.displayName = "Link";
 ```
 
-```jsx fileName="src/components/LocalizedLink.cjsx" codeFormat="commonjs"
+```jsx fileName="src/components/Link.cjsx" codeFormat="commonjs"
 const { getLocalizedUrl } = require("intlayer");
 const { useLocale } = require("preact-intlayer");
-const { useLocation, route } = require("preact-iso"); // 从 preact-iso 导入
 const { forwardRef } = require("preact/compat");
-const { h } = require("preact"); // 用于 JSX
 
+/**
+ * 检查给定 URL 是否为外部链接的实用函数。
+ * 如果 URL 以 http:// 或 https:// 开头，则被视为外部链接。
+ */
 const checkIsExternalLink = (href) => /^https?:\/\//.test(href ?? "");
 
-// 检查是否为外部链接的函数
-const LocalizedLink = forwardRef(
-  ({ href, children, onClick, replace = false, ...props }, ref) => {
-    const { locale } = useLocale(); // 获取当前语言环境
-    const location = useLocation(); // 获取当前路由信息
-    const isExternalLink = checkIsExternalLink(href); // 判断是否为外部链接
-
-    // 如果是内部链接，则根据当前语言环境生成本地化链接
-    const hrefI18n =
-      href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
-
-    const handleClick = (event) => {
-      if (onClick) {
-        onClick(event);
-      }
-      if (
-        !isExternalLink &&
-        href &&
-        event.button === 0 &&
-        !event.metaKey &&
-        !event.ctrlKey &&
-        !event.shiftKey &&
-        !event.altKey &&
-        !props.target
-      ) {
-        event.preventDefault();
-        if (location.url !== hrefI18n) {
-          route(hrefI18n, replace);
-        }
-      }
-    };
+/**
+ * 一个自定义 Link 组件，根据当前语言环境自适应 href 属性。
+ * 对于内部链接，它使用 `getLocalizedUrl` 为 URL 添加语言环境前缀（例如 /fr/about）。
+ * 这确保了导航保持在同一语言环境上下文中。
+ */
+const Link = forwardRef(({ href, children, ...props }, ref) => {
+  const { locale } = useLocale();
+  const isExternalLink = checkIsExternalLink(href);
+
+  // 如果链接是内部的且提供了有效的 href，则获取本地化 URL。
+  const hrefI18n =
+    href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
+
+  return h(
+    "a",
+    {
+      href: hrefI18n,
+      ref: ref,
+      ...props,
+    },
+    children
+  );
+});
 
-    return (
-      <a href={hrefI18n} ref={ref} onClick={handleClick} {...props}>
-        {children}
-      </a>
-    );
-  }
-);
+Link.displayName = "Link";
 
-module.exports = { LocalizedLink, checkIsExternalLink };
+module.exports = { Link, checkIsExternalLink };
 ```
 
 #### 工作原理
 
 - **检测外部链接**：  
-  辅助函数 `checkIsExternalLink` 用于判断 URL 是否为外部链接。外部链接保持不变。
-- **获取当前语言环境**：  
-  `useLocale` 钩子提供当前的语言环境。
+  辅助函数 `checkIsExternalLink` 确定 URL 是否为外部。外部链接保持不变，因为它们不需要本地化。
+- **检索当前语言环境**：  
+  `useLocale` 钩子提供当前的语言环境（例如，法语为 `fr`）。
 - **本地化 URL**：  
-  对于内部链接，`getLocalizedUrl` 会在 URL 前添加当前语言环境的前缀。
-- **客户端导航**：
-  `handleClick` 函数会检查链接是否为内部链接以及是否应阻止标准导航。如果是，则使用 `preact-iso` 的 `route` 函数（通过 `useLocation` 获取或直接导入）来执行客户端导航。这提供了类似 SPA 的行为，而无需完全重新加载页面。
+  对于内部链接（即非外部链接），使用 `getLocalizedUrl` 自动为 URL 添加当前语言环境的前缀。这意味着如果您的用户处于法语环境，将 `/about` 作为 `href` 传递将使其转换为 `/fr/about`。
 - **返回链接**：  
-  该组件返回一个带有本地化 URL 和自定义点击处理程序的 `<a>` 元素。
+  该组件返回一个带有本地化 URL 的 `<a>` 元素，确保导航与语言环境保持一致。
+
+### （可选）第 11 步：渲染 Markdown 和 HTML
+
+Intlayer 支持在 Preact 中渲染 Markdown 和 HTML 内容。
+
+您可以通过使用 `.use()` 方法自定义 Markdown 和 HTML 内容的渲染。此方法允许您覆盖特定标签的默认渲染。
+
+```tsx
+import { useIntlayer } from "preact-intlayer";
+
+const { myMarkdownContent, myHtmlContent } = useIntlayer("my-component");
+
+// ...
+
+return (
+  <div>
+    {/* 基本渲染 */}
+    {myMarkdownContent}
+
+    {/* Markdown 的自定义渲染 */}
+    {myMarkdownContent.use({
+      h1: (props) => <h1 style={{ color: "red" }} {...props} />,
+    })}
+
+    {/* HTML 的基本渲染 */}
+    {myHtmlContent}
+
+    {/* HTML 的自定义渲染 */}
+    {myHtmlContent.use({
+      b: (props) => <strong style={{ color: "blue" }} {...props} />,
+    })}
+  </div>
+);
+```
 
 ### 配置 TypeScript
 
 Intlayer 使用模块增强来利用 TypeScript 的优势，使您的代码库更健壮。
 
-![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+![自动补全](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+![翻译错误](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 确保您的 TypeScript 配置包含自动生成的类型。
 
@@ -1724,7 +1319,7 @@ Intlayer 使用模块增强来利用 TypeScript 的优势，使您的代码库
   "compilerOptions": {
     // ...
     "jsx": "react-jsx",
-    "jsxImportSource": "preact", // 推荐用于 Preact 10 及以上版本
+    "jsxImportSource": "preact", // 推荐用于 Preact 10+
     // ...
   },
   "include": [
@@ -1734,13 +1329,13 @@ Intlayer 使用模块增强来利用 TypeScript 的优势，使您的代码库
 }
 ```
 
-> 确保您的 `tsconfig.json` 针对 Preact 进行了设置，特别是 `jsx` 和 `jsxImportSource`，或者对于旧版本的 Preact，如果不使用 `preset-vite` 的默认配置，则需配置 `jsxFactory`/`jsxFragmentFactory`。
+> 确保您的 `tsconfig.json` 已为 Preact 设置，特别是 `jsx` 和 `jsxImportSource`；如果不使用 `preset-vite` 的默认值，对于较旧的 Preact 版本，还需要设置 `jsxFactory`/`jsxFragmentFactory`。
 
 ### Git 配置
 
-建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。
+建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库。
 
-要做到这一点，您可以将以下指令添加到您的 `.gitignore` 文件中：
+为此，您可以在 `.gitignore` 文件中添加以下指令：
 
 ```plaintext
 # 忽略 Intlayer 生成的文件
@@ -1753,19 +1348,19 @@ Intlayer 使用模块增强来利用 TypeScript 的优势，使您的代码库
 
 [从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-该扩展提供：
+此扩展提供：
 
-- 翻译键的**自动补全**。
-- 缺失翻译的**实时错误检测**。
-- 翻译内容的**内联预览**。
-- 轻松创建和更新翻译的**快速操作**。
+- **自动补全** 翻译键。
+- **实时错误检测** 缺失的翻译。
+- **内联预览** 翻译内容。
+- **快速操作** 轻松创建和更新翻译。
 
-有关如何使用该扩展的更多详细信息，请参阅 [Intlayer VS Code 扩展文档](https://intlayer.org/doc/vs-code-extension)。
+有关如何使用该扩展的更多详细信息，请参考 [Intlayer VS Code 扩展文档](https://intlayer.org/doc/vs-code-extension)。
 
 ---
 
-### 深入探索
+### 深入了解
 
-要进一步使用，您可以实现[可视化编辑器](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) 将内容外部化。
 
 ---