@intlayer/docs 9.4.0-canary.0 → 9.4.1

package/docs/zh/intlayer_with_vanilla.md

@@ -64,32 +64,49 @@ author: aymericzip
 
 **完整的 Vanilla JS 覆盖**
 
+<Accordion header="完整的 Vanilla JS 覆盖">
+
 Intlayer 经过优化，可与 Vanilla JavaScript 完美配合，提供**与框架无关的内容管理**、**TypeScript 支持**以及扩展国际化 (i18n) 所需的所有功能。
 
+</Accordion>
+
 **捆绑尺寸**
 
 不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
 
+</Accordion>
+
 **可维护性**
 
 确定应用程序内容的范围**有利于大型应用程序的维护**。您可以复制或删除单个功能文件夹，而无需承担检查整个内容代码库的精神负担。此外，Intlayer 具有**完全类型化 (fully typed)**，以确保您的内容的准确性。
 
 **人工智能代理**
 
+<Accordion header="AI Agent">
+
 共置内容**减少大型语言模型 (LLM) 所需的上下文**。 Intlayer 还附带了一套工具，例如用于测试缺失翻译的 **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** 和 **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/agent_skills.md)**，使 AI 代理的开发者体验 (DX) 更加流畅。
 
+</Accordion>
+
 **自动化**
 
 使用您选择的法学硕士，通过自动化在 CI/CD 管道中进行翻译，而费用由您的 AI 提供商承担。 Intlayer 还提供了一个**编译器**来自动提取内容，以及一个[网络平台](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)来帮助**在后台翻译**。
 
+</Accordion>
+
 **表现**
 
 将大量 JSON 文件连接到组件可能会导致性能和反应性问题。 Intlayer 可在构建时 (build time)优化您的内容加载。
 
 **无需开发即可扩展**
 
+<Accordion header="使用 none-dev 进行扩展">
+
 Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)**和一个**[完整的 CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** 来帮助您管理多语言内容**实时**，与译员、文案人员和其他团队成员无缝协作。内容可以本地和/或远程存储。
 
+</Accordion>
+</AccordionGroup>
+
 ---
 
 ## Vanilla JS 应用中设置 Intlayer 的分步指南

package/docs/zh/intlayer_with_vite+lit.md

@@ -60,38 +60,57 @@ author: aymericzip
 
 ## 为什么选择 Inlayer 而不是替代品？
 
+与 `lit-localize` 或 `i18next` 等主要解决方案相比，Intlayer 是一个具有集成优化的解决方案，例如：
+
 与“lit-localize”或“i18next”等主要解决方案相比，Intlayer是一个具有集成优化的解决方案，例如：
 
 **全照明覆盖**
 
 Intlayer 经过优化，可与 Lit 完美配合，提供 **Web 组件级内容范围**、**TypeScript 支持**以及扩展国际化 (i18n) 所需的所有功能。
 
+</Accordion>
+
 **捆绑尺寸**
 
 不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
 
+</Accordion>
+
 **可维护性**
 
 确定应用程序内容的范围**有利于大型应用程序的维护**。您可以复制或删除单个功能文件夹，而无需承担检查整个内容代码库的精神负担。此外，Intlayer 具有**完全类型化 (fully typed)**，以确保您的内容的准确性。
 
 **人工智能代理**
 
+<Accordion header="AI Agent">
+
 共置内容**减少大型语言模型 (LLM) 所需的上下文**。 Intlayer 还附带了一套工具，例如用于测试缺失翻译的 **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** 和 **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/agent_skills.md)**，使 AI 代理的开发者体验 (DX) 更加流畅。
 
+</Accordion>
+
 **自动化**
 
 使用您选择的法学硕士，通过自动化在 CI/CD 管道中进行翻译，而费用由您的 AI 提供商承担。 Intlayer 还提供了一个**编译器**来自动提取内容，以及一个[网络平台](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)来帮助**在后台翻译**。
 
+</Accordion>
+
 **表现**
 
 将大量 JSON 文件连接到组件可能会导致性能和反应性问题。 Intlayer 可在构建时 (build time)优化您的内容加载。
 
 **无需开发即可扩展**
 
