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

package/docs/zh/compat/svelte-i18n.md

@@ -0,0 +1,47 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "从 Svelte I18n 迁移到 Intlayer"
+description: "了解如何使用兼容适配器将您的 Svelte 应用程序从 svelte-i18n 迁移到 Intlayer。"
+keywords:
+  - svelte-i18n
+  - svelte
+  - intlayer
+  - 迁移
+  - 兼容
+slugs:
+  - doc
+  - compatibility
+  - svelte-i18n
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Init history"
+author: aymericzip
+---
+
+# 从 Svelte I18n 迁移到 Intlayer
+
+使用兼容适配器，将您的 Svelte 应用程序从 `svelte-i18n` 迁移到 Intlayer 只需片刻。
+
+## 操作步骤
+
+只需在您的项目中运行初始化命令：
+
+```bash
+npx intlayer init
+```
+
+这将生成 `intlayer.config.ts`。确保您的 SvelteKit / Vite 插件与 Intlayer 的别名插件封装在一起，以无缝地将 `svelte-i18n` 映射到 `@intlayer/svelte-i18n`。
+
+## 底层原理
+
+Svelte-i18n 依赖于大量使用的 store（`$_`、`$t`、`$format` 等）和 ICU MessageFormat。
+
+底层实现：
+
+- **Store：** Intlayer 代理 `svelte-i18n` store。`$_` 成为当前语言环境的派生 store，返回 Intlayer 解析器。
+- **键值：** 您的扁平键（例如 `$_('home.title')`）被求值，使得第一个路径段代表 Intlayer 字典。
+- **ICU 语法：** 由共享 ICU 解析器（等效于 `intl-messageformat` 解析）完全处理。
+- **格式化器：** `$date`、`$time`、`$number` 调用安全地重定向到 Intlayer 的原生核心格式化器。
+- **Babel/SWC 分析：** Intlayer 分析器在编译之前读取您的 `.svelte` 源文件中的 Svelte store 调用者（`$_`），以自动构建相关字典 chunk。

package/docs/zh/compat/transloco.md

@@ -0,0 +1,45 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "从 Transloco 迁移到 Intlayer"
+description: "了解如何使用兼容适配器将您的 Angular 应用程序从 Transloco 迁移到 Intlayer。"
+keywords:
+  - transloco
+  - angular
+  - intlayer
+  - 迁移
+  - 兼容
+slugs:
+  - doc
+  - compatibility
+  - transloco
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Init history"
+author: aymericzip
+---
+
+# 从 Transloco 迁移到 Intlayer
+
+如果您的 Angular 应用程序当前使用 `@jsverse/transloco`，您可以使用我们的兼容适配器迁移到 Intlayer。这一过渡让您在利用 Intlayer 强大字典结构的同时，维持现有的模板语法。
+
+## 操作步骤
+
+只需在您的项目中运行初始化命令：
+
+```bash
+npx intlayer init
+```
+
+这将生成必要的 `intlayer.config.ts` 配置。然后，您将用 `@intlayer/transloco` 模块替换您的 Transloco 导入，或依赖构建别名。
+
+## 底层原理
+
+Transloco 使用作用域和 `TranslocoService`（`translate`、`selectTranslate`），以及结构性指令（`*transloco="let t"`）和管道（`| transloco`）。
+
+底层实现：
+
+- **作用域：** 自然映射到 Intlayer 字典键，为 bundle 优化提供出色的修剪能力。
+- **服务和指令：** Intlayer 的 Angular 适配器无缝替换了 provider，允许您现有的模板管道和指令针对 Intlayer 字典解析字符串。
+- **构建时解析：** TypeScript 分析器识别 `instant/get` 调用，即使模板使用无法静态跟踪，回退修剪也能确保正确性。

package/docs/zh/compat/vue-i18n.md

