@intlayer/docs 9.0.0-canary.8 → 9.0.0

package/docs/zh/intlayer_with_nextjs_page_router.md

@@ -125,19 +125,23 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 使用您喜欢的包管理器安装必要的包：
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
 ```
 
 > `--interactive` 标志是可选的。如果您是 AI 代理，请使用 `intlayer-cli init`。

package/docs/zh/intlayer_with_react_native+expo.md

@@ -121,19 +121,23 @@ Intlayer 不仅仅是一个 i18n 解决方案，它还提供**自托管的[可
 在您的 React Native 项目中，安装以下包：
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
 ```
 
 > `--interactive` 标志是可选的。如果您是 AI 代理，请使用 `intlayer-cli init`。

package/docs/zh/intlayer_with_react_router_v7.md

@@ -86,19 +86,23 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 使用您喜欢的包管理器安装必要的包：
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
 ```
 
 > `--interactive` 标志是可选的。如果您是 AI 代理，请使用 `intlayer-cli init`。
@@ -139,7 +143,7 @@ bun add vite-intlayer --dev
 
 <Tabs defaultTab="video">
   <Tab label="视频" value="video">
-  
+
 <iframe title="How to translate an React Router v7 app using Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
   </Tab>

package/docs/zh/intlayer_with_vite+solid.md

@@ -32,7 +32,7 @@ author: aymericzip
 
 <Tabs defaultTab="video">
   <Tab label="视频" value="video">
-  
+
 <iframe title="The best i18n solution for Vite and Solid? Discover Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
 
   </Tab>
@@ -58,19 +58,23 @@ author: aymericzip
 使用 npm 安装所需的包：
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
 ```
 
 > `--interactive` 标志是可选的。如果您是 AI 代理，请使用 `intlayer-cli init`。

package/docs/zh/intlayer_with_vite+svelte.md

@@ -133,19 +133,23 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 使用 npm 安装必要的包：
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
 ```
 
 > `--interactive` 标志是可选的。如果您是 AI 代理，请使用 `intlayer-cli init`。

package/docs/zh/intlayer_with_vite+vue.md

@@ -93,7 +93,7 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 
 <Tabs defaultTab="video">
   <Tab label="视频" value="video">
-  
+
 <iframe title="The best i18n solution for Vite and Vue? Discover Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/IE3XWkZ6a5U?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
   </Tab>
@@ -130,19 +130,23 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 使用 npm 安装所需的包：
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
 ```
 
 > `--interactive` 标志是可选的。如果您是 AI 代理，请使用 `intlayer-cli init`。

package/docs/zh/live-sync.md

@@ -0,0 +1,175 @@
+---
+createdAt: 2026-07-08
+updatedAt: 2026-07-08
+title: 实时同步（Live Sync）| 让应用实时反映 CMS 内容变更
+description: 让您的应用在运行时实时反映 Intlayer CMS 的内容变更，无需重新构建或重新部署。
+keywords:
+  - 实时同步
+  - Live Sync
+  - CMS
+  - 可视化编辑器
+  - 国际化
+  - 文档
+  - Intlayer
+  - Next.js
+  - Vite
+history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "从 Intlayer CMS 文档中拆分为独立页面"
+  - version: 6.0.1
+    date: 2025-09-22
+    changes: "添加实时同步文档"
+  - version: 6.0.0
+    date: 2025-09-04
+    changes: "用 `liveSync` 字段替换 `hotReload` 字段"
+author: aymericzip
+---
+
+# 实时同步
+
+实时同步让您的应用在运行时反映 CMS 内容的更改。无需重新构建或重新部署。启用后，更新会被流式传输到实时同步服务器，刷新您的应用读取的字典。
+
+## 目录
+
+<TOC/>
+
+---
+
+## 启用实时同步
+
+> 实时同步需要持续的服务器连接，并且仅在企业版计划中可用。
+
+通过更新您的 Intlayer 配置来启用实时同步：
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... 其他配置设置
+  editor: {
+    /**
+     * 当检测到更改时，启用本地配置的热重载。
+     * 例如，当添加或更新字典时，应用程序会更新页面上显示的内容。
+     *
+     * 由于热重载需要与服务器保持持续连接，
+     * 因此仅对 `enterprise` 计划的客户开放。
+     *
+     * 默认值：false
+     */
+    liveSync: true,
+  },
+  dictionary: {
+    /**
+     * 控制字典的导入方式：
+     *
+     * - "live"：字典通过 Live Sync API 动态获取。
+     *   替换 useIntlayer 为 useDictionaryDynamic。
+     *
+     * 注意：Live 模式使用 Live Sync API 获取字典。如果 API 调用失败，
+     * 字典将动态导入。
+     * 注意：只有带有远程内容和 "live" 标志的字典使用 live 模式。
+     * 其他字典为了性能使用动态模式。
+     */
+    importMode: "fetch",
+  },
+};
+
+export default config;
+```
+
+启动 Live Sync 服务器以包裹您的应用程序：
+
+使用 Next.js 的示例：
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... 其他脚本
+    "build": "next build",
+    "dev": "next dev",
+    "start": "npx intlayer live --with 'next start'",
+  },
+}
+```
+
+使用 Vite 的示例：
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... 其他脚本
+    "build": "vite build",
+    "dev": "vite dev",
+    "start": "npx intlayer live --with 'vite start'",
+  },
+}
+```
+
+Live Sync 服务器包裹您的应用程序，并在更新内容到达时自动应用。
+
+为了接收来自 CMS 的变更通知，Live Sync 服务器会与后端保持 SSE 连接。当 CMS 中的内容发生变化时，后端会将更新转发给 Live Sync 服务器，服务器会写入新的字典。您的应用将在下一次导航或浏览器刷新时反映更新, 无需重新构建。
+
+流程图（CMS/后端 -> Live Sync 服务器 -> 应用服务器 -> 前端）：
+
+![Live Sync 逻辑示意图](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
+
+工作原理：
+
+![Live Sync 流程 CMS/后端/Live Sync 服务器/应用服务器/前端示意图](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
+
+## 开发工作流程（本地）
+
+- 在开发过程中，应用启动时会获取所有远程字典，因此您可以快速测试更新。
+- 要在本地使用 Next.js 测试 Live Sync，请包装您的开发服务器：
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... 其他脚本
+    "dev": "npx intlayer live --with 'next dev'",
+    // "dev": "npx intlayer live --with 'vite dev'", // 适用于 Vite
+  },
+}
+```
+
+启用优化，以便 Intlayer 在开发期间应用实时导入转换：
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  editor: {
+    applicationURL: "http://localhost:5173",
+    liveSyncURL: "http://localhost:4000",
+    liveSync: true,
+  },
+  dictionary: {
+    importMode: "fetch",
+  },
+  build: {
+    optimize: true,
+  },
+};
+
+export default config;
+```
+
+此设置将您的开发服务器与实时同步服务器包装在一起，在启动时获取远程字典，并通过 SSE 从 CMS 流式传输更新。刷新页面以查看更改。
+
+## 注意事项和限制
+
+- 将实时同步源添加到您的站点安全策略（CSP）中。确保实时同步 URL 被允许在 `connect-src` 中（如果相关，也包括 `frame-ancestors`）。
+- 实时同步不适用于静态输出。对于 Next.js，页面必须是动态的才能在运行时接收更新（例如，适当使用 `generateStaticParams`、`generateMetadata`、`getServerSideProps` 或 `getStaticProps`，以避免完全静态的限制）。
+- 应用程序 URL 应与您在编辑器配置中设置的 URL (`applicationURL`) 匹配。
+- CMS URL
+- 确保项目配置已推送到 Intlayer CMS。
+
+- 可视化编辑器使用 iframe 来显示您的网站。确保您网站的内容安全策略（CSP）允许 CMS URL 作为 `frame-ancestors`（默认是 'https://intlayer.org'）。检查编辑器控制台是否有任何错误。
+
+## Useful links
+
+- [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md)
+- [Intlayer 可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_visual_editor.md)
+- [配置参考](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)
+- [自托管指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/self_hosting.md)

package/docs/zh/migration_from_i18next_to_intlayer.md

@@ -99,19 +99,23 @@ Intlayer 也是 i18n 生态系统中**开发最活跃的**解决方案——问
 安装 Intlayer 核心包和兼容性适配器：
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
 ```
 
 > `--interactive` 标志是可选的。如果你是 AI 代理，请使用 `intlayer-cli init`。

