@intlayer/docs 8.7.7 → 8.7.8

package/docs/zh/intlayer_with_angular.md

@@ -14,6 +14,7 @@ slugs:
   - environment
   - angular
 applicationTemplate: https://github.com/aymericzip/intlayer-angular-template
+applicationShowcase: https://intlayer-angular-template.vercel.app
 history:
   - version: 8.0.0
     date: 2025-12-30
@@ -48,13 +49,24 @@ history:
   <Tab label="代码" value="code">
 
 <iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer-angular-template?embed=1&ctl=1&file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-angular-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
   title="Demo CodeSandbox - 如何使用 Intlayer 国际化你的应用"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
 
+  </Tab>
+  <Tab label="演示" value="demo">
+
+<iframe
+  src="https://intlayer-angular-template.vercel.app"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="演示 — intlayer-angular-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
   </Tab>
 </Tabs>
 
@@ -102,7 +114,7 @@ bun x intlayer init
 
 创建一个配置文件来配置应用的语言：
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -120,44 +132,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // 你的其他语言
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // 你的其他语言
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-module.exports = config;
-```
-
 > 通过此配置文件，你可以设置本地化 URL、中间件重定向、Cookie 名称、内容声明的位置和扩展名、禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅 [配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)。
 
 ### 第 3 步：在 Angular 配置中集成 Intlayer
@@ -207,7 +181,7 @@ export default mergeConfig({});
 
 创建并管理你的内容声明以存储翻译：
 
-```tsx fileName="src/app/app.content.ts" contentDeclarationFormat="typescript"
+```tsx fileName="src/app/app.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
 import { t, type Dictionary } from "intlayer";
 
 const appContent = {

package/docs/zh/intlayer_with_astro.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-03-07
 updatedAt: 2025-12-30
-title: Astro i18n - 如何翻译Astro 应用 2026
-description: 学习如何使用 Intlayer 为您的 Astro 网站添加国际化（i18n）。按照本指南使您的网站支持多语言。
+title: Astro i18n - 如何在 2026 年翻译 Astro 应用程序
+description: 了解如何使用 Intlayer 为您的 Astro 网站添加国际化 (i18n)。按照本指南让您的网站支持多语言。
 keywords:
   - 国际化
   - 文档
@@ -16,65 +16,95 @@ slugs:
   - environment
   - astro
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
+applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
   - version: 7.5.9
     date: 2025-12-30
     changes: "添加 init 命令"
   - version: 6.2.0
     date: 2025-10-03
-    changes: "针对 Astro 集成、配置和使用进行了更新"
+    changes: "更新 Astro 注入、配置和用法"
 ---
 
-# 使用Intlayer翻译您的Astro | 国际化(i18n)
+# 使用 Intlayer 翻译您的 Astro 网站 | 国际化 (i18n)
 
-请参阅 GitHub 上的[应用模板](https://github.com/aymericzip/intlayer-astro-template)。
+<Tabs defaultTab="code">
+  <Tab label="代码" value="code">
+
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-astro-template?file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - 如何使用 Intlayer 国际化您的应用程序"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+  <Tab label="演示" value="demo">
+
+<iframe
+  src="https://intlayer-astro-template.vercel.app"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="演示 — intlayer-astro-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+</Tabs>
+
+## 目录
+
+<TOC/>
 
 ## 什么是 Intlayer？
 
-**Intlayer** 是一个创新的开源国际化（i18n）库，旨在简化现代 Web 应用中的多语言支持。
+**Intlayer** 是一个创新且开源的国际化 (i18n) 库，旨在简化现代 Web 应用程序的多语言支持。
 
 使用 Intlayer，您可以：
 
-- **通过组件级声明式字典轻松管理翻译**。
+- **轻松管理翻译**：使用组件级的声明式词典。
 - **动态本地化元数据、路由和内容**。
-- **确保 TypeScript 支持**，通过自动生成类型，提升自动补全和错误检测能力。
-- **享受高级功能**，如动态语言环境检测和切换。
+- **确保 TypeScript 支持**：通过自动生成的类型增强自动补全和错误检测。
+- **受益于高级功能**：如动态语言检测和语言切换。
 
 ---
 
-## 在 Astro 中设置 Intlayer 的分步指南
+## 在 Astro 中配置 Intlayer 的分步指南
+
+在 GitHub 上查看[应用程序模板](https://github.com/aymericzip/intlayer-astro-template)。
 
 ### 第一步：安装依赖
 
-使用您的包管理器安装必要的包：
+使用您喜欢的包管理器安装所需的软件包：
 
 ```bash packageManager="npm"
 npm install intlayer astro-intlayer