@@ -0,0 +1,58 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "从 Vue I18n 迁移到 Intlayer"
+description: "了解如何使用兼容适配器将您的 Vue 应用程序从 vue-i18n 迁移到 Intlayer。"
+keywords:
+  - vue-i18n
+  - vue
+  - intlayer
+  - 迁移
+  - 兼容
+slugs:
+  - doc
+  - compatibility
+  - vue-i18n
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Init history"
+author: aymericzip
+---
+
+# 从 Vue I18n 迁移到 Intlayer
+
+如果您的 Vue 应用程序当前使用 `vue-i18n`，您可以迁移到 Intlayer，而无需重写组件或翻译 hook。Intlayer 提供了一个兼容适配器，完美地镜像 `vue-i18n` 的 API，同时在底层利用 Intlayer 的强大功能。
+
+## 操作步骤
+
+要开始使用，只需在您的项目中运行初始化命令：
+
+```bash
+npx intlayer init
+```
+
+在初始化期间，Intlayer 将设置您的配置文件（`intlayer.config.ts`）并为迁移做好项目准备。您只需将 Intlayer 插件添加到您的 Vite 配置中，即可自动将 `vue-i18n` 导入别名化。
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vue(), vueI18nVitePlugin()],
+});
+```
+
+## 底层原理
+
+`vueI18nVitePlugin` 将模块别名注入到您的 bundler 中。代码库中对 `vue-i18n` 的任何导入都将被透明地重定向到 `@intlayer/vue-i18n`。
+
+**在底层，适配器原生处理复杂的 `vue-i18n` 语法：**
+
+- **插值与复数：** 解析 `{name}` 和列表 `{0}` 插值。管道复数（`"car | cars"`）根据位置语义转换为 Intlayer 枚举/复数节点。
+- **格式：** `d()` 和 `n()` 等函数在底层包装 `Intl`，遵循您选项中定义的 `datetimeFormats` 和 `numberFormats`。
+- **全局与本地状态：** `global.locale` 映射到由 Intlayer 客户端支持的 `WritableComputedRef`，因此响应性行为与预期完全一致（例如 `locale.value = 'fr'`）。
+- **指令：** `v-t` 指令已注册并正常运行。
+
+您的应用程序继续与之前完全相同地渲染，但内容由您的 Intlayer 字典提供支持，为您带来类型安全、更好的 bundle 优化和无缝的 CMS 集成。

package/docs/zh/compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-03-12
+updatedAt: 2026-06-23
 title: Intlayer 编译器 | 用于 i18n 的自动内容提取
 description: 使用 Intlayer 编译器自动化您的国际化流程。直接从组件中提取内容，实现 Vite、Next.js 等框架中更快速、更高效的 i18n。
 keywords:
@@ -60,6 +60,8 @@ author: aymericzip
 
 ## 使用方法
 
+> The quickest way to wire the compiler in is the interactive setup: run `npx intlayer init --interactive` and select **Compiler**. On Vite there is nothing to configure — the compiler is plugged in directly through the `intlayerCompiler()` plugin. On Next.js the command scaffolds the `babel.config.js` shown below. The non-interactive `intlayer init` leaves the compiler setup untouched.
+
 <Tabs>
  <Tab value='vite'>
 

package/docs/zh/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-06-17
+updatedAt: 2026-06-23
 title: 配置
 description: 了解如何为您的应用程序配置 Intlayer。了解可用于根据您的需求自定义 Intlayer 的各种设置和选项。
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 9.0.0
+    date: 2026-06-24
+    changes: "Add `enableProxy` option to the routing configuration"
   - version: 8.10.0
     date: 2026-06-17
     changes: "向字典配置添加 `format` 选项"
@@ -885,6 +888,21 @@ export default config;
 
 ---
 
+### 系统配置
+
+与 Intlayer 的内部路径和输出结果相关的设置。这些设置通常是内部的，用户通常不需要修改。
+
+| Field                     | Description                                     | Type     | Default                           | Example              | Note                                  |
+| ------------------------- | ----------------------------------------------- | -------- | --------------------------------- | -------------------- | ------------------------------------- |
+| `baseDir`                 | 项目的基础目录。                                | `string` | `process.cwd()`                   | `'/path/to/project'` | 用于解析所有 Intlayer 相关的目录。    |
+| `dictionariesDir`         | 存储本地化字典的目录路径。                      | `string` | `'.intlayer/dictionary'`          |                      |                                       |
+| `moduleAugmentationDir`   | 模块增强的目录，允许更好的 IDE 建议和类型检查。 | `string` | `'.intlayer/types'`               | `'intlayer-types'`   | 确保在 `tsconfig.json` 中包含此目录。 |
+| `unmergedDictionariesDir` | 存储未合并字典的目录。                          | `string` | `'.intlayer/unmerged_dictionary'` |                      |                                       |
+| `typesDir`                | 存储字典类型的目录。                            | `string` | `'.intlayer/types'`               |                      |                                       |
+| `mainDir`                 | 存储主应用程序文件的目录。                      | `string` | `'.intlayer/main'`                |                      |                                       |
+| `configDir`               | 存储配置文件的目录。                            | `string` | `'.intlayer/config'`              |                      |                                       |
+| `cacheDir`                | 存储缓存文件的目录。                            | `string` | `'.intlayer/cache'`               |                      |                                       |
+
 ### 字典配置 (Dictionary)
 
 控制字典操作的参数，包括自动填充行为和内容生成。
@@ -993,22 +1011,6 @@ Intlayer 支持多个 AI 提供商，以提供最大的灵活性。当前支持
 
 ---
 
-### 系统配置 (System)
-
-这些设置面向高级用户和 Intlayer 内部配置。
-
-| 字段                      | 说明                        | 类型     | 默认值                            | 示例 | 备注 |
-| ------------------------- | --------------------------- | -------- | --------------------------------- | ---- | ---- |
-| `dictionariesDir`         | 已编译字典的目录。          | `string` | `'.intlayer/dictionary'`          |      |      |
-| `moduleAugmentationDir`   | TypeScript 模块扩充的目录。 | `string` | `'.intlayer/types'`               |      |      |
-| `unmergedDictionariesDir` | 存储未合并字典的目录。      | `string` | `'.intlayer/unmerged_dictionary'` |      |      |
-| `typesDir`                | 生成类型的目录。            | `string` | `'.intlayer/types'`               |      |      |
-| `mainDir`                 | Intlayer 主文件的目录。     | `string` | `'.intlayer/main'`                |      |      |
-| `configDir`               | 已编译配置文件的目录。      | `string` | `'.intlayer/config'`              |      |      |
-| `cacheDir`                | 缓存文件的目录。            | `string` | `'.intlayer/cache'`               |      |      |
-
----
-
 ### 编译器配置 (Compiler)
 
 控制 Intlayer 编译器的设置，该编译器直接从组件中收集字典。

package/docs/zh/custom_domains.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-02
-updatedAt: 2026-04-02
+updatedAt: 2026-06-23
 title: 自定义域名
 description: 了解如何在 Intlayer 中配置基于域名的语言路由，以便从专用主机名提供不同的语言版本。
 keywords:

package/docs/zh/custom_url_rewrites.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-01-26
+updatedAt: 2026-06-23
 title: 自定义 URL 重写
 description: 了解如何在 Intlayer 中配置并使用自定义 URL 重写，以定义特定于 locale 的路径。
 keywords:
@@ -228,21 +228,19 @@ Intlayer 为所有流行框架提供格式化器：
 - `reactRouterRewrite`：用于 React Router。支持 `:slug` 和 `*`（0+）。
 - `vueRouterRewrite`：用于 Vue Router 4。支持 `:slug`、`:slug?`（0-1）、`:slug*`（0+）和 `:slug+`（1+）。
 - `solidRouterRewrite`：用于 Solid Router。支持 `:slug` 和 `*slug`（0+）。
-  /// - `tanstackRouterRewrite`: For TanStack Router。支持 `$slug` 和 `*`（0+）。
-  /// - `nuxtRewrite`: For Nuxt 3。支持 `[slug]` 和 `[...slug]`（0+）。
-  /// - `viteRewrite`: Generic formatter for any Vite-based project。规范化用于 Vite 代理的语法。
-  ///
-  /// ### 高级模式
-  ///
-  /// Intlayer 在内部将这些模式规范化为统一语法，允许复杂的路径匹配与生成：
-  ///
-  /// - **可选段**：`[[optional]]`（SvelteKit）或 `:slug?`（Vue/React）受到支持。
-  /// - **捕获全部（零个或多个）**：`[[...slug]]`（Next.js）、`[...path]`（SvelteKit/Nuxt）或 `*`（React/TanStack）允许匹配多个段。
-  /// - **必须捕获（一个或多个）**：`[...slug]`（Next.js）或 `:slug+`（Vue）确保至少存在一个段。
-  ///
-  /// ## 客户端 URL 校正：`useRewriteURL`
-  ///
-  ///
+- `tanstackRouterRewrite`: For TanStack Router。支持 `$slug` 和 `*`（0+）。
+- `nuxtRewrite`: For Nuxt 3。支持 `[slug]` 和 `[...slug]`（0+）。
+- `viteRewrite`: Generic formatter for any Vite-based project。规范化用于 Vite 代理的语法。
+
+### 高级模式
+
+Intlayer 在内部将这些模式规范化为统一语法，允许复杂的路径匹配与生成：
+
+- **可选段**：`[[optional]]`（SvelteKit）或 `:slug?`（Vue/React）受到支持。
+- **捕获全部（零个或多个）**：`[[...slug]]`（Next.js）、`[...path]`（SvelteKit/Nuxt）或 `*`（React/TanStack）允许匹配多个段。
+- **必须捕获（一个或多个）**：`[...slug]`（Next.js）或 `:slug+`（Vue）确保至少存在一个段。
+
+## 客户端 URL 校正：`useRewriteURL`
 
 为确保浏览器的地址栏始终反映“友好”的本地化 URL，Intlayer 提供了 `useRewriteURL` 钩子。该钩子在用户进入一个规范路径时，会静默地使用 `window.history.replaceState` 更新 URL。
 

package/docs/zh/dictionary/content_file.md

@@ -347,26 +347,6 @@ Intlayer 中的字典由 `Dictionary` 类型定义，包含多个控制其行为
 }
 ```
 