+<Accordion header="使用 none-dev 进行扩展">
+
 Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)**和一个**[完整的 CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** 来帮助您管理多语言内容**实时**，与译员、文案人员和其他团队成员无缝协作。内容可以本地和/或远程存储。
 
+</Accordion>
+</AccordionGroup>
+
 ---
 
+查看 GitHub 上的[应用程序模板](https://github.com/aymericzip/intlayer-vite-lit-template)。
+
 ## 在 Vite 和 Lit 应用中设置 Intlayer 的分步指南
 
 <Steps>

package/docs/zh/intlayer_with_vite+preact.md

@@ -71,32 +71,49 @@ author: aymericzip
 
 **完整的 Preact 覆盖**
 
+<Accordion header="Full Preact coverage">
+
 Intlayer 经过优化，可与 Preact 完美配合，提供**组件级内容范围**、**延迟加载翻译**以及​​扩展国际化 (i18n) 所需的所有功能。
 
+</Accordion>
+
 **捆绑尺寸**
 
 不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
 
+</Accordion>
+
 **可维护性**
 
 确定应用程序内容的范围**有利于大型应用程序的维护**。您可以复制或删除单个功能文件夹，而无需承担检查整个内容代码库的精神负担。此外，Intlayer 具有**完全类型化 (fully typed)**，以确保您的内容的准确性。
 
 **人工智能代理**
 
+<Accordion header="AI Agent">
+
 共置内容**减少大型语言模型 (LLM) 所需的上下文**。 Intlayer 还附带了一套工具，例如用于测试缺失翻译的 **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** 和 **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/agent_skills.md)**，使 AI 代理的开发者体验 (DX) 更加流畅。
 
 **自动化**
 
+<Accordion header="自动化">
+
 使用您选择的法学硕士，通过自动化在 CI/CD 管道中进行翻译，而费用由您的 AI 提供商承担。 Intlayer 还提供了一个**编译器**来自动提取内容，以及一个[网络平台](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)来帮助**在后台翻译**。
 
+</Accordion>
+
 **表现**
 
 将大量 JSON 文件连接到组件可能会导致性能和反应性问题。 Intlayer 可在构建时 (build time)优化您的内容加载。
 
 **无需开发即可扩展**
 
+<Accordion header="使用 none-dev 进行扩展">
+
 Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)**和一个**[完整的 CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** 来帮助您管理多语言内容**实时**，与译员、文案人员和其他团队成员无缝协作。内容可以本地和/或远程存储。
 
+</Accordion>
+</AccordionGroup>
+
 ---
 
 ## 在 Vite 和 Preact 应用中设置 Intlayer 的分步指南
@@ -691,6 +708,68 @@ const App: FunctionalComponent = () => (
 export default App;
 ```
 
+通过应用这些更改，您的应用将:
+
+- 确保 **language** (`lang`) 属性正确反映当前locale，这对SEO和浏览器行为很重要。
+- 根据locale调整 **text direction** (`dir`)，增强可读性和可用性，特别是对于阅读顺序不同的语言。
+- 提供更 **accessible** 的体验，因为辅助技术依赖这些属性才能实现最佳功能。
+
+</Step>
+
+<Step number={10} title="创建本地化链接组件" isOptional={true}>
+
+为了确保您的应用程序的导航尊重当前的语言环境，您可以创建一个自定义 `Link` 组件。该组件自动为内部 URL 添加当前语言的前缀。
+
+这种行为有几个有用的原因:
+
+- **SEO 和用户体验**：本地化的 URL 帮助搜索引擎正确索引特定语言的页面，并为用户提供他们首选语言的内容。
+- **一致性**：通过在整个应用程序中使用本地化链接，你可以保证导航保持在当前的语言环境中，防止意外的语言切换。
+- **可维护性**：将本地化逻辑集中在一个单独的组件中，简化了 URL 的管理。
+
+Below is the implementation of a localized `Link` component in Preact:
+
+```tsx fileName="src/components/Link.tsx" codeFormat={["typescript", "esm"]}
+import { getLocalizedUrl } from "intlayer";
+import { useLocale } from "preact-intlayer";
+import { forwardRef } from "preact/compat";
+import type { JSX } from "preact";
+
+export interface LinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
+  href: string;
+}
+
+/**
+ * 用于检查给定 URL 是否为外部链接的实用函数。
+ * 如果 URL 以 http:// 或 https:// 开头，则认为是外部链接。
+ */
+export const checkIsExternalLink = (href?: string): boolean =>
+  /^https?:\/\//.test(href ?? "");
+
+/**
+ * 一个自定义 Link 组件，根据当前语言环境调整 href 属性。
+ * 对于内部链接，它使用 `getLocalizedUrl` 为 URL 前缀添加语言环境（例如 /fr/about）。
+ * 这确保导航保持在同一语言环境上下文中。
+ */
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ href, children, ...props }, ref) => {
+    const { locale } = useLocale();
+    const isExternalLink = checkIsExternalLink(href);
+
+    // 如果链接是内部链接并提供了有效的 href，则获取本地化的 URL。
+    const hrefI18n =
+      href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
+
+    return (
+      <a href={hrefI18n} ref={ref} {...props}>
+        {children}
+      </a>
+    );
+  }
+);
+
+Link.displayName = "Link";
+```
+
 #### 工作原理
 
 - **检测外部链接**:  
@@ -847,58 +926,10 @@ bun run build # 或 bun run dev
 
 ### （可选）第 10 步：创建本地化链接组件
 
-为了确保您的应用程序导航尊重当前语言环境，您可以创建一个自定义 `Link` 组件。此组件会自动为内部 URL 添加当前语言前缀。
-
-这种行为在以下几个方面非常有用：
-
 - **SEO 和用户体验**：本地化 URL 帮助搜索引擎正确索引特定语言的页面，并为用户提供其首选语言的内容。
 - **一致性**：通过在整个应用程序中使用本地化链接，您可以确保导航保持在当前语言环境内，防止意外的语言切换。
 - **可维护性**：将本地化逻辑集中在单个组件中可以简化 URL 的管理。
 
-以下是 Preact 中本地化 `Link` 组件的实现：
-
-```tsx fileName="src/components/Link.tsx" codeFormat={["typescript", "esm"]}
-import { getLocalizedUrl } from "intlayer";
-import { useLocale } from "preact-intlayer";
-import { forwardRef } from "preact/compat";
-import type { JSX } from "preact";
-
-export interface LinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
-  href: string;
-}
-
-/**
- * 检查给定 URL 是否为外部链接的实用函数。
- * 如果 URL 以 http:// 或 https:// 开头，则被视为外部链接。
- */
-export const checkIsExternalLink = (href?: string): boolean =>
-  /^https?:\/\//.test(href ?? "");
-
-/**
- * 一个自定义 Link 组件，根据当前语言环境自适应 href 属性。
- * 对于内部链接，它使用 `getLocalizedUrl` 为 URL 添加语言环境前缀（例如 /fr/about）。
- * 这确保了导航保持在同一语言环境上下文中。
- */
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ href, children, ...props }, ref) => {
-    const { locale } = useLocale();
-    const isExternalLink = checkIsExternalLink(href);
-
-    // 如果链接是内部的且提供了有效的 href，则获取本地化 URL。
-    const hrefI18n =
-      href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
-
-    return (
-      <a href={hrefI18n} ref={ref} {...props}>
-        {children}
-      </a>
-    );
-  }
-);
-
-Link.displayName = "Link";
-```
-
 #### Sitemap
 
 Intlayer 的 sitemap 生成器遵守你的本地化设置，并包括用于爬虫的常见元数据。
@@ -962,6 +993,17 @@ console.log("SEO files generated successfully.");
 
 #### 工作原理
 
+```json fileName="package.json"
+{
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "node generate-seo.mjs",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+```
+
 - **检测外部链接**：  
   辅助函数 `checkIsExternalLink` 确定 URL 是否为外部。外部链接保持不变，因为它们不需要本地化。
 - **检索当前语言环境**：  

package/docs/zh/intlayer_with_vite+react.md

@@ -39,6 +39,10 @@ author: aymericzip
 
 ## 为什么选择 Inlayer 而不是替代品？
 
+与 `react-i18next` 或 `i18next` 等主要解决方案相比，Intlayer 是一个具有集成优化功能的解决方案，例如：
+
+<AccordionGroup>
+
 与“react-i18next”或“i18next”等主要解决方案相比，Intlayer是一个具有集成优化的解决方案，例如：
 
 **完整的 Vite 和 React 覆盖**
@@ -49,26 +53,39 @@ Intlayer 经过优化，可与 Vite 和 React 完美配合，提供**组件级
 
 不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
 
+</Accordion>
+
 **可维护性**
 
 确定应用程序内容的范围**有利于大型应用程序的维护**。您可以复制或删除单个功能文件夹，而无需承担检查整个内容代码库的精神负担。此外，Intlayer 具有**完全类型化 (fully typed)**，以确保您的内容的准确性。
 
 **人工智能代理**
 
+<Accordion header="AI Agent">
+
 共置内容**减少大型语言模型 (LLM) 所需的上下文**。 Intlayer 还附带了一套工具，例如用于测试缺失翻译的 **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** 和 **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/agent_skills.md)**，使 AI 代理的开发者体验 (DX) 更加流畅。
 
+</Accordion>
+
 **自动化**
 
 使用您选择的法学硕士，通过自动化在 CI/CD 管道中进行翻译，而费用由您的 AI 提供商承担。 Intlayer 还提供了一个**编译器**来自动提取内容，以及一个[网络平台](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)来帮助**在后台翻译**。
 
+</Accordion>
+
 **表现**
 
 将大量 JSON 文件连接到组件可能会导致性能和反应性问题。 Intlayer 可在构建时 (build time)优化您的内容加载。
 
 **无需开发即可扩展**
 
+<Accordion header="与非开发人员一起扩展">
+
 Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)**和一个**[完整的 CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** 来帮助您管理多语言内容**实时**，与译员、文案人员和其他团队成员无缝协作。内容可以本地和/或远程存储。
 
+</Accordion>
+</AccordionGroup>
+
 ---
 
 ## 在 Vite 和 React 应用中分步设置 Intlayer 指南
@@ -752,6 +769,8 @@ Link.displayName = "Link";
 - **返回链接**：  
   该组件返回一个带有本地化 URL 的 `<a>` 元素，确保导航与当前语言环境保持一致。
 
+通过在整个应用程序中集成这个 `Link` 组件，你可以维持一致且具有语言意识的用户体验，同时获得改进的 SEO 和可用性。
+
 通过在整个应用中集成此 `Link` 组件，您可以维护一致且具语言感知的用户体验，同时提升 SEO 和可用性。
 </Step>
 

package/docs/zh/intlayer_with_vite+solid.md

@@ -46,6 +46,17 @@ author: aymericzip
   loading="lazy"
 />
 
+  </Tab>
+  <Tab label="演示" value="demo">
+
+<iframe
+  src="https://intlayer-vite-solid.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="Demo Intlayer Vite + Solid 模板"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
   </Tab>
 </Tabs>
 
@@ -707,19 +718,6 @@ bun run build # 或 bun run dev
 
 ### 第3步：在你的 Vite 配置中集成 Intlayer
 
-将 intlayer 插件添加到你的配置中。
-
-```typescript fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-import { intlayer } from "vite-intlayer";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), intlayer()],
-});
-```
-
 > `intlayer()` 是用于将 Intlayer 集成到 Vite 中的插件。它确保内容声明文件的构建，并在开发模式下监视这些文件。它在 Vite 应用中定义了 Intlayer 的环境变量。此外，它还提供别名以优化性能。
 
 #### 网站地图
@@ -825,19 +823,8 @@ console.log("SEO files generated successfully.");
 
 [从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-该扩展提供：
-
-- 翻译键的**自动补全**。
-- 缺失翻译的**实时错误检测**。
-- **已翻译内容的内联预览**。
-- **快速操作**，轻松创建和更新翻译。
-
-有关如何使用该扩展的更多详细信息，请参阅[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_vite+svelte.md

@@ -715,32 +715,30 @@ console.log("SEO files generated successfully.");
 
 ### 深入了解
 
-要进一步提升，您可以实现[可视化编辑器](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)将内容外部化。
-
-### Git 配置
-
 建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。
 
-为此，您可以在 `.gitignore` 文件中添加以下指令：
+要进一步提升，您可以实现[可视化编辑器](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)将内容外部化。
 
 ```bash
