@intlayer/docs 7.0.5 → 7.0.7

package/blog/vi/intlayer_with_vue-i18n.md

@@ -0,0 +1,180 @@
+---
+createdAt: 2025-08-23
+updatedAt: 2025-10-29
+title: Intlayer và vue-i18n
+description: Tích hợp Intlayer với vue-i18n cho giải pháp quốc tế hóa Vue.js toàn diện
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Quốc tế hóa
+  - Blog
+  - Vue.js
+  - Nuxt
+  - JavaScript
+  - Vue
+slugs:
+  - blog
+  - intlayer-with-vue-i18n
+history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Thêm plugin loadJSON
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Chuyển sang plugin syncJSON và viết lại toàn diện
+---
+
+# Quốc tế hóa Vue.js (i18n) với vue-i18n và Intlayer
+
+## Mục lục
+
+<TOC/>
+
+## Intlayer là gì?
+
+**Intlayer** là một thư viện quốc tế hóa mã nguồn mở sáng tạo, được thiết kế để khắc phục những hạn chế của các giải pháp i18n truyền thống. Nó cung cấp một cách tiếp cận hiện đại cho quản lý nội dung trong các ứng dụng Vue.js và Nuxt.
+
+Xem so sánh cụ thể với vue-i18n trong bài viết blog của chúng tôi [vue-i18n vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/vue-i18n_vs_intlayer.md).
+
+## Tại sao kết hợp Intlayer với vue-i18n?
+
+Trong khi Intlayer cung cấp một giải pháp i18n độc lập xuất sắc (xem hướng dẫn tích hợp Vue.js của chúng tôi [Vue.js integration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+vue.md)), bạn có thể muốn kết hợp nó với vue-i18n vì một số lý do:
+
+1. **Mã nguồn hiện có**: Bạn đã có một triển khai vue-i18n ổn định và muốn dần dần chuyển sang trải nghiệm phát triển được cải thiện của Intlayer.
+2. **Yêu cầu kế thừa**: Dự án của bạn cần tương thích với các plugin hoặc quy trình làm việc vue-i18n hiện có.
+3. **Sự quen thuộc của đội ngũ**: Đội ngũ của bạn quen thuộc với vue-i18n nhưng muốn quản lý nội dung tốt hơn.
+4. **Sử dụng các tính năng của Intlayer**: Bạn muốn sử dụng các tính năng của Intlayer như khai báo nội dung, tự động hóa dịch thuật, kiểm thử bản dịch, và nhiều hơn nữa.
+
+**Vì vậy, Intlayer có thể được triển khai như một bộ chuyển đổi cho vue-i18n để giúp tự động hóa các bản dịch JSON của bạn trong CLI hoặc các pipeline CI/CD, kiểm thử bản dịch, và nhiều hơn nữa.**
+
+Hướng dẫn này sẽ chỉ cho bạn cách tận dụng hệ thống khai báo nội dung vượt trội của Intlayer trong khi vẫn duy trì khả năng tương thích với vue-i18n.
+
+---
+
+## Hướng Dẫn Từng Bước Để Thiết Lập Intlayer với vue-i18n
+
+### Bước 1: Cài Đặt Các Phụ Thuộc
+
+Cài đặt các gói cần thiết bằng trình quản lý gói bạn ưa thích:
+
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
+
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
+```
+
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
+**Giải thích các gói:**
+
+- **intlayer**: Thư viện lõi cho khai báo và quản lý nội dung
+- **@intlayer/sync-json-plugin**: Plugin để đồng bộ khai báo nội dung Intlayer sang định dạng JSON của vue-i18n
+
+### Bước 2: Triển khai plugin Intlayer để bao bọc JSON
+
+Tạo một tệp cấu hình Intlayer để định nghĩa các ngôn ngữ bạn hỗ trợ:
+
+**Nếu bạn cũng muốn xuất các từ điển JSON cho vue-i18n**, hãy thêm plugin `syncJSON`:
+
+```typescript fileName="intlayer.config.ts"
+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({
+      source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
+    }),
+  ],
+};
+
+export default config;
+```
+
+Plugin `syncJSON` sẽ tự động bao bọc JSON. Nó sẽ đọc và ghi các tệp JSON mà không thay đổi cấu trúc nội dung.
+
+Nếu bạn muốn cho phép JSON đó tồn tại cùng với các tệp khai báo nội dung intlayer (`.content` files), Intlayer sẽ tiến hành theo cách sau:
+
+    1. tải cả tệp JSON và tệp khai báo nội dung và chuyển đổi chúng thành một từ điển intlayer.
+    2. nếu có xung đột giữa JSON và các tệp khai báo nội dung, Intlayer sẽ tiến hành hợp nhất tất cả các từ điển đó. Tùy thuộc vào ưu tiên của các plugin, và của tệp khai báo nội dung (tất cả đều có thể cấu hình).
+
+Nếu có thay đổi được thực hiện bằng CLI để dịch JSON, hoặc sử dụng CMS, Intlayer sẽ cập nhật tệp JSON với các bản dịch mới.
+
+Để xem thêm chi tiết về plugin `syncJSON`, vui lòng tham khảo [tài liệu plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/plugins/sync-json.md).
+
+---
+
+### (Tùy chọn) Bước 3: Triển khai dịch JSON theo từng thành phần
+
+Theo mặc định, Intlayer sẽ tải, hợp nhất và đồng bộ cả tệp JSON và tệp khai báo nội dung. Xem [tài liệu khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md) để biết thêm chi tiết. Nhưng nếu bạn muốn, sử dụng một plugin của Intlayer, bạn cũng có thể triển khai quản lý JSON theo từng thành phần được bản địa hóa ở bất kỳ đâu trong mã nguồn của bạn.
+
+Để làm điều đó, bạn có thể sử dụng plugin `loadJSON`.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Giữ cho các tệp JSON hiện tại của bạn đồng bộ với từ điển Intlayer
+  plugins: [
+    /**
+     * Sẽ tải tất cả các tệp JSON trong thư mục src khớp với mẫu {key}.i18n.json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Đảm bảo các tệp JSON này ưu tiên hơn các tệp tại `./locales/en/${key}.json`
+    }),
+    /**
+     * Sẽ tải và ghi đầu ra cùng các bản dịch trở lại các tệp JSON trong thư mục locales
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+Điều này sẽ tải tất cả các tệp JSON trong thư mục `src` khớp với mẫu `{key}.i18n.json` và tải chúng như các từ điển Intlayer.
+
+---
+
+## Cấu hình Git
+
+Loại trừ các tệp được tạo tự động khỏi kiểm soát phiên bản:
+
+```plaintext fileName=".gitignore"
+# Bỏ qua các tệp được tạo bởi Intlayer
+.intlayer
+intl
+```
+
+Các tệp này được tạo lại tự động trong quá trình xây dựng và không cần phải cam kết vào kho lưu trữ của bạn.
+
+### Tiện ích mở rộng VS Code
+
+Để cải thiện trải nghiệm phát triển, hãy cài đặt **Tiện ích mở rộng Intlayer cho VS Code** chính thức:
+
+[Cài đặt từ VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+[Install from the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/zh/intlayer_with_i18next.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-24
-updatedAt: 2025-10-29
+updatedAt: 2025-11-01
 title: 如何使用 Intlayer 自动化您的 i18next JSON 翻译
 description: 使用 Intlayer 和 i18next 自动化您的 JSON 翻译，提升 JavaScript 应用程序的国际化水平。
 keywords:
@@ -20,6 +20,9 @@ slugs:
   - blog
   - intlayer-with-i18next
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: 添加 loadJSON 插件
   - version: 7.0.0
     date: 2025-10-29
     changes: 更改为 syncJSON 插件
@@ -31,17 +34,18 @@ history:
 
 **Intlayer** 是一个创新的开源国际化库，旨在解决传统 i18n 解决方案的不足。它为 JavaScript 应用程序中的内容管理提供了一种现代化的方法。
 
-请参阅我们博客文章中的具体比较：[next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md)。
+请参阅我们博客文章中的具体对比：[next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md)。
 
-## 为什么要将 Intlayer 与 i18next 结合使用？
+## 为什么将 Intlayer 与 i18next 结合使用？
 
 虽然 Intlayer 提供了一个出色的独立 i18n 解决方案（请参阅我们的[Next.js 集成指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_nextjs_16.md)），但您可能出于以下几个原因想将其与 i18next 结合使用：
 
 1. **现有代码库**：您已经有一个成熟的 i18next 实现，并希望逐步迁移到 Intlayer 以获得更好的开发者体验。
 2. **遗留需求**：您的项目需要兼容现有的 i18next 插件或工作流程。
 3. **团队熟悉度**：您的团队熟悉 i18next，但希望获得更好的内容管理。
+4. **使用 Intlayer 功能**：您希望使用 Intlayer 的内容声明、翻译键管理、翻译状态等功能。
 
-**为此，Intlayer 可以作为 i18next 的适配器来实现，帮助您在 CLI 或 CI/CD 流水线中自动化 JSON 翻译，测试翻译内容等。**
+**为此，Intlayer 可以作为 i18next 的适配器实现，帮助您在 CLI 或 CI/CD 流水线中自动化 JSON 翻译、测试翻译等。**
 
 本指南将向您展示如何利用 Intlayer 优越的内容声明系统，同时保持与 i18next 的兼容性。
 
@@ -51,9 +55,9 @@ history:
 
 ## 使用 i18next 设置 Intlayer 的分步指南
 
-### 第一步：安装依赖项
+### 第一步：安装依赖
 
-安装必要的包：
+安装必要的软件包：
 
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin
@@ -67,16 +71,20 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-**包描述：**
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
+**软件包说明：**
 
-- **intlayer**：用于国际化管理、内容声明和构建的核心库
+- **intlayer**：国际化管理、内容声明和构建的核心库
 - **@intlayer/sync-json-plugin**：用于将 Intlayer 内容声明导出为兼容 i18next 的 JSON 格式的插件
 
-### 步骤 2：实现 Intlayer 插件以包装 JSON
+### 第2步：实现 Intlayer 插件以封装 JSON
 
 创建一个 Intlayer 配置文件以定义支持的语言环境：
 
-**如果你还想导出 i18next 的 JSON 词典**，请添加 `syncJSON` 插件：
+**如果您还想导出用于 i18next 的 JSON 字典**，请添加 `syncJSON` 插件：
 
 ```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -89,7 +97,7 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