-#### `format` ('intlayer' | 'icu' | 'i18next')
-
-指定用于字典内容的格式化器。这允许使用不同的消息格式化语法。
-
-- `'intlayer'`: 默认的 Intlayer 格式化器。
-- `'icu'`: 使用 ICU 消息格式化。
-- `'i18next'`: 使用 i18next 消息格式化。
-
-**示例：**
-
-```typescript
-{
-  key: "my-dictionary",
-  format: "icu",
-  content: {
-    message: "Hello {name}, you have {count, plural, one {# message} other {# messages}}"
-  }
-}
-```
-
 #### `locale` (LocalesValues)
 
 将字典转换为按语言区域划分的字典，其中内容中声明的每个字段将自动转换为翻译节点。当设置此属性时：
@@ -603,6 +583,10 @@ export default aboutPageMetaContent;
 
 本地字典的唯一标识符。由 Intlayer 自动生成，用于帮助识别字典并确定其是本地还是远程，以及其位置。
 
+##### `localId` (LocalDictionaryId)
+
+本地字典的唯一标识符。由 Intlayer 自动生成，用于帮助识别字典，以及确定它是本地字典还是远程字典，以及它的位置。
+
 ##### `localIds`（LocalDictionaryId[]）
 
 对于合并的字典，此数组包含所有被合并字典的 ID。对于追踪合并内容的来源非常有用。