-#  忽略 Intlayer 生成的文件
+# 忽略 Intlayer 生成的文件
 .intlayer
 ```
 
-### VS Code 扩展
+### Git 配置
 
-为了提升您使用 Intlayer 的开发体验，您可以安装官方的 **Intlayer VS Code 扩展**。
+为了改进 Intlayer 的开发体验，你可以安装官方的 **Intlayer VS Code Extension**。
 
-[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+有关如何使用该扩展的更多详细信息，请参阅 [Intlayer VS Code Extension 文档](https://intlayer.org/doc/vs-code-extension)。
 
-该扩展提供：
+Could you please provide:
 
-- 翻译键的 **自动补全**。
-- 缺失翻译的 **实时错误检测**。
-- 翻译内容的 **内联预览**。
-- 轻松创建和更新翻译的 **快速操作**。
+1. **The English (en) source content** (BLOCK 5 of 5) - the reference text
+2. **The current Chinese (zh) translation** - the content that needs to be audited
 
-有关如何使用该扩展的更多详细信息，请参阅 [Intlayer VS Code 扩展文档](https://intlayer.org/doc/vs-code-extension)。
+Once you provide these blocks, I'll perform a comprehensive audit and return the fully updated Chinese translation with:
 
----
+Please share the content blocks and I'll proceed with the audit.---
+
+### VS Code 扩展
+
+有关如何使用该扩展的更多详细信息，请参阅 [Intlayer VS Code 扩展文档](https://intlayer.org/doc/vs-code-extension)。

package/docs/zh/intlayer_with_vite+vanilla.md

@@ -65,32 +65,49 @@ author: aymericzip
 
 **Vite 全面覆盖**
 
+<Accordion header="Full Vite coverage">
+
 Intlayer 经过优化，可与 Vite 完美配合，提供**与框架无关的内容管理**、**TypeScript 支持**以及扩展国际化 (i18n) 所需的所有功能。
 
+</Accordion>
+
 **捆绑尺寸**
 
 不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
 
+</Accordion>
+
 **可维护性**
 
 确定应用程序内容的范围**有利于大型应用程序的维护**。您可以复制或删除单个功能文件夹，而无需承担检查整个内容代码库的精神负担。此外，Intlayer 具有**完全类型化 (fully typed)**，以确保您的内容的准确性。
 
 **人工智能代理**
 
+<Accordion header="AI Agent">
+
 共置内容**减少大型语言模型 (LLM) 所需的上下文**。 Intlayer 还附带了一套工具，例如用于测试缺失翻译的 **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** 和 **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/agent_skills.md)**，使 AI 代理的开发者体验 (DX) 更加流畅。
 
+</Accordion>
+
 **自动化**
 
 使用您选择的法学硕士，通过自动化在 CI/CD 管道中进行翻译，而费用由您的 AI 提供商承担。 Intlayer 还提供了一个**编译器**来自动提取内容，以及一个[网络平台](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)来帮助**在后台翻译**。
 
+</Accordion>
+
 **表现**
 
 将大量 JSON 文件连接到组件可能会导致性能和反应性问题。 Intlayer 可在构建时 (build time)优化您的内容加载。
 
 **无需开发即可扩展**
 
+<Accordion header="使用 none-dev 进行扩展">
+
 Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)**和一个**[完整的 CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** 来帮助您管理多语言内容**实时**，与译员、文案人员和其他团队成员无缝协作。内容可以本地和/或远程存储。
 
+</Accordion>
+</AccordionGroup>
+
 ---
 
 ## 在 Vite 和 Vanilla JS 应用中设置 Intlayer 的分步指南

package/docs/zh/intlayer_with_vite+vue.md

@@ -32,8 +32,6 @@ author: aymericzip
 
 # 使用Intlayer翻译您的Vite and Vue | 国际化(i18n)
 
-请参阅 GitHub 上的[应用模板](https://github.com/aymericzip/intlayer-vite-vue-template)。
-
 ## 目录
 
 <TOC/>
@@ -371,6 +369,13 @@ app.use(intlayer);
 app.mount("#app");
 ```
 
