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

package/docs/zh/intlayer_with_vite+vue.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Vite + Vue i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Vite + Vue 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -34,38 +34,59 @@ author: aymericzip
 
 请参阅 GitHub 上的[应用模板](https://github.com/aymericzip/intlayer-vite-vue-template)。
 
+## 目录
+
+<TOC/>
+
 ## 为什么选择 Inlayer 而不是替代品？
 
 与“vue-i18n”或“i18next”等主要解决方案相比，Intlayer是一个具有集成优化的解决方案，例如：
 
-**完整的 Vue 覆盖**
+<AccordionGroup>
+
+<Accordion header="完整的 Vue 覆盖">
 
 Intlayer 经过优化，可与 Vue 完美配合，提供**组件级内容范围**、**反应式翻译**以及​​扩展国际化 (i18n) 所需的所有功能。
 
-**捆绑尺寸**
+</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>
+
 ---
 
 ## 在 Vite 和 Vue 应用中设置 Intlayer 的分步指南
@@ -102,7 +123,9 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 
 请参阅 GitHub 上的[应用模板](https://github.com/aymericzip/intlayer-vite-vue-template)。
 
-### 第一步：安装依赖
+<Steps>
+
+<Step number={1} title="安装依赖">
 
 使用 npm 安装所需的包：
 
@@ -156,7 +179,9 @@ bun add vite-intlayer --dev
 - **vite-intlayer**
   包含用于将 Intlayer 集成到 [Vite 打包工具](https://vite.dev/guide/why.html#why-bundle-for-production) 的 Vite 插件，以及用于检测用户首选语言环境、管理 Cookie 和处理 URL 重定向的中间件。
 
-### 第 2 步：配置您的项目
+</Step>
+
+<Step number={2} title="配置您的项目">
 
 创建一个配置文件来配置应用程序的语言：
 
@@ -180,7 +205,9 @@ export default config;
 
 > 通过此配置文件，您可以设置本地化的 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名，禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
 
-### 第三步：在您的 Vite 配置中集成 Intlayer
+</Step>
+
+<Step number={3} title="在您的 Vite 配置中集成 Intlayer">
 
 将 intlayer 插件添加到您的配置中。
 
@@ -197,7 +224,9 @@ export default defineConfig({
 
 > `intlayer()` Vite 插件用于将 Intlayer 集成到 Vite 中。它确保构建内容声明文件并在开发模式下监视这些文件。在 Vite 应用中定义了 Intlayer 环境变量。此外，它还提供别名以优化性能。
 
-### 第4步：声明您的内容
+</Step>
+
+<Step number={4} title="声明您的内容">
 
 创建并管理您的内容声明以存储翻译：
 
@@ -321,7 +350,9 @@ export default helloWorldContent;
 
 > 更多详情，请参阅[内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
 
-### 第5步：在代码中使用 Intlayer
+</Step>
+
+<Step number={5} title="在代码中使用 Intlayer">
 
 要在整个 Vue 应用中使用 Intlayer 的国际化功能，首先需要在主文件中注册 Intlayer 单例实例。这一步非常关键，因为它为应用中的所有组件提供了国际化上下文，使得翻译内容可以在组件树中的任何位置访问。
 
@@ -415,6 +446,8 @@ Intlayer 提供了多种 API 来访问您的内容：
 
 <Steps>
 
+</Step>
+
 <Step number={6} title="更改内容语言">
 
 要更改内容的语言，可以使用 `useLocale` 组合函数提供的 `setLocale` 函数。该函数允许你设置应用的语言环境，并相应地更新内容。
@@ -871,57 +904,7 @@ import RouterLink from "@components/RouterLink.vue";
 
 </Step>
 
-<Step number={11} title="渲染 Markdown">
-
-Intlayer 支持在您的 Vue 应用中直接渲染 Markdown 内容。默认情况下，Markdown 被视为纯文本。要将 Markdown 转换为丰富的 HTML，您可以集成一个 Markdown 解析器 [markdown-it](https://github.com/markdown-it/markdown-it)。
-
-当您的翻译内容包含格式化内容，如列表、链接或强调时，这尤其有用。
-
-默认情况下，Intlayer 将 Markdown 渲染为字符串。但 Intlayer 也提供了一种使用 `installIntlayerMarkdown` 函数将 Markdown 渲染为 HTML 的方式。
-
-> 要了解如何使用 `intlayer` 包声明 Markdown 内容，请参见 [markdown 文档](https://github.com/aymericzip/intlayer/tree/main/docs/zh/dictionary/markdown.md)。
-
-```ts fileName="main.ts"
-import MarkdownIt from "markdown-it";
-import { createApp, h } from "vue";
-import { installIntlayer, installIntlayerMarkdown } from "vue-intlayer";
-
-const app = createApp(App);
-
-app.use(intlayer);
-
-const md = new MarkdownIt({
-  html: true, // 允许 HTML 标签
-  linkify: true, // 自动识别链接
-  typographer: true, // 启用智能引号、破折号等排版功能
-});
-
-// 告诉 Intlayer 在需要将 markdown 转换为 HTML 时使用 md.render()
-installIntlayerMarkdown(app, (markdown) => {
-  const html = md.render(markdown);
-  return h("div", { innerHTML: html });
-});
-```
-
-注册完成后，您可以使用基于组件的语法直接显示 Markdown 内容：
-
-```vue
-<template>
-  <div>
-    <myMarkdownContent />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-const { myMarkdownContent } = useIntlayer("my-component");
-</script>
-```
-
-</Step>
-
-<Step number={1} title="提取组件内容" isOptional={true}>
+<Step number={11} title="提取组件内容" isOptional={true}>
 
 如果您有现有的代码库，转换数千个文件可能会非常耗时。
 
@@ -1020,76 +1003,6 @@ bun run build # Or bun run dev
 
 </Steps>
 
-### 配置 TypeScript
-
-Intlayer 使用模块增强来利用 TypeScript 的优势，使您的代码库更强大。
-
-![Autocompletion](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)
-
-确保您的 TypeScript 配置包含自动生成的类型。
-
-```json5 fileName="tsconfig.json"
-{
-  // ... 您现有的 TypeScript 配置
-  "include": [
-    // ... 您现有的 TypeScript 配置
-    ".intlayer/**/*.ts", // 包含自动生成的类型
-  ],
-}
-```
-
-### Git 配置
-
-建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。
-
-为此，您可以在 `.gitignore` 文件中添加以下指令：
-
-```bash
-#  忽略 Intlayer 生成的文件
-.intlayer
-```
-
-### VS Code 扩展
-
-为了提升您使用 Intlayer 的开发体验，您可以安装官方的 **Intlayer VS Code 扩展**。
-
-[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-该扩展提供：
-
-- 翻译键的 **自动补全**。
-- 缺失翻译的 **实时错误检测**。
-- 翻译内容的 **内联预览**。
-- 轻松创建和更新翻译的 **快速操作**。
-
-建议忽略由 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。
-
-为此，您可以在 `.gitignore` 文件中添加以下指令：
-
-```bash
-#  忽略由 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)。
-
----
-
 ### （可选）站点地图与 robots.txt（构建时生成）
 
 Intlayer 提供 `generateSitemap` 与 `getMultilingualUrls`，可将面向爬虫的多语言 `sitemap.xml` 和 `robots.txt` 格式化并自动写入 `public/`。实践中在 Vite **之前**运行小型 Node 脚本（例如 npm 的 `predev` / `prebuild`）即可在构建或开发时生成这些文件。
@@ -1164,8 +1077,54 @@ console.log("SEO files generated successfully.");
 
 若使用 pnpm 或 yarn，请相应调整命令；也可在 CI 或其他步骤中调用该脚本。
 
-### 深入了解
+### 配置 TypeScript
+
+Intlayer 使用模块扩展 (module augmentation) 来利用 TypeScript 的优势，并使你的 codebase 更强大。
+
+![Autocompletion](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)
+
+确保你的 TypeScript 配置包含了自动生成的类型。
+
+```json5 fileName="tsconfig.json"
+{
+  // ... 你现有的 TypeScript 配置
+  "include": [
+    // ... 你现有的 TypeScript 配置
+    ".intlayer/**/*.ts", // 包含自动生成的类型
+  ],
+}
+```
+
+### Git 配置
 
-要进一步使用，您可以实现 [可视化编辑器](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) 来外部管理您的内容。
+建议忽略由 Intlayer 生成的文件。这可以让你避免将它们提交到你的 Git 仓库。
+
+为此，你可以将以下指令添加到你的 `.gitignore` 文件中：
+
+```plaintext fileName=".gitignore"
+# 忽略由 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/zh/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)将内容外部化。

package/docs/zh/mcp_server.md

@@ -248,6 +248,10 @@ bun x intlayer init mcp
 
 ---
 
+## 在 Claude Code (CLI) 中设置
+
+按照[官方文档](https://modelcontextprotocol.io/quickstart/user)来配置 MCP server 在 Claude Code 中。
+
 ## 通过命令行界面使用 MCP 服务器
 
 您也可以直接从命令行运行 Intlayer MCP 服务器，用于测试、调试或与其他工具集成。
@@ -261,3 +265,25 @@ npx @intlayer/mcp
 ```
 
 ---
+
+### 远程服务器 (Streamable HTTP)
+
+要使用 Streamable HTTP (SSE) 将 Intlayer MCP 服务器连接到 Claude Code：
+
+```bash
+claude mcp add intlayer https://mcp.intlayer.org -t http
+```
+
+---
+
+## 通过 CLI 使用 MCP Server
+
+您也可以直接从命令行运行 Intlayer MCP server，用于测试、调试或与其他工具集成。
+
+```bash
+# 全局安装
+npm install -g @intlayer/mcp
+
+# 或使用 npx 直接运行（推荐）
+npx @intlayer/mcp
+```

package/docs/zh/migration_from_i18next_to_intlayer.md

@@ -0,0 +1,330 @@
+---
+createdAt: 2026-06-05
+updatedAt: 2026-06-05
+title: "从 i18next 迁移到 Intlayer | 国际化 (i18n)"
+description: "了解如何逐步将你的 JavaScript/TypeScript 应用从 i18next 迁移到 Intlayer，无需破坏现有代码。使用 @intlayer/i18next 兼容适配器实现零中断转换。"
+keywords:
+  - i18next
+  - intlayer
+  - migration
+  - internationalization
+  - i18n
+  - JavaScript
+  - Node.js
+slugs:
+  - doc
+  - migration
+  - i18next
+history:
+  - version: 9.0.0
+    date: 2026-06-05
+    changes: "Init history"
+author: aymericzip
+---
+
+# 从 i18next 迁移到 Intlayer
+
+## 为什么从 i18next 迁移到 Intlayer?
+
+<AccordionGroup>
+
+<Accordion header="Bundle 大小">
+
+与其将庞大的 JSON 文件加载到页面中，不如仅加载必要的内容。Intlayer 帮助**将 bundle 和页面大小减少高达 50%**。
+
+</Accordion>
+
+<Accordion header="可维护性">
+
+限定应用内容的范围**便于大规模应用的维护**。您可以复制或删除单个功能文件夹，而无需费力审查整个内容 codebase。此外，Intlayer **完全类型化**以确保内容的准确性。
+
+Intlayer 也是 i18n 生态系统中**开发最活跃的**解决方案——问题得到快速修复，新的框架适配器定期发布，核心 API 根据真实生产反馈不断改进。
+
+</Accordion>
+
+<Accordion header="AI Agent">
+
+内容共定位**减少了大型语言模型 (LLM) 所需的上下文**。Intlayer 还提供一套工具，如**CLI** 来测试缺失的翻译、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/mcp_server.md)** 和**[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/agent_skills.md)**，使 AI agents 的开发者体验 (DX) 更加顺利。
+
+</Accordion>
+
+<Accordion header="自动化">
+
+使用自动化在您的 CI/CD pipeline 中进行翻译，使用您选择的 LLM，费用由您的 AI 提供商承担。Intlayer 还提供**编译器**来自动化内容提取，以及一个 [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md) 来帮助**在后台翻译**。
+
+</Accordion>
+
+<Accordion header="性能">
+
+将庞大的 JSON 文件连接到组件可能导致性能和响应性问题。Intlayer 在构建时优化您的内容加载。
+
+</Accordion>
+
+<Accordion header="与非开发人员协作扩展">
+
+不仅仅是一个 i18n 解决方案，Intlayer 提供**自托管的[可视化编辑器](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)** 来帮助您**实时**管理多语言内容，使与翻译人员、文案编写者和其他团队成员的协作无缝衔接。内容可以本地和/或远程存储。
+
+</Accordion>
+
+</AccordionGroup>
+
+---
+
+## 迁移策略
+
+从 `i18next` 迁移到 Intlayer 有两种互补策略：
+
+1. **兼容性适配器（推荐用于现有应用）** — 安装 `@intlayer/i18next`。这个包暴露了与 `i18next` **完全相同的 API**，但在底层将所有翻译工作委托给 Intlayer。你可以保留现有的 `i18next.t()`、`i18next.changeLanguage()` 和 `createInstance()` 调用 — 唯一的改变是导入路径和初始化方式。
+
+2. **完整迁移** — 逐步用原生 Intlayer 工具替换 `i18next` API，并在 `.content.ts` 文件中并置内容。
+
+本指南首先涵盖**策略 1**（即插即用的兼容性适配器），然后演示可选的完整迁移。
+
+---
+
+## 目录
+
+<TOC/>
+
+---
+
+## 快速迁移
+
+以下步骤是使现有 `i18next` 应用以零代码更改运行在 Intlayer 上所需的最少要求。
+
+<Steps>
+
+<Step number={1} title="安装依赖">
+
+安装 Intlayer 核心包和兼容性适配器：
+
+```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 @intlayer/i18next @intlayer/sync-json-plugin
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/i18next @intlayer/sync-json-plugin
+```
+
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/i18next @intlayer/sync-json-plugin
+```
+
+```bash packageManager="bun"
+bun add intlayer @intlayer/i18next @intlayer/sync-json-plugin
+```
+
+> 你可以保持 `i18next` 的安装 — 兼容性适配器将其用作 `devDependency` / `peerDependency` 来获取 TypeScript 类型。
+
+</Step>
+
+<Step number={2} title="配置 Intlayer">
+
+`intlayer init` 命令创建一个起始的 `intlayer.config.ts`。更新它以匹配你现有的语言环境并将 `syncJSON` 插件指向你的消息文件：
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // 在此处添加所有现有语言环境
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+  plugins: [
+    syncJSON({
+      // 匹配 i18next 占位符语法：{{name}}
+      format: "i18next",
+      source: ({ locale }) => `./src/locales/${locale}.json`,
+      location: "src/locales",
+    }),
+  ],
+};
+
+export default config;
+```
+
+> **`source`** 将语言环境映射到其 JSON 文件路径。**`location`** 告诉 Intlayer 监听器应监控哪个文件夹以获取更改。`format: 'i18next'` 选项确保正确解析占位符，如 `{{name}}`。
+
+</Step>
+
+<Step number={3} title="更新 Bundler 别名（可选）">
+
+如果你使用 bundler（Vite、Webpack、esbuild），可以注入模块别名，使得 `import ... from 'i18next'` 自动解析为 `@intlayer/i18next`。这消除了手动更改代码库中任何导入的需要。
+
+**对于 Vite：**
+
+```typescript fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { defineConfig } from "vite";
+import i18nextVitePlugin from "@intlayer/i18next/plugin";
+
+export default defineConfig({
+  plugins: [i18nextVitePlugin()],
+});
+```
+
+> `i18nextVitePlugin()` 包装 `vite-intlayer` 的 `intlayer()` 插件，并为你添加 `i18next` → `@intlayer/i18next` 别名。使用来自 `vite-intlayer` 的普通 `intlayer()` 插件会编译字典，但 **不会** 添加该别名 — 你需要手动将导入重命名为 `@intlayer/i18next`（见下一步）。
+
+</Step>
+
+</Steps>
+
+这就是快速迁移的全部内容。你的应用现在运行在 Intlayer 上，同时保持每个 `i18next` 导入和 API 完整。
+
+---
+
+## 完整迁移
+
+下面的步骤是可选的，可以逐步完成。它们解锁了完整的 Intlayer 功能集：可视化编辑器、CMS、类型化内容文件、AI 驱动的翻译等。
+
+<Steps>
+
+<Step number={4} title="显式导入重命名（可选）" isOptional={true}>
+
+如果您想在源文件中明确声明依赖关系，或者您没有使用 bundler 插件来别名导入，您可以手动重命名导入：
+
+| 之前                                       | 之后                                                 |
+| ------------------------------------------ | ---------------------------------------------------- |
+| `import i18next from 'i18next'`            | `import i18next from '@intlayer/i18next'`            |
+| `import { createInstance } from 'i18next'` | `import { createInstance } from '@intlayer/i18next'` |
+| `import { t } from 'i18next'`              | `import { t } from '@intlayer/i18next'`              |
+
+这些是**直接替换** — 不需要对调用签名、参数或返回类型进行任何更改。
+
+</Step>
+
+<Step number={5} title="启用 AI 驱动的翻译自动化" isOptional={true}>
+
+Intlayer 配置完成后，使用其 CLI 自动填充缺失的翻译：
+
+```bash packageManager="npm"
+# 测试缺失的翻译（添加到 CI）
+npx intlayer test
+
+# 使用 AI 填充缺失的翻译
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer test
+pnpm intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn intlayer test
+yarn intlayer fill
+```
+
+```bash packageManager="bun"
+bun x intlayer test
+bun x intlayer fill
+```
+
+将 AI 配置添加到 `intlayer.config.ts`：
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  plugins: [
+    syncJSON({
+      format: "i18next",
+      source: ({ locale }) => `./src/locales/${locale}.json`,
+      location: "src/locales",
+    }),
+  ],
+  ai: {
+    apiKey: process.env.OPENAI_API_KEY,
+    // provider: "openai",     // 默认值
+    // model: "gpt-4o-mini",   // 默认值
+  },
+};
+
+export default config;
+```
+
+> 查看 [Intlayer CLI 文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/index.md) 了解所有可用选项。
+
+</Step>
+
+</Steps>
+
+---
+
+## 迁移后可以删除的内容
+
+一旦 compat adapter 就位，以下 `i18next` 样板代码可以删除：
+
+| 文件 / 模式                    | 为什么不再需要                                                                                       |
+| ------------------------------ | ---------------------------------------------------------------------------------------------------- |
+| `i18next.init()` 调用          | Intlayer 自动初始化所有内容；没有运行时加载步骤。                                                    |
+| `i18next.use(...)`             | Intlayer 不使用 i18next 插件、后端或语言检测器。                                                     |
+| JSON 语言包 (`locales/*.json`) | JSON 包仅在您仍然使用 `syncJSON` 插件时才需要。迁移到 `.content.ts` 文件后，您可以删除 JSON 文件夹。 |
+
+当您准备进一步操作时，Intlayer **自动发现您的 codebase 中任何地方的所有 `.content.ts` 和 `.content.json` 文件**（默认情况下，在 `./src` 内的任何地方）。您可以将 `my-component.content.ts` 文件放在逻辑代码的旁边，Intlayer 将在构建时自动发现它，无需任何额外配置——无需导入、无需注册、无需集中索引文件。这使得共置翻译完全无摩擦。
+
+---
+
+## 配置 TypeScript
+
+Intlayer 使用模块增强来为您的翻译键提供完整的 TypeScript intellisense。确保您的 `tsconfig.json` 包含自动生成的类型：
+
+```json5 fileName="tsconfig.json"
+{
+  // ... 您现有的 TypeScript 配置
+  "include": [
+    // ... 您现有的 TypeScript 配置
+    ".intlayer/**/*.ts", // 包含自动生成的类型
+  ],
+}
+```
+
+---
+
+## Git 配置
+
+将 Intlayer 生成的目录添加到你的 `.gitignore`：
+
+```plaintext fileName=".gitignore"
+# Ignore the files generated by Intlayer
+.intlayer
+```
+
+---
+
+## 深入了解
+
+- **Visual Editor** — 在浏览器中直观管理翻译: [Intlayer Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_visual_editor.md)
+- **CMS** — 外部化和远程管理内容: [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md)
+- **VS Code Extension** — 获得自动完成和实时翻译错误检测: [Intlayer VS Code Extension](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/vs_code_extension.md)
+- **CLI Reference** — CLI 命令完整列表: [Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/index.md)