-# 可选：添加 React 岛屿支持
+# 可选：如果添加 React 岛支持
 npm install react react-dom react-intlayer @astrojs/react
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer
-# 可选：添加 React 岛屿支持
+# 可选：如果添加 React 岛支持
 pnpm add react react-dom react-intlayer @astrojs/react
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer astro-intlayer
-# 可选：添加 React 岛屿支持
+# 可选：如果添加 React 岛支持
 yarn add react react-dom react-intlayer @astrojs/react
 ```
 
-- **intlayer**  
-  核心包，提供国际化工具，用于配置管理、翻译、[内容声明](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)、转译以及[命令行工具](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/index.md)。
+- **intlayer**
+  核心软件包，提供用于配置管理、翻译、[内容声明](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)的国际化工具。
 
-- **astro-intlayer**  
-  包括用于将 Intlayer 与 [Vite 打包工具](https://vite.dev/guide/why.html#why-bundle-for-production) 集成的 Astro 集成插件，以及用于检测用户首选语言环境、管理 Cookie 和处理 URL 重定向的中间件。
+- **astro-intlayer**
+  包含将 Intlayer 与 [Vite 构建器](https://vite.dev/guide/why.html#why-bundle-for-production)集成的 Astro 集成插件，以及用于检测用户首选语言、管理 Cookie 和处理 URL 重定向的中间件。
 
-### 第 2 步：配置您的项目
+### 第二步：配置您的项目
 
-创建一个配置文件来配置您的应用程序语言：
+创建一个配置文件来定义您的应用程序语言：
 
 ```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -85,7 +115,7 @@ const config: IntlayerConfig = {
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // 您的其他语言环境
+      // 您的其他语言
     ],
     defaultLocale: Locales.ENGLISH,
   },
@@ -94,11 +124,11 @@ const config: IntlayerConfig = {
 export default 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)。
 
-### 第三步：在您的 Astro 配置中集成 Intlayer
+### 第三步：在 Astro 配置中集成 Intlayer
 
-将 intlayer 插件添加到您的配置中。
+将 intlayer 插件添加到您的 Astro 配置中。
 
 ```typescript fileName="astro.config.ts"
 // @ts-check
@@ -112,9 +142,9 @@ export default defineConfig({
 });
 ```
 
-> `intlayer()` Astro 集成插件用于将 Intlayer 与 Astro 集成。它确保内容声明文件的构建，并在开发模式下监控这些文件。在 Astro 应用中定义了 Intlayer 环境变量。此外，它还提供别名以优化性能。
+> `intlayer()` 集成插件用于将 Intlayer 与 Astro 集成。它确保内容声明文件的构建并在开发模式下进行监视。它在 Astro 应用程序中定义 Intlayer 环境变量，并提供别名以优化性能。
 
-### 第4步：声明您的内容
+### 第四步：声明您的内容
 
 创建并管理您的内容声明以存储翻译：
 
@@ -129,6 +159,7 @@ const appContent = {
       en: "Hello World",
       fr: "Bonjour le monde",
       es: "Hola mundo",
+      zh: "你好，世界",
     }),
   },
 } satisfies Dictionary;
@@ -136,13 +167,13 @@ const appContent = {
 export default 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/content_file.md)。