+> 你也可以根据偏好直接调用 `installIntlayer(app)` 作为一个函数：
+>
+> ```javascript
+> import { intlayer } from "vue-intlayer";
+> app.use(intlayer);
+> ```
+
 通过创建主 Vue 组件并使用 `useIntlayer` 组合函数，可以在整个应用中访问内容字典：
 
 ```vue fileName="src/HelloWord.vue"
@@ -424,6 +429,8 @@ const countRef = ref(0);
 </template>
 ```
 
+> 如果你的应用已经存在，你可以使用 [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/compiler.md) 以及 [extract 命令](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/extract.md)，在几秒钟内转换数千个组件。
+
 #### 在 Intlayer 中访问内容
 
 Intlayer 提供了多种 API 来访问您的内容：
@@ -442,8 +449,6 @@ Intlayer 提供了多种 API 来访问您的内容：
   - 使用 `const content = useIntlayer("myContent");` 并通过 `{{ content.myContent }}` / `<content.myContent />` 访问内容。
   - 或者使用 `const { myContent } = useIntlayer("myContent");` 并通过 `{{ myContent }}` / `<myContent/>` 解构访问内容。
 
-> 如果您的应用程序已经存在，您可以结合使用 [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) 在一秒钟内转换成干个组件。
-
 </Step>
 
 <Step number={6} title="更改内容语言">