@@ -696,6 +680,18 @@ insertionContent: insert("这段文本可以插入到任何地方");
 
 > 请参阅 [插入内容 (`insert`) 文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/insertion.md) 以获取更多信息。
 
+### 插入内容 (`insert`)
+
+可以插入到其他内容中的内容：
+
+```typescript
+import { insert } from "intlayer";
+
+insertionContent: insert("This text can be inserted anywhere");
+```
+
+> 查看 [插入文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/insertion.md) 了解更多信息。
+
 ### 嵌套内容 (`nest`)
 
 引用其他字典：

package/docs/zh/dictionary/enumeration.md

@@ -468,193 +468,6 @@ document.getElementById("ranking")!.textContent = content.ordinal(lastDigit)({
   </Tab>
 </Tabs>
 
-## Combining Enumeration with Insert for Ordinal Numbers
-
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To use enumeration in a React component, you can leverage the `useIntlayer` hook from the `react-intlayer` package. This hook retrieves the correct content based on the specified ID. Here's an example of how to use it:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>
-        {
-          numberOfCar(0) // Output: No cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(6) // Output: Some cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(20) // Output: Many cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(0.01) // Output: Fallback value
-        }
-      </p>
-    </div>
-  );
-};
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
-To use enumeration in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-const CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To use enumeration in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-const { numberOfCar } = useIntlayer("car_count");
-</script>
-
-<template>
-  <div>
-    <p>{{ numberOfCar(6) }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To use enumeration in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-const content = useIntlayer("car_count");
-</script>
-
-<div>
-  <p>{$content.numberOfCar(6)}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To use enumeration in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-To use enumeration in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { Component } from "solid-js";
-import { useIntlayer } from "solid-intlayer";
-
-const CarComponent: Component = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To use enumeration in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-car",
-  template: `
-    <div>
-      <p>{{ content().numberOfCar(6) }}</p>
-    </div>
-  `,
-})
-export class CarComponent {
-  content = useIntlayer("car_count");
-}
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use enumeration with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("car_count").onChange((newContent) => {
-  document.getElementById("cars")!.textContent = newContent.numberOfCar(6);
-});
-
-// Initial render
-document.getElementById("cars")!.textContent = content.numberOfCar(6);
-```
-
-  </Tab>
-</Tabs>
 ## Additional Resources
 
 For more detailed information on configuration and usage, refer to the following resources:

package/docs/zh/dictionary/function_fetching.md

@@ -89,33 +89,6 @@ export default asyncFunctionContent;
 
 ## 在 React 组件中使用基于函数的内容
 
-要在 React 组件中使用基于函数的内容，您需要从 `react-intlayer` 导入 `useIntlayer`，并使用内容 ID 调用它以获取内容。示例如下：
-
-```typescript fileName="**/*.jsx" codeFormat="typescript"
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const MyComponent: FC = () => {
-  const functionContent = useIntlayer("function_content");
-  const asyncFunctionContent = useIntlayer("async_function_content");
-
-  return (
-    <div>
-      <p>{functionContent.text}</p>
-      {/* 输出：这是由函数渲染的内容 */}
-      <p>{asyncFunctionContent.text}</p>
-      {/* 输出：这是从服务器获取的内容 */}
-    </div>
-  );
-};
-
-export default MyComponent;
-```
-
-在这种情况下，`fakeFetch` 函数模拟了延迟以模拟服务器响应时间。Intlayer 执行异步函数并使用结果作为 `text` 键的内容。
-
-## 在 React 组件中使用基于函数的内容
-
 要在 React 组件中使用基于函数的内容，您需要从 `react-intlayer` 导入 `useIntlayer` 并使用内容 ID 调用它以获取内容。示例如下：
 
 ```typescript fileName="**/*.jsx" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/zh/dictionary/insertion.md