+> 有关更多信息，请参阅[内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
 
-### 第5步：在 Astro 中使用您的内容
+### 第五步：在 Astro 中使用内容
 
-您可以直接在 `.astro` 文件中使用 `intlayer` 导出的核心辅助函数来消费字典。
+您可以使用 `intlayer` 导出的核心辅助函数直接在 `.astro` 文件中消费词典。
 
 ```astro fileName="src/pages/index.astro"
 <!-- astro -->
@@ -153,7 +184,7 @@ import appContent from "../app.content";
 const { title } = getIntlayer('app');
 ---
 
-<html lang="en">
+<html lang="zh">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
@@ -165,9 +196,9 @@ const { title } = getIntlayer('app');
 </html>
 ```
 
-### 第6步：本地化路由
+### 第六步：本地化路由
 
-创建一个动态路由段来服务本地化页面，例如 `src/pages/[locale]/index.astro`：
+创建动态路由段以提供本地化页面（例如 `src/pages/[locale]/index.astro`）：
 
 ```astro fileName="src/pages/[locale]/index.astro"
 <!-- astro -->
@@ -180,25 +211,25 @@ const { title } = getIntlayer('app');
 <h1>{title}</h1>
 ```
 
-Astro 集成在开发期间添加了一个 Vite 中间件，帮助处理基于语言环境的路由和环境定义。你仍然可以使用自己的逻辑或 `intlayer` 提供的工具函数如 `getLocalizedUrl` 来实现语言环境间的链接。
+Astro 集成添加了一个 Vite 中间件，有助于在开发期间进行语言感知路由和环境定义。您还可以使用自己的逻辑或 `intlayer` 的 `getLocalizedUrl` 等工具创建语言之间的链接。
 
-### 第7步：继续使用你喜欢的框架
+### 第七步：继续使用您喜欢的框架
 
-继续使用您喜欢的框架来构建您的应用程序。
+继续使用您喜欢的框架构建您的应用程序。
 
-- Intlayer + React: [Intlayer 与 React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_vite+react.md)
-- Intlayer + Vue: [Intlayer 与 Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_vite+vue.md)
-- Intlayer + Svelte: [Intlayer 与 Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_vite+svelte.md)
-- Intlayer + Solid: [Intlayer 与 Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_vite+solid.md)
-- Intlayer + Preact: [Intlayer 与 Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_vite+preact.md)
+- Intlayer + React: [Intlayer with React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_vite+react.md)
+- Intlayer + Vue: [Intlayer with Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_vite+vue.md)
+- Intlayer + Svelte: [Intlayer with Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_vite+svelte.md)
+- Intlayer + Solid: [Intlayer with Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_vite+solid.md)
+- Intlayer + Preact: [Intlayer with Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_vite+preact.md)
 
-### 配置 TypeScript
+### TypeScript 配置
 
-Intlayer 使用模块增强来利用 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 配置包含自动生成的类型。
 
@@ -214,34 +245,114 @@ Intlayer 使用模块增强来利用 TypeScript 的优势，使您的代码库
 
 ### Git 配置
 
-建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。
+建议忽略 Intlayer 生成的文件。这可以避免将它们提交到您的 Git 仓库。
 
-要做到这一点，您可以将以下指令添加到您的 `.gitignore` 文件中：
+为此，您可以将以下说明添加到 `.gitignore` 文件中：
 
 ```bash
-#  忽略 Intlayer 生成的文件
+# 忽略 Intlayer 生成的文件
 .intlayer
 ```
 
 ### VS Code 扩展
 
-为了提升您使用 Intlayer 的开发体验，您可以安装官方的 **Intlayer VS Code 扩展**。
+为了改善使用 Intlayer 的开发体验，您可以安装**官方 Intlayer VS Code 扩展**。
 
-[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+[从 VS Code Marketplace 安装](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)。
 
 ---
 
-### 深入探索
+### 第十五步：提取组件中的内容（可选）
+
+如果您有现有的代码库，转换数千个文件可能会非常耗时。
+
+为了简化此过程，Intlayer 提供了 [编译器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/compiler.md) / [提取器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/extract.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)将内容外部化。
+要进行设置，您可以在 `intlayer.config.ts` 文件中添加 `compiler` 部分：
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... 您的其他配置
+  compiler: {
+    /**
+     * 指示是否应启用编译器。
+     */
+    enabled: true,
+
+    /**
+     * 定义输出文件路径
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * 指示在转换后是否应保存组件。这样，编译器只需运行一次即可转换应用程序，然后即可将其删除。
+     */
+    saveComponents: false,
+
+    /**
+     * 字典键前缀
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+<Tabs>
+ <Tab value='提取命令'>
+
+运行提取器以转换组件并提取内容
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bun x intlayer extract
+```
+
+ </Tab>
+ <Tab value='Babel 编译器'>
+
+更新您的 `vite.config.ts` 以包含 `intlayerCompiler` 插件：
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // 添加编译器插件
+  ],
+});
+```
+
+ </Tab>
+</Tabs>
 
 ---
+
+### 深入了解
+
+如果您想了解更多，还可以实现[可视化编辑器](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) 将您的内容外部化。