@@ -629,8 +634,12 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
 </template>
 ```
 
+同时，你也可以使用 `intlayerProxy` 为你的应用程序添加服务器端路由。这个插件将根据 URL 自动检测当前语言环境并设置相应的语言环境 cookie。如果没有指定语言环境，该插件将根据用户的浏览器语言偏好确定最合适的语言环境。如果未检测到语言环境，它将重定向到默认语言环境。
+
 同时，你也可以使用 `intlayerProxy` 为你的应用添加服务器端路由。该插件会根据 URL 自动检测当前语言环境并设置相应的语言环境 cookie。如果未指定语言环境，插件将根据用户浏览器的语言偏好确定最合适的语言环境。如果仍未检测到语言环境，则会重定向到默认语言环境。
 
+> 自 Intlayer v9 起，`intlayerProxy()` 已直接打包到 `intlayer()` 插件中，并通过 `routing.enableProxy` 选项默认启用（默认为 `true`）。如下所示单独注册它现在是可选的 — 它被保留用于向后兼容性以及需要控制插件顺序的设置。设置 `routing.enableProxy: false` 可退出。查看 [v9 发布说明](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/releases/v9.md)。
+
 ```typescript {3,7} fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
@@ -1131,3 +1140,5 @@ Intlayer 使用模块扩展 (module augmentation) 来利用 TypeScript 的优势
 ### 深入了解
 
 要进一步使用，您可以实现[可视化编辑器](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)将内容外部化。