-      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
     }),
   ],
 };
@@ -101,11 +109,55 @@ export default config;
 
 如果你想让 JSON 与 intlayer 内容声明文件（`.content` 文件）共存，Intlayer 会按以下方式处理：
 
-    1. 加载 JSON 和内容声明文件，并将它们转换为 intlayer 字典。
+1. 加载 JSON 和内容声明文件，并将它们转换为 intlayer 字典。
+2. 如果 JSON 和内容声明文件之间存在冲突，Intlayer 会合并所有字典。具体合并方式取决于插件的优先级以及内容声明文件的优先级（所有这些都是可配置的）。
+
+如果通过 CLI 翻译 JSON 或使用 CMS 进行更改，Intlayer 会使用新的翻译更新 JSON 文件。
+
+要查看更多关于 `syncJSON` 插件的详细信息，请参阅 [syncJSON 插件文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/plugins/sync-json.md)。
+
+### （可选）步骤 3：实现按组件的 JSON 翻译
+
+默认情况下，Intlayer 会加载、合并并同步 JSON 文件和内容声明文件。更多详情请参阅 [内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。但如果你愿意，也可以使用 Intlayer 插件，在代码库中的任意位置实现按组件管理本地化的 JSON。
+
+为此，你可以使用 `loadJSON` 插件。
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // 保持当前的 JSON 文件与 Intlayer 字典同步
+  plugins: [
+    /**
+     * 将加载 src 目录中所有匹配模式 {key}.i18n.json 的 JSON 文件
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // 确保这些 JSON 文件优先于 `./locales/en/${key}.json` 中的文件
+    }),
+    /**
+     * 将加载并将输出和翻译写回到 locales 目录中的 JSON 文件
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
 
-2. 如果 JSON 文件和内容声明文件之间存在冲突，Intlayer 将合并所有字典。合并的优先级取决于插件的优先级以及内容声明文件的优先级（所有这些都是可配置的）。
+这将加载 `src` 目录中所有匹配 `{key}.i18n.json` 模式的 JSON 文件，并将它们作为 Intlayer 字典加载。
 
-如果使用 CLI 翻译 JSON，或使用 CMS 进行更改，Intlayer 会使用新的翻译更新 JSON 文件。
+---
 
 ## Git 配置
 
@@ -120,8 +172,6 @@ export default config;
 
 ### VS Code 扩展
 
-为了提升开发者体验，请安装官方的 **Intlayer VS Code 扩展**：
-
-[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+为了提升开发者体验，建议安装官方 **Intlayer VS Code 扩展**：
 
 [从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/zh/intlayer_with_next-i18next.md

@@ -16,12 +16,15 @@ slugs:
   - blog
   - intlayer-with-next-i18next
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: 添加 loadJSON 插件
   - version: 7.0.0
     date: 2025-10-29
     changes: 更改为 syncJSON 插件并全面重写
 ---
 
-# 使用 next-i18next 和 Intlayer 实现 Next.js 国际化（i18n）
+# 使用 next-i18next 和 Intlayer 实现 Next.js 国际化 (i18n)
 
 ## 目录
 
@@ -33,28 +36,28 @@ history:
 
 然而，next-i18next 也存在一些挑战：
 
-- **配置复杂**：设置 next-i18next 需要多个配置文件，并且需要仔细设置服务器端和客户端的 i18n 实例。
-- **翻译分散**：翻译文件通常存储在与组件分开的目录中，导致维护一致性更加困难。
-- **手动命名空间管理**：开发者需要手动管理命名空间，并确保正确加载翻译资源。
-- **类型安全有限**：TypeScript 支持需要额外配置，并且不提供翻译的自动类型生成。
+- **配置复杂**：设置 next-i18next 需要多个配置文件，并且需要仔细配置服务器端和客户端的 i18n 实例。
+- **翻译文件分散**：翻译文件通常存储在与组件分开的目录中，导致维护一致性更加困难。
+- **手动命名空间管理**：开发者需要手动管理命名空间，并确保翻译资源的正确加载。
+- **类型安全有限**：TypeScript 支持需要额外配置，且不提供翻译的自动类型生成。
 
 ## 什么是 Intlayer？
 
 **Intlayer** 是一个创新的开源国际化库，旨在解决传统 i18n 解决方案的不足。它为 Next.js 应用提供了一种现代化的内容管理方法。
 
-请参阅我们博客文章中的具体对比：[next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md)。
+请参阅我们博客文章中关于 next-i18next、next-intl 和 Intlayer 的具体对比：[next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md)。
 
 ## 为什么将 Intlayer 与 next-i18next 结合使用？
 
-虽然 Intlayer 提供了一个出色的独立 i18n 解决方案（请参阅我们的[Next.js 集成指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_nextjs_16.md)），但您可能出于以下几个原因希望将其与 next-i18next 结合使用：
+虽然 Intlayer 提供了一个出色的独立国际化解决方案（请参阅我们的[Next.js 集成指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_nextjs_16.md)），但您可能出于以下几个原因希望将其与 next-i18next 结合使用：
 
 1. **现有代码库**：您已经有一个成熟的 next-i18next 实现，并希望逐步迁移到 Intlayer 以获得更好的开发者体验。
 2. **遗留需求**：您的项目需要兼容现有的 i18next 插件或工作流程。
 3. **团队熟悉度**：您的团队对 next-i18next 很熟悉，但希望获得更好的内容管理。
 
-**为此，Intlayer 可以作为 next-i18next 的适配器来实现，帮助在 CLI 或 CI/CD 流水线中自动化您的 JSON 翻译，测试您的翻译内容等。**
+**为此，Intlayer 可以作为 next-i18next 的适配器来实现，帮助你在 CLI 或 CI/CD 流水线中自动化处理 JSON 翻译，测试你的翻译内容，等等。**
 
-本指南将向您展示如何利用 Intlayer 优越的内容声明系统，同时保持与 next-i18next 的兼容性。
+本指南将展示如何利用 Intlayer 优越的内容声明系统，同时保持与 next-i18next 的兼容性。
 
 ---
 
@@ -62,7 +65,7 @@ history:
 
 ### 第一步：安装依赖
 
-使用您喜欢的包管理器安装所需的包：
+使用你喜欢的包管理器安装必要的包：
 
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin
@@ -76,20 +79,20 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **包说明：**
 
 - **intlayer**：内容声明和管理的核心库
-- **next-intlayer**：带有构建插件的 Next.js 集成层
-- **i18next**：核心国际化框架
-- **next-i18next**：i18next 的 Next.js 封装器
-- **i18next-resources-to-backend**：i18next 的动态资源加载
-- **@intlayer/sync-json-plugin**：将 Intlayer 内容声明同步为 i18next JSON 格式的插件
+- **@intlayer/sync-json-plugin**：用于将 Intlayer 内容声明同步为 i18next JSON 格式的插件
 
 ### 第2步：实现 Intlayer 插件以封装 JSON
 
-创建一个 Intlayer 配置文件以定义支持的语言环境：
+创建一个 Intlayer 配置文件以定义你支持的语言环境：
 
-**如果你还想为 i18next 导出 JSON 词典**，请添加 `syncJSON` 插件：
+**如果你还想导出用于 i18next 的 JSON 词典**，请添加 `syncJSON` 插件：
 
 ```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -102,7 +105,7 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
-      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
     }),
   ],
 };
@@ -115,11 +118,55 @@ export default config;
 如果你想让 JSON 与 intlayer 内容声明文件（`.content` 文件）共存，Intlayer 会按以下方式处理：
 
     1. 加载 JSON 和内容声明文件，并将它们转换为 intlayer 字典。
-
-2. 如果 JSON 文件和内容声明文件之间存在冲突，Intlayer 将合并所有字典。合并的优先级取决于插件的优先级以及内容声明文件的优先级（所有这些都是可配置的）。
+    2. 如果 JSON 和内容声明文件之间存在冲突，Intlayer 会合并所有字典。具体合并方式取决于插件的优先级以及内容声明文件的优先级（所有均可配置）。
 
 如果使用 CLI 翻译 JSON，或使用 CMS 进行更改，Intlayer 将使用新的翻译更新 JSON 文件。
 
+要查看更多关于 `syncJSON` 插件的详细信息，请参阅 [syncJSON 插件文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/plugins/sync-json.md)。
+
+---
+
+### （可选）步骤 3：实现按组件的 JSON 翻译
+
+默认情况下，Intlayer 会加载、合并并同步 JSON 和内容声明文件。更多详情请参阅 [内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。但如果你愿意，也可以使用 Intlayer 插件，在代码库中的任何位置实现按组件管理本地化的 JSON。
+
+为此，您可以使用 `loadJSON` 插件。
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // 保持您当前的 JSON 文件与 Intlayer 字典同步
+  plugins: [
+    /**
+     * 将加载 src 中所有匹配模式 {key}.i18n.json 的 JSON 文件
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // 确保这些 JSON 文件优先于 `./public/locales/en/${key}.json` 中的文件
+    }),
+    /**
+     * 将输出和翻译写回到 locales 目录中的 JSON 文件
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+这将加载 `src` 目录中所有匹配 `{key}.i18n.json` 模式的 JSON 文件，并将它们作为 Intlayer 字典加载。
+
 ---
 
 ## Git 配置
@@ -139,5 +186,3 @@ intl
 为了提升开发者体验，请安装官方的 **Intlayer VS Code 扩展**：
 
 [从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/zh/intlayer_with_next-intl.md

@@ -7,6 +7,9 @@ slugs:
   - blog
   - intlayer-with-next-intl
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: 添加 loadJSON 插件
   - version: 7.0.0
     date: 2025-10-29
     changes: 更改为 syncJSON 插件
@@ -24,11 +27,11 @@ history:
 
 虽然 Intlayer 提供了一个出色的独立 i18n 解决方案（请参阅我们的[Next.js 集成指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_nextjs_16.md)），但您可能出于以下几个原因想将其与 next-intl 结合使用：
 
-1. **现有代码库**：您已经有了成熟的 next-intl 实现，并希望逐步迁移到 Intlayer 以获得更好的开发者体验。
+1. **现有代码库**：您已经有一个成熟的 next-intl 实现，并希望逐步迁移到 Intlayer 以获得更好的开发者体验。
 2. **遗留需求**：您的项目需要兼容现有的 next-intl 插件或工作流程。
-3. **团队熟悉度**：您的团队对 next-intl 很熟悉，但希望获得更好的内容管理。
+3. **团队熟悉度**：您的团队对 next-intl 感到熟悉，但希望获得更好的内容管理。
 
-**为此，Intlayer 可以作为 next-intl 的适配器来实现，帮助您在 CLI 或 CI/CD 流水线中自动化 JSON 翻译，测试翻译内容等。**
+**为此，Intlayer 可以作为 next-intl 的适配器来实现，帮助您在 CLI 或 CI/CD 流水线中自动化 JSON 翻译、测试翻译等功能。**
 
 本指南将向您展示如何利用 Intlayer 优越的内容声明系统，同时保持与 next-intl 的兼容性。
 
@@ -36,7 +39,7 @@ history:
 
 <TOC/>
 
-## 使用 next-intl 设置 Intlayer 的逐步指南
+## 使用 next-intl 设置 Intlayer 的分步指南
 
 ### 第一步：安装依赖
 
@@ -54,16 +57,20 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-**软件包说明：**
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
+**包描述：**
 
 - **intlayer**：国际化管理、内容声明和构建的核心库
-- **@intlayer/sync-json-plugin**：用于将 Intlayer 内容声明导出为 next-intl 兼容的 JSON 格式的插件
+- **@intlayer/sync-json-plugin**：用于将 Intlayer 内容声明导出为 next-intl 兼容 JSON 格式的插件
 
-### 第2步：实现 Intlayer 插件以包装 JSON
+### 第2步：实现 Intlayer 插件以封装 JSON
 
 创建一个 Intlayer 配置文件以定义支持的语言环境：
 
-**如果您还想导出适用于 next-intl 的 JSON 字典**，请添加 `syncJSON` 插件：
+**如果您还想为 next-intl 导出 JSON 字典**，请添加 `syncJSON` 插件：
 
 ```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -84,15 +91,58 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-`syncJSON` 插件会自动包装 JSON。它会读取和写入 JSON 文件，而不会改变内容结构。
+`syncJSON` 插件会自动封装 JSON。它会读取和写入 JSON 文件，而不会改变内容结构。
 
 如果你想让 JSON 与 intlayer 内容声明文件（`.content` 文件）共存，Intlayer 会按以下方式处理：
 
     1. 加载 JSON 和内容声明文件，并将它们转换为 intlayer 字典。
 
-2. 如果 JSON 文件和内容声明文件之间存在冲突，Intlayer 将合并所有字典。合并的优先级取决于插件的优先级以及内容声明文件的优先级（所有均可配置）。
+2. 如果 JSON 文件和内容声明文件之间存在冲突，Intlayer 将合并所有字典。合并的优先级取决于插件的优先级以及内容声明文件的优先级（所有优先级均可配置）。
+
+如果通过 CLI 翻译 JSON 或使用 CMS 进行更改，Intlayer 会使用新的翻译更新 JSON 文件。
+
+有关 `syncJSON` 插件的更多详细信息，请参阅 [syncJSON 插件文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/plugins/sync-json.md)。
+
+### （可选）步骤 3：实现按组件的 JSON 翻译
+
+默认情况下，Intlayer 会加载、合并并同步 JSON 文件和内容声明文件。更多详情请参见[内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。但如果你愿意，也可以使用 Intlayer 插件，在代码库中的任意位置实现基于组件的 JSON 本地化管理。
+
+为此，你可以使用 `loadJSON` 插件。
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // 保持您当前的 JSON 文件与 Intlayer 字典同步
+  plugins: [
+    /**
+     * 将加载 src 目录中所有匹配模式 {key}.i18n.json 的 JSON 文件
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // 确保这些 JSON 文件优先于 `./locales/en/${key}.json` 中的文件
+    }),
+    /**
+     * 将加载并将输出和翻译写回到 locales 目录中的 JSON 文件
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
 
-如果使用 CLI 翻译 JSON 或使用 CMS 进行更改，Intlayer 会使用新的翻译更新 JSON 文件。
+这将加载 `src` 目录中所有匹配 `{key}.i18n.json` 模式的 JSON 文件，并将它们作为 Intlayer 字典加载。
 
 ## Git 配置
 
@@ -110,5 +160,3 @@ export default config;
 为了提升开发者体验，请安装官方的 **Intlayer VS Code 扩展**：
 
 [从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)