package/docs/zh/migration_from_next-i18next_to_intlayer.md

@@ -102,19 +102,23 @@ Intlayer 不仅仅是一个 i18n 解决方案，它还提供**自托管[可视
 安装 Intlayer 核心包和兼容适配器:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
 ```
 
 > `--interactive` 标志是可选的。如果您是 AI 代理,请使用 `intlayer-cli init`。

package/docs/zh/migration_from_next-intl_to_intlayer.md

@@ -98,19 +98,23 @@ Intlayer 不仅仅是一个 i18n 解决方案，它提供了一个**自托管的
 安装 Intlayer 核心包和 `@intlayer/next-intl` 兼容性适配器：
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
 ```
 
 > `--interactive` 标志是可选的。如果你是 AI 代理，请使用 `intlayer-cli init`。
@@ -184,9 +188,7 @@ import { createNextIntlPlugin } from "@intlayer/next-intl/plugin";
 
 const withIntlayer = createNextIntlPlugin();
 
-const nextConfig: NextConfig = {
-  /* 你现有的配置选项 */
-};
+const nextConfig: NextConfig = {/* 你现有的配置选项 */};
 
 export default withIntlayer(nextConfig);
 ```

package/docs/zh/migration_from_nuxtjs_i18n_to_intlayer.md

@@ -101,19 +101,23 @@ Intlayer 不仅仅是一个 i18n 解决方案，它还提供**自托管的[可
 安装 Intlayer 核心包和兼容性适配器：
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
 ```
 
 > `--interactive` 标志是可选的。如果你是 AI 代理，使用 `intlayer-cli init`。

package/docs/zh/migration_from_react-i18next_to_intlayer.md

@@ -101,19 +101,23 @@ Intlayer 不仅是一个 i18n 方案，它还提供**自托管的[可视化编
 安装 Intlayer 核心包和兼容性适配器：
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
 ```
 
 > `--interactive` 标志是可选的。如果你是 AI 代理，请使用 `intlayer-cli init`。
@@ -209,9 +213,7 @@ import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
 
 const withIntlayer = createNextI18nPlugin();
 
-const nextConfig: NextConfig = {
-  /* your options */
-};
+const nextConfig: NextConfig = {/* your options */};
 
 export default withIntlayer(nextConfig);
 ```

package/docs/zh/migration_from_vue-i18n_to_intlayer.md

@@ -100,19 +100,23 @@ Intlayer 也是 i18n 生态中**开发最活跃的**解决方案 —— 问题
 安装 Intlayer 核心 package 和兼容适配器：
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
 ```
 
 > `--interactive` flag 是可选的。如果您是 AI agent，请使用 `intlayer-cli init`。