+
+Once you provide these blocks, I'll perform a complete audit and return the fully updated Chinese translation following all the guidelines you've specified.---

package/docs/zh/live-sync.md

@@ -42,6 +42,45 @@ author: aymericzip
 
 ## 启用实时同步
 
+通过更新你的 Intlayer 配置来启用 Live Sync：
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... 其他配置设置
+  editor: {
+    /**
+     * 检测到更改时启用区域配置的热重新加载。
+     * 例如，当添加或更新字典时，应用程序会更新
+     * 页面上显示的内容。
+     *
+     * 因为热重新加载需要与服务器的持续连接，它只
+     * 对 `enterprise` 计划的客户端可用。
+     *
+     * 默认值: false
+     */
+    liveSync: true,
+  },
+  dictionary: {
+    /**
+     * 控制字典的导入方式：
+     *
+     * - "fetch": 使用 Live Sync API 动态获取字典。
+     *   将 useIntlayer 替换为 useDictionaryDynamic。
+     *
+     * 注意: Live 模式使用 Live Sync API 来获取字典。如果 API 调用
+     * 失败，字典会动态导入。
+     * 注意: 只有具有远程内容和 "live" 标志的字典才会使用 live 模式。
+     * 其他字典为了性能考虑使用动态模式。
+     */
+    importMode: "fetch",
+  },
+};
+
+export default config;
+```
+
 > 实时同步需要持续的服务器连接，并且仅在企业版计划中可用。
 
 通过更新您的 Intlayer 配置来启用实时同步：
@@ -169,8 +208,6 @@ export default config;
 - 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)