@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.6

package/docs/zh/intlayer_with_lynx+react.md

@@ -67,238 +67,6 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 
 ---
 
-## 第一步：安装依赖
-
-在您的 Lynx 项目中，安装以下包：
-
-```bash packageManager="npm"
-npx intlayer-cli init --interactive
-```
-
-```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
-```
-
-```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
-```
-
-```bash packageManager="bun"
-bunx intlayer-cli init --interactive
-```
-
-> `--interactive` 标志是可选的。如果您是 AI 代理，请使用 `intlayer-cli init`。
-
-> 该命令将检测您的环境并安装所需的软件包。例如：
-
-```bash packageManager="npm"
-npm install intlayer react-intlayer lynx-intlayer
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer lynx-intlayer
-```
-
-```bash packageManager="yarn"
-yarn add intlayer react-intlayer lynx-intlayer
-```
-
-```bash packageManager="bun"
-bun add intlayer react-intlayer lynx-intlayer
-```
-
-### 包说明
-
-- **intlayer**  
-  核心 i18n 工具包，用于配置、字典内容、类型生成和 CLI 命令。
-
-- **react-intlayer**  
-  React 集成，提供上下文提供者和 React hooks，您将在 Lynx 中使用它来获取和切换语言。
-
-- **lynx-intlayer**  
-  Lynx 集成，提供将 Intlayer 与 Lynx 打包器集成的插件。
-
----
-
-## 第二步：创建 Intlayer 配置
-
-在项目根目录（或任何方便的位置）创建一个 **Intlayer 配置** 文件。它可能如下所示：
-
-```ts 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;
-```
-
-在此配置中，您可以：
-
-- 配置您的**支持语言列表**。
-- 设置一个**默认**语言。
-- 以后，您可以添加更高级的选项（例如日志、自定义内容目录等）。
-- 查看 [Intlayer 配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md) 了解更多。
-
-## 第三步：将 Intlayer 插件添加到 Lynx 打包器
-
-要在 Lynx 中使用 Intlayer，您需要将插件添加到 `lynx.config.ts` 文件中：
-
-```ts fileName="lynx.config.ts"
-import { defineConfig } from "@lynx-js/rspeedy";
-import { pluginIntlayerLynx } from "lynx-intlayer/plugin";
-
-export default defineConfig({
-  plugins: [
-    // ... 其他插件
-    pluginIntlayerLynx(),
-  ],
-});
-```
-
-## 第四步：添加 Intlayer 提供者
-
-为了在您的应用程序中同步用户语言，您需要使用 `react-intlayer` 中的 `IntlayerProvider` 组件包装您的根组件。
-
-此外，您需要添加 `intlayerPolyfill` 函数文件，以确保 Intlayer 能够正常工作。
-
-```tsx fileName="src/index.tsx"
-import { root } from "@lynx-js/react";
-
-import { App } from "./App.js";
-import { IntlayerProvider } from "react-intlayer";
-import { intlayerPolyfill } from "lynx-intlayer";
-
-intlayerPolyfill();
-
-root.render(
-  <IntlayerProvider>
-    <App />
-  </IntlayerProvider>
-);
-
-if (import.meta.webpackHot) {
-  import.meta.webpackHot.accept();
-}
-```
-
-## 第五步：声明您的内容
-
-在项目中的任何位置创建**内容声明**文件（通常在 `src/` 中），使用 Intlayer 支持的任何扩展格式：
-
-- `.content.json`
-- `.content.ts`
-- `.content.tsx`
-- `.content.js`
-- `.content.jsx`
-- `.content.mjs`
-- `.content.mjx`
-- `.content.cjs`
-- `.content.cjx`
-- 等等。
-
-示例：
-
-```tsx fileName="src/app.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-const appContent = {
-  key: "app",
-  content: {
-    title: "React",
-    subtitle: t({
-      en: "on Lynx",
-      fr: "sur Lynx",
-      es: "en Lynx",
-    }),
-    description: t({
-      zh: "点击标志并享受乐趣！",
-      en: "Tap the logo and have fun!",
-      fr: "Appuyez sur le logo et amusez-vous!",
-      es: "¡Toca el logo y diviértete!",
-    }),
-    hint: [
-      t({
-        zh: "编辑",
-        en: "Edit",
-        fr: "Modifier",
-        es: "Editar",
-      }),
-      " src/App.tsx ",
-      t({
-        zh: "以查看更新！",
-        en: "to see updates!",
-        fr: "pour voir les mises à jour!",
-        es: "para ver actualizaciones!",
-      }),
-    ],
-  },
-} satisfies Dictionary;
-
-export default appContent;
-```
-
-```json fileName="src/app.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "app",
-  "content": {
-    "title": "React",
-    "subtitle": {
-      "nodeType": "translation",
-      "translation": {
-        "en": "on Lynx",
-        "zh": "在 Lynx 上",
-        "fr": "sur Lynx",
-        "es": "en Lynx"
-      }
-    },
-"description": {
-  "nodeType": "translation",
-  "translation": {
-    "zh": "点击标志并享受乐趣！",
-    "en": "Tap the logo and have fun!",
-    "fr": "Appuyez sur le logo et amusez-vous!",
-    "es": "¡Toca el logo y diviértete!"
-  }
-},
-"hint": [
-  {
-    "nodeType": "translation",
-    "translation": {
-      "zh": "编辑",
-      "en": "Edit",
-      "fr": "Modifier",
-      "es": "Editar"
-    }
-  },
-  " src/App.tsx ",
-  {
-    "nodeType": "translation",
-    "translation": {
-      "zh": "查看更新！",
-      "en": "to see updates!",
-      "fr": "pour voir les mises à jour!",
-      "es": "para ver actualizaciones!"
-    }
-  }
-]
-}
-```
-
-> 有关内容声明的详细信息，请参阅 [Intlayer 的内容文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
-
----
-
 ## 第 4 步：在组件中使用 Intlayer
 
 在子组件中使用 `useIntlayer` 钩子以获取本地化内容。
@@ -357,49 +125,6 @@ export const App = () => {
 
 ---
 
-## （可选）第 5 步：更改应用程序语言环境
-
-要从组件内部切换语言环境，可以使用 `useLocale` 钩子的 `setLocale` 方法：
-
-```tsx fileName="src/components/LocaleSwitcher.tsx"
-import { type FC } from "react";
-import { getLocaleName } from "intlayer";
-import { useLocale } from "react-intlayer";
-
-export const LocaleSwitcher: FC = () => {
-  const { setLocale, availableLocales, locale } = useLocale();
-
-  return (
-    <view
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: 10,
-      }}
-    >
-      {availableLocales.map((localeEl) => (
-        <text
-          key={localeEl}
-          style={{
-            color: localeEl === locale ? "#fff" : "#888",
-            fontSize: "12px",
-          }}
-          bindtap={() => setLocale(localeEl)}
-        >
-          {getLocaleName(localeEl)}
-        </text>
-      ))}
-    </view>
-  );
-};
-```
-
-这将触发使用 Intlayer 内容的所有组件的重新渲染，现在显示新语言环境的翻译。
-
-> 有关更多详细信息，请参阅 [`useLocale` 文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useLocale.md)。
-
 ## 配置 TypeScript（如果您使用 TypeScript）
 
 Intlayer 在一个隐藏文件夹中生成类型定义（默认是 `.intlayer`），以改进自动补全并捕获翻译错误：

package/docs/zh/intlayer_with_nestjs.md

@@ -33,24 +33,6 @@ history:
 
 `express-intlayer` 是一个功能强大的国际化（i18n）中间件，适用于 Express 应用程序，旨在通过根据客户端的偏好提供本地化响应，使您的后端服务能够面向全球用户。由于 NestJS 构建在 Express 之上，您可以将 `express-intlayer` 无缝集成到您的 NestJS 应用中，有效处理多语言内容。
 
-## 为什么要对后端进行国际化？
-
-对后端进行国际化对于有效服务全球用户至关重要。它允许您的应用程序以每个用户偏好的语言提供内容和消息。这种能力提升了用户体验，并通过使应用程序对不同语言背景的人更易访问和相关，扩大了应用的影响范围。
-
-### 实际应用场景
-
-- **以用户语言显示后端错误**：当发生错误时，以用户的母语显示消息可以提高理解度并减少挫败感。这对于可能在前端组件如提示框或模态框中显示的动态错误消息尤其有用。
-
-- **检索多语言内容**：对于从数据库获取内容的应用程序，国际化确保您可以以多种语言提供这些内容。这对于需要以用户偏好语言显示产品描述、文章及其他内容的电商平台或内容管理系统至关重要。
-
-- **发送多语言电子邮件**：无论是事务性电子邮件、营销活动还是通知，以收件人语言发送邮件都能显著提高参与度和效果。
-
-- **多语言推送通知**：对于移动应用程序，以用户偏好的语言发送推送通知可以增强互动和用户留存。这种个性化的触达使通知更具相关性和可操作性。
-
-- **其他通信**：来自后端的任何形式的通信，如短信、系统警报或用户界面更新，使用用户的语言都有助于确保清晰度并提升整体用户体验。
-
-通过对后端进行国际化，您的应用不仅尊重文化差异，还能更好地符合全球市场需求，这使其成为扩展您的服务到全球的关键步骤。
-
 ## 入门指南
 
 ### 创建一个新的 NestJS 项目

package/docs/zh/intlayer_with_nextjs_14.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 14 i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Next.js 14 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -59,11 +59,16 @@ author: aymericzip
 
 请参阅 GitHub 上的[应用模板](https://github.com/aymericzip/intlayer-next-14-template)。
 
+## 目录
+
+<TOC/>
+
 ## 为什么选择 Inlayer 而不是替代品？
 
 与“next-intl”或“i18next”等主要解决方案相比，Intlayer是一个具有集成优化的解决方案，例如：
 
-**完整的 Next.js 覆盖**
+<AccordionGroup>
+<Accordion header="完整的 Next.js 覆盖">
 
 Intlayer 经过优化，可以与 **服务器组件** 配合使用，以实现高效渲染，并且与 [**Turbopack**](https://nextjs.org/docs/architecture/turbopack) 完全兼容。它不会阻止静态渲染，并提供中间件以及扩展国际化 (i18n) 所需的所有功能。
 
@@ -71,35 +76,52 @@ Intlayer 经过优化，可以与 **服务器组件** 配合使用，以实现
 > 区域设置路由对于 SEO、Bundle 大小和性能很有用。如果不需要，可以参考这个[指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_no_locale_path.md)。
 > 对于带有 App Router 的 Next.js 12、13、14 和 15，请参阅此[指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_14.md)。
 
-**捆绑尺寸**
+</Accordion>
+
+<Accordion header="捆绑尺寸">
 
 不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
 
-**可维护性**
+</Accordion>
+
+<Accordion header="可维护性">
 
 确定应用程序内容的范围**有利于大型应用程序的维护**。您可以复制或删除单个功能文件夹，而无需承担检查整个内容代码库的精神负担。此外，Intlayer 具有**完全类型化 (fully typed)**，以确保您的内容的准确性。
 
-**人工智能代理**
+</Accordion>
+
+<Accordion header="人工智能代理">
 
 共置内容**减少大型语言模型 (LLM) 所需的上下文**。 Intlayer 还附带了一套工具，例如用于测试缺失翻译的 **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** 和 **[agent技能](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**，使 AI 代理的开发者体验 (DX) 更加流畅。
 
-**自动化**
+</Accordion>
+
+<Accordion header="自动化">
 
 使用您选择的法学硕士，通过自动化在 CI/CD 管道中进行翻译，而费用由您的 AI 提供商承担。 Intlayer 还提供了一个**编译器**来自动提取内容，以及一个[网络平台](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)来帮助**在后台翻译**。
 
-**表现**
+</Accordion>
+
+<Accordion header="表现">
 
 将大量 JSON 文件连接到组件可能会导致性能和反应性问题。 Intlayer 可在构建时 (build time)优化您的内容加载。
 
-**无需开发即可扩展**
+</Accordion>
+
+<Accordion header="无需开发即可扩展">
 
 Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)**和一个**[完整的 CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** 来帮助您管理多语言内容**实时**，与译员、文案人员和其他团队成员无缝协作。内容可以本地和/或远程存储。
 
+</Accordion>
+</AccordionGroup>
+
 ---
 
 ## 在 Next.js 应用中逐步设置 Intlayer 的指南
 
-### 第一步：安装依赖
+<Steps>
+
+<Step number={1} title="安装依赖">
 
 使用 npm 安装必要的包：
 
@@ -147,7 +169,9 @@ bun add intlayer next-intlayer
 
 集成 Intlayer 与 Next.js 的包。它为 Next.js 国际化提供上下文提供者和钩子。此外，它还包括用于将 Intlayer 集成到 [Webpack](https://webpack.js.org/) 或 [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack) 的 Next.js 插件，以及用于检测用户首选语言环境、管理 Cookie 和处理 URL 重定向的中间件。
 
-### 第 2 步：配置您的项目
+</Step>
+
+<Step number={2} title="配置您的项目">
 
 Here is the final structure that we will make:
 
@@ -199,7 +223,9 @@ export default config;
 
 > 通过此配置文件，你可以设置本地化的 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名，禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
 
-### 第3步：在你的 Next.js 配置中集成 Intlayer
+</Step>
+
+<Step number={3} title="在你的 Next.js 配置中集成 Intlayer">
 
 配置你的 Next.js 设置以使用 Intlayer：
 
@@ -214,7 +240,9 @@ export default withIntlayer(nextConfig);
 
 > `withIntlayer()` Next.js 插件用于将 Intlayer 集成到 Next.js 中。它确保内容声明文件的构建，并在开发模式下监视这些文件。它在 [Webpack](https://webpack.js.org/) 或 [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack) 环境中定义 Intlayer 环境变量。此外，它提供别名以优化性能，并确保与服务器组件的兼容性。
 
-### 第4步：配置中间件以检测语言环境
+</Step>
+
+<Step number={4} title="配置中间件以检测语言环境">
 
 设置中间件以检测用户的首选语言环境：
 
@@ -231,7 +259,9 @@ export const config = {
 
 > 请根据您的应用路由调整 `matcher` 参数。更多详情请参阅 [Next.js 关于配置 matcher 的文档](https://nextjs.org/docs/app/building-your-application/routing/middleware)。
 
-### 第五步：定义动态语言环境路由
+</Step>
+
+<Step number={5} title="定义动态语言环境路由">
 
 删除 `RootLayout` 中的所有内容，并替换为以下代码：
 
@@ -295,7 +325,9 @@ export default LocaleLayout;
 
 > `generateStaticParams` 确保您的应用程序为所有语言预构建必要的页面，从而减少运行时计算并提升用户体验。更多详情，请参阅 [Next.js 关于 generateStaticParams 的文档](https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering#generate-static-params)。
 
-### 第6步：声明您的内容
+</Step>
+
+<Step number={6} title="声明您的内容">
 
 创建并管理您的内容声明以存储翻译：
 
@@ -340,7 +372,9 @@ export default pageContent;
 
 > 更多详情，请参阅[内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
 
-### 第7步：在代码中使用内容
+</Step>
+
+<Step number={7} title="在代码中使用内容">
 
 在整个应用程序中访问您的内容字典：
 
@@ -526,6 +560,8 @@ const ServerComponentExample: FC = () => {
 
 <Steps>
 
+</Step>
+
 <Step number={8} title="元数据的国际化">
 
 如果您想对元数据进行国际化，例如页面标题，可以使用 Next.js 提供的 `generateMetadata` 函数。在该函数内部，您可以通过 `getIntlayer` 函数获取内容，从而翻译您的元数据。
@@ -1005,7 +1041,7 @@ Intlayer 使用模块增强来利用 TypeScript 的优势，使您的代码库
 {
   // ... 您现有的 TypeScript 配置
   "include": [
-    // ... 您现有的 TypeScript 配置
+    // ... 你现有的 TypeScript 配置
     ".intlayer/**/*.ts", // 包含自动生成的类型
   ],
 }
@@ -1013,9 +1049,9 @@ Intlayer 使用模块增强来利用 TypeScript 的优势，使您的代码库
 
 ### Git 配置
 
-建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。
+建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到你的 Git 仓库中。
 
-为此，您可以在 `.gitignore` 文件中添加以下指令：
+为此，你可以在 `.gitignore` 文件中添加以下内容：
 
 ```plaintext fileName=".gitignore"
 # 忽略 Intlayer 生成的文件
@@ -1024,19 +1060,21 @@ Intlayer 使用模块增强来利用 TypeScript 的优势，使您的代码库
 
 ### VS Code 扩展
 
-为了提升您使用 Intlayer 的开发体验，您可以安装官方的 **Intlayer VS Code 扩展**。
+为了提升你使用 Intlayer 的开发体验，你可以安装官方的 **Intlayer VS Code 扩展**。
 
 [从 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)来外部化您的内容。