@@ -152,70 +152,6 @@ export default InsertionComponent;
 
 ## 附加资源
 
-有关配置和使用的更详细信息，请参阅以下资源：
-
-- [Intlayer CLI 文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/index.md)
-  const { useIntlayer } = require("react-intlayer");
-
-const InsertionComponent = () => {
-const { myInsertion } = useIntlayer("my_key");
-
-return (
-
-<div>
-<p>
-{
-/_ 输出: "Hello, my name is John and I am 30 years old!" _/
-myInsertion({ name: "John", age: "30" })
-}
-</p>
-<p>
-{
-/_ 你可以使用不同的值重复使用相同的插入 _/
-myInsertion({ name: "Alice", age: "25" })
-}
-</p>
-</div>
-);
-};
-
-module.exports = InsertionComponent;
-
-```
-
-## 附加资源
-
-有关配置和使用的更详细信息，请参阅以下资源：
-
-- [Intlayer CLI 文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/index.md)
-const { useIntlayer } = require("react-intlayer");
-
-const InsertionComponent = () => {
-  const { myInsertion } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* 输出: "Hello, my name is John and I am 30 years old!" */
-          myInsertion({ name: "John", age: "30" })
-        }
-      </p>
-      <p>
-        {
-          /* 你可以使用不同的值重复使用相同的插入 */
-          myInsertion({ name: "Alice", age: "25" })
-        }
-      </p>
-    </div>
-  );
-};
-
-module.exports = InsertionComponent;
-```
-
-## 附加资源
-
 有关配置和使用的更详细信息，请参考以下资源：
 
 - [Intlayer CLI 文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/index.md)

package/docs/zh/dictionary/nesting.md

@@ -27,6 +27,45 @@ author: aymericzip
 
 ## 设置嵌套
 
+要在你的 Intlayer 项目中设置嵌套，你首先定义你希望重用的基础内容。然后，在一个单独的内容模块中，你使用 `nest` 函数来导入该内容。
+
+### 基础字典
+
+下面是一个基础字典的示例，用于嵌套在另一个字典中：
+
+```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { type Dictionary } from "intlayer";
+
+const firstDictionary = {
+  key: "key_of_my_first_dictionary",
+  content: {
+    content: "content",
+    subContent: {
+      contentNumber: 0,
+      contentString: "string",
+    },
+  },
+} satisfies Dictionary;
+
+export default firstDictionary;
+```
+
+```json fileName="firstDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_first_dictionary",
+  "content": {
+    "content": "content",
+    "subContent": {
+      "contentNumber": 0,
+      "contentString": "string"
+    }
+  }
+}
+```
+
+## 设置嵌套
+
 <Tabs group="framework">
   <Tab label="React" value="react">