@intlayer/docs 8.12.4 → 9.0.0-canary.10

package/docs/zh/intlayer_CMS.md

@@ -27,6 +27,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "初始化历史记录"
+author: aymericzip
 ---
 
 # Intlayer 内容管理系统（CMS）文档
@@ -39,6 +40,12 @@ Intlayer CMS 是一个应用程序，允许您将 Intlayer 项目的内容外部
 
 ![Intlayer CMS 界面](https://github.com/aymericzip/intlayer/blob/main/docs/assets/CMS.png)
 
+## 目录
+
+<TOC/>
+
+---
+
 ## 理解远程字典
 
 Intlayer 区分“本地”字典和“远程”字典。
@@ -366,3 +373,18 @@ export default config;
 - 确保项目配置已推送到 Intlayer CMS。
 
 - 可视化编辑器使用 iframe 来显示您的网站。确保您网站的内容安全策略（CSP）允许 CMS URL 作为 `frame-ancestors`（默认是 'https://intlayer.org'）。检查编辑器控制台是否有任何错误。
+
+## 调试
+
+如果您遇到 CMS 的任何问题，请检查以下内容：
+
+- 应用程序正在运行。
+
+- [`editor`](https://intlayer.org/doc/concept/configuration#editor-configuration) 配置在您的 Intlayer 配置文件中设置正确。
+  - 必需字段：
+    - 应用程序 URL 应该与您在编辑器配置中设置的 URL 相匹配（`applicationURL`）。
+    - CMS URL
+
+- 确保项目配置已推送到 Intlayer CMS。
+
+- 可视化编辑器使用 iframe 来显示您的网站。确保您的网站的内容安全策略 (CSP) 允许 CMS URL 作为 `frame-ancestors`（默认为 'https://app.intlayer.org'）。检查编辑器控制台中的任何错误。

package/docs/zh/intlayer_visual_editor.md

@@ -20,6 +20,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "初始化历史"
+author: aymericzip
 ---
 
 # Intlayer 可视化编辑器文档

package/docs/zh/intlayer_with_adonisjs.md

@@ -22,6 +22,7 @@ history:
   - version: 8.0.0
     date: 2025-12-30
     changes: "初始化历史"
+author: aymericzip
 ---
 
 # 使用 Intlayer 翻译您的 AdonisJS 后端网站 | 国际化 (i18n)
@@ -58,24 +59,40 @@ See [Application Template](https://github.com/aymericzip/intlayer-adonis-templat
 
 要开始使用 `adonis-intlayer`，请使用 npm 安装该包：
 
+```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 adonis-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer adonis-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer adonis-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer adonis-intlayer
-bun x intlayer init
 ```
 
 ### 设置

package/docs/zh/intlayer_with_analog.md

@@ -23,6 +23,7 @@ history:
   - version: 8.0.4
     date: 2026-01-26
     changes: "初始化历史记录"
+author: aymericzip
 ---
 
 # 使用 Intlayer 翻译您的 Analog (Angular) 应用 | 国际化 (i18n)
@@ -90,160 +91,6 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 
 ---
 
-## 在 Analog 应用中设置 Intlayer 的分步指南
-
-查看 GitHub 上的 [应用模板](https://github.com/aymericzip/intlayer-analog-template)。
-
-### 第 1 步：安装依赖项
-
-使用 npm 安装必要的软件包：
-
-```bash packageManager="npm"
-npm install intlayer angular-intlayer vite-intlayer
-npx intlayer init
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer angular-intlayer vite-intlayer
-pnpm intlayer init
-```
-
-```bash packageManager="yarn"
-yarn add intlayer angular-intlayer vite-intlayer
-yarn intlayer init
-```
-
-```bash packageManager="bun"
-bun add intlayer angular-intlayer vite-intlayer
-bun x intlayer init
-```
-
-- **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)的国际化工具。
-
-- **angular-intlayer**
-  将 Intlayer 与 Angular 应用集成的软件包。它为 Angular 国际化提供上下文提供者和 Hook。
-
-- **vite-intlayer**
-  将 Intlayer 与 Vite 集成的软件包。它提供一个插件来处理内容声明文件，并为优化性能设置别名。
-
-### 第 2 步：项目配置
-
-创建一个配置文件来配置应用的语言：
-
-```typescript 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;
-```
-
-> 通过此配置文件，您可以设置本地化 URL、中间件重定向、Cookie 名称、内容声明的位置和扩展名、禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参考[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
-
-### 第 3 步：在 Vite 配置中集成 Intlayer
-
-要将 Intlayer 与 Analog 集成，您需要使用 `vite-intlayer` 插件。
-
-修改您的 `vite.config.ts` 文件：
-
-```typescript fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer } from "vite-intlayer";
-import analog from "@analogjs/platform";
-
-// https://vitejs.dev/config/
-export default defineConfig(() => ({
-  plugins: [
-    analog(),
-    intlayer(), // 添加 Intlayer 插件
-  ],
-}));
-```
-
-> `intlayer()` 插件为 Vite 配置了 Intlayer。它处理内容声明文件并为优化性能设置别名。
-
-### 第 4 步：声明您的内容
-
-创建并管理您的内容声明以存储翻译：
-
-```tsx fileName="src/app/app.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
-import { t, type Dictionary } from "intlayer";
-
-const appContent = {
-  key: "app",
-  content: {
-    title: t({
-      en: "Hello",
-      fr: "Bonjour",
-      es: "Hola",
-      zh: "你好",
-    }),
-    congratulations: t({
-      en: "Congratulations! Your app is running. 🎉",
-      fr: "Félicitations! Votre application est en cours d'exécution. 🎉",
-      es: "¡Felicidades! Tu aplicación está en ejecución. 🎉",
-      zh: "恭喜！您的应用正在运行。 🎉",
-    }),
-  },
-} satisfies Dictionary;
-
-export default appContent;
-```
-
-> 您的内容声明可以定义在应用中的任何位置，只要它们包含在 `contentDir` 目录（默认为 `./src`）中，并且符合内容声明文件扩展名（默认为 `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`）。
-
-> 有关更多详细信息，请参考[内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
-
-### 第 5 步：在代码中使用 Intlayer
-
-要在整个 Analog 应用中使用 Intlayer 的国际化功能，您需要在应用配置中提供 Intlayer。
-
-```typescript fileName="src/app/app.config.ts"
-import { ApplicationConfig } from "@angular/core";
-import { provideIntlayer } from "angular-intlayer";
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideIntlayer(), // 在此处添加 Intlayer 提供者
-  ],
-};
-```
-
-然后，您可以在任何组件中使用 `useIntlayer` 函数。
-
-```typescript fileName="src/app/pages/index.page.ts"
-import { Component } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-home",
-  standalone: true,
-  template: `
-    <div class="content">
-      <h1>{{ content().title }}</h1>
-      <p>{{ content().congratulations }}</p>
-    </div>
-  `,
-})
-export default class HomeComponent {
-  content = useIntlayer("app");
-}
-```
-
-Intlayer 内容以 `Signal` 形式返回，因此您通过调用 Signal 来访问值：`content().title`。
-
 ### （可选）第 6 步：更改内容语言
 
 要更改内容的语言，您可以使用 `useLocale` 函数提供的 `setLocale` 函数。这允许您设置应用的语言环境并相应地更新内容。
@@ -350,3 +197,7 @@ Intlayer 使用模块扩充 (module augmentation) 来利用 TypeScript 的优势
 - 轻松创建和更新翻译的**快速操作**。
 
 有关如何使用该扩展的更多详细信息，请参考 [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) 外部化你的内容。

package/docs/zh/intlayer_with_angular_19.md

@@ -26,6 +26,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "初始化历史"
+author: aymericzip
 ---
 
 # 使用 Intlayer 翻译你的 Angular 19 (Webpack) 网站 | 国际化 (i18n)
@@ -68,238 +69,6 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 
 ---
 
-## 在 Angular 应用中设置 Intlayer 的分步指南
-
-<Tabs defaultTab="code">
-  <Tab label="代码" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-angular-19-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-19-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>
-
-在 GitHub 上查看 [应用模板](https://github.com/aymericzip/intlayer-angular-19-template)。
-
-### 第 1 步：安装依赖项
-
-使用 npm 安装必要的软件包：
-
-```bash packageManager="npm"
-npm install intlayer angular-intlayer
-npm install @angular-builders/custom-webpack --save-dev
-npx intlayer init
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer angular-intlayer
-pnpm add @angular-builders/custom-webpack --save-dev
-pnpm intlayer init
-```
-
-```bash packageManager="yarn"
-yarn add intlayer angular-intlayer
-yarn add @angular-builders/custom-webpack --save-dev
-yarn intlayer init
-```
-
-```bash packageManager="bun"
-bun add intlayer angular-intlayer
-bun add @angular-builders/custom-webpack --dev
-bun x intlayer init
-```
-
-- **intlayer**
-
-  核心软件包，提供用于配置管理、翻译、[内容声明](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)，转译和 [CLI 命令](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md)的国际化工具。
-
-- **angular-intlayer**
-  将 Intlayer 与 Angular 应用集成的软件包。它为 Angular 国际化提供上下文提供者和 Hook。
-
-- **@angular-builders/custom-webpack**
-  自定义 Angular CLI 的 Webpack 配置所需的。
-
-### 第 2 步：项目配置
-
-创建一个配置文件来配置应用的语言：
-
-```typescript 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;
-```
-
-> 通过此配置文件，你可以设置本地化 URL、中间件重定向、Cookie 名称、内容声明的位置和扩展名、禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅 [配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)。
-
-### 第 3 步：在 Angular 配置中集成 Intlayer
-
-要将 Intlayer 与 Angular CLI 集成，你需要使用自定义构建器。本指南假设你使用的是 Webpack（许多 Angular 项目的默认设置）。
-
-首先，修改你的 `angular.json` 以使用自定义 Webpack 构建器。更新 `build` 和 `serve` 配置：
-
-```json5 fileName="angular.json"
-{
-  "projects": {
-    "your-app-name": {
-      "architect": {
-        "build": {
-          "builder": "@angular-builders/custom-webpack:browser", // replace "@angular-devkit/build-angular:application",
-          "options": {
-            "customWebpackConfig": {
-              "path": "./webpack.config.ts",
-              "mergeStrategies": { "module.rules": "prepend" },
-            },
-            "main": "src/main.ts", // replace "browser": "src/main.ts",
-            // ...
-          },
-        },
-        "serve": {
-          "builder": "@angular-builders/custom-webpack:dev-server",
-        },
-      },
-    },
-  },
-}
-```
-
-> 请确保将 `your-app-name` 替换为 `angular.json` 中项目的实际名称。
-
-接下来，在项目根目录下创建一个 `webpack.config.ts` 文件：
-
-```typescript fileName="webpack.config.ts"
-import { mergeConfig } from "angular-intlayer/webpack";
-
-export default mergeConfig({});
-```
-
-> `mergeConfig` 函数使用 Intlayer 配置 Webpack。它会注入 `IntlayerPlugin`（用于处理内容声明文件）并设置别名以优化性能。
-
-### 第 4 步：声明你的内容
-
-创建并管理你的内容声明以存储翻译：
-
-```tsx fileName="src/app/app.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
-import { t, type Dictionary } from "intlayer";
-
-const appContent = {
-  key: "app",
-  content: {
-    title: t({
-      en: "Hello",
-      fr: "Bonjour",
-      es: "Hola",
-    }),
-    congratulations: t({
-      en: "Congratulations! Your app is running. 🎉",
-      fr: "Félicitations! Votre application est en cours d'exécution. 🎉",
-      es: "¡Felicidades! Tu aplicación está en ejecución. 🎉",
-    }),
-    exploreDocs: t({
-      en: "Explore the Docs",
-      fr: "Explorer les Docs",
-      es: "Explorar los Docs",
-    }),
-    learnWithTutorials: t({
-      en: "Learn with Tutorials",
-      fr: "Apprendre avec les Tutoriels",
-      es: "Aprender con los Tutorios",
-    }),
-    cliDocs: "CLI Docs",
-    angularLanguageService: t({
-      en: "Angular Language Service",
-      fr: "Service de Langage Angular",
-      es: "Servicio de Lenguaje Angular",
-    }),
-    angularDevTools: "Angular DevTools",
-    github: "Github",
-    twitter: "Twitter",
-    youtube: "Youtube",
-  },
-} satisfies Dictionary;
-
-export default appContent;
-```
-
-> 只要你的内容声明包含在 `contentDir` 目录中（默认为 `./src`），就可以在应用中的任何位置定义它们。并且匹配内容声明文件的扩展名（默认为 `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`）。
-
-> 有关更多详情，请参阅 [内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)。
-
-### 第 5 步：在代码中使用 Intlayer
-
-要在整个 Angular 应用中使用 Intlayer 的国际化功能，你需要在应用配置中提供 Intlayer。
-
-```typescript fileName="src/app/app.config.ts"
-import { ApplicationConfig } from "@angular/core";
-import { provideRouter } from "@angular/router";
-import { provideIntlayer } from "angular-intlayer";
-import { routes } from "./app.routes";
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideRouter(routes),
-    provideIntlayer(), // 在此处添加 Intlayer 提供者
-  ],
-};
-```
-
-然后，你可以在任何组件中使用 `useIntlayer` 函数。
-
-```typescript fileName="src/app/app.component.ts"
-import { Component } from "@angular/core";
-import { RouterOutlet } from "@angular/router";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-root",
-  standalone: true,
-  imports: [RouterOutlet],
-  templateUrl: "./app.component.html",
-  styleUrl: "./app.component.css",
-})
-export class AppComponent {
-  content = useIntlayer("app");
-}
-```
-
-在你的模板中：
-
-```html fileName="src/app/app.component.html"
-<div class="content">
-  <h1>{{ content().title }}</h1>
-  <p>{{ content().congratulations }}</p>
-</div>
-```
-
-Intlayer 内容作为 `Signal` 返回，因此你通过调用该信号来访问值：`content().title`。
-
 ### (可选) 第 6 步：更改内容的语言
 
 要更改内容的语言，你可以使用 `useLocale` 函数提供的 `setLocale` 函数。这允许你设置应用的语言区域并相应地更新内容。

package/docs/zh/intlayer_with_angular_21.md

@@ -28,6 +28,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "初始版本"
+author: aymericzip
 ---
 
 # 使用Intlayer翻译您的Angular 21（Vite）网站 | 国际化 (i18n)
@@ -105,28 +106,44 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 
 使用npm安装必要的包：
 
+```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 angular-intlayer
 npm install @angular-builders/custom-esbuild --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer
 pnpm add @angular-builders/custom-esbuild --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer
 yarn add @angular-builders/custom-esbuild --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer
 bun add @angular-builders/custom-esbuild --dev
-bun x intlayer init
 ```
 
 - **intlayer**