@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/zh/intlayer_with_adonisjs.md

@@ -257,9 +257,11 @@ import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   // ... 其他配置选项
-  middleware: {
-    headerName: "my-locale-header",
-    cookieName: "my-locale-cookie",
+  routing: {
+    storage: [
+      { type: "header", name: "my-locale-header" },
+      { type: "cookie", name: "my-locale-cookie" },
+    ],
   },
 };
 

package/docs/zh/intlayer_with_analog.md

@@ -61,34 +61,51 @@ author: aymericzip
 
 与“ngx-translate”或“angular-l10n”等主要解决方案相比，Intlayer 是一个具有集成优化的解决方案，例如：
 
+<AccordionGroup>
+
 **完整的模拟覆盖**
 
 Intlayer 经过优化，可与 Analog 完美配合，提供**多语言路由**、**SSR 支持**以及扩展国际化 (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>
+
 ---
 
 ## 在 Analog 应用中设置 Intlayer 的分步指南
@@ -388,6 +405,8 @@ 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

@@ -39,34 +39,51 @@ author: aymericzip
 
 与“ngx-translate”或“angular-l10n”等主要解决方案相比，Intlayer 是一个具有集成优化的解决方案，例如：
 
+<AccordionGroup>
+
 **完整的角度覆盖**
 
 Intlayer 经过优化，可与 Angular 完美配合，提供**组件级内容范围**、**延迟加载翻译**以及​​扩展国际化 (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>
+
 ---
 
 ## 在 Angular 应用中设置 Intlayer 的分步指南

package/docs/zh/intlayer_with_angular_21.md

@@ -41,34 +41,51 @@ author: aymericzip
 
 与“ngx-translate”或“angular-l10n”等主要解决方案相比，Intlayer 是一个具有集成优化的解决方案，例如：
 
+<AccordionGroup>
+
 **完整的角度覆盖**
 
 Intlayer 经过优化，可与 Angular 完美配合，提供**组件级内容范围**、**延迟加载翻译**以及​​扩展国际化 (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>
+
 ---
 
 ## 在Angular应用程序中设置Intlayer的分步指南

package/docs/zh/intlayer_with_astro.md

@@ -107,8 +107,6 @@ Intlayer 经过优化，可与 Astro 完美配合，提供**多语言路由**、
 
 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>
 
 ---
@@ -553,11 +551,29 @@ export default defineConfig({
     intlayerCompiler(), // Adds the compiler plugin
   ],
 });
+```
+
+```bash packageManager="npm"
+npm run build # 或 npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # 或 pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # 或 yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # 或 bun run dev
 ```
 
  </Tab>
 </Tabs>
 
+---
+
 </Step>
 
 </Steps>

package/docs/zh/intlayer_with_astro_lit.md

@@ -66,12 +66,18 @@ author: aymericzip
 
 **完整的 Astro 报道**
 
+<Accordion header="完整的 Astro 覆盖">
+
 Intlayer 经过优化，可与 Astro 完美配合，提供**多语言路由**、**站点地图**以及扩展国际化 (i18n) 所需的所有功能。
 
+</Accordion>
+
 **捆绑尺寸**
 
 不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
 
+</Accordion>
+
 <AccordionGroup>
 <Accordion header="可维护性">
 
@@ -327,6 +333,14 @@ const { greeting } = getIntlayer("lit-demo", locale);
 </script>
 ```
 
+如果你想在 `string` 属性中使用你的内容，例如 `alt`、`title`、`href`、`aria-label` 等，你可以使用函数的值，如下：
+
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
 > **关于路由设置的说明：**
 > 您使用的目录结构取决于 `intlayer.config.ts` 中的 `middleware.routing` 设置：
 >
@@ -604,6 +618,22 @@ export default defineConfig({
     intlayerCompiler(), // Adds the compiler plugin
   ],
 });
+```
+
+```bash packageManager="npm"
+npm run build # 或 npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # 或 pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # 或 yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # 或 bun run dev
 ```
 
  </Tab>
@@ -650,14 +680,6 @@ Intlayer 使用模块扩展来利用 TypeScript，使您的代码库更加健壮
 .intlayer
 ```
 
-> 如果您想在 `字符串` 属性（如 `alt`、`title`、`href`、`aria-label` 等）中使用内容，可以使用函数的值，例如：
-
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
-> ```
-
 ### VS Code 扩展
 
 为了改善使用 Intlayer 的开发体验，您可以安装**官方 Intlayer VS Code 扩展**。

package/docs/zh/intlayer_with_astro_preact.md

@@ -65,12 +65,18 @@ author: aymericzip
 
 **完整的 Astro 报道**
 
+<Accordion header="完整的 Astro 支持">
+
 Intlayer 经过优化，可与 Astro 完美配合，提供**多语言路由**、**站点地图**以及扩展国际化 (i18n) 所需的所有功能。
 
+</Accordion>
+
 **捆绑尺寸**
 
 不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
 
+</Accordion>
+
 <AccordionGroup>
 <Accordion header="可维护性">
 
@@ -322,6 +328,14 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> 如果你想在 `string` 属性中使用你的内容，例如 `alt`、`title`、`href`、`aria-label` 等，你可以使用函数的值，如下所示：
+
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
 > **关于路由设置的说明：**
 > 您使用的目录结构取决于 `intlayer.config.ts` 中的 `middleware.routing` 设置：
 >
@@ -559,6 +573,22 @@ export default defineConfig({
     intlayerCompiler(), // Adds the compiler plugin
   ],
 });
+```
+
+```bash packageManager="npm"
+npm run build # 或 npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # 或 pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # 或 yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # 或 bun run dev
 ```
 
  </Tab>
@@ -572,6 +602,12 @@ export default defineConfig({
 
 ### TypeScript 配置
 
+Intlayer 使用模块扩展来获得 TypeScript 的优势并使您的 codebase 更强大。
+
+![自动补全](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![翻译错误](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
 Intlayer 使用模块扩展来利用 TypeScript，使您的代码库更加健壮。确保您的 TypeScript 配置已包含自动生成的类型并针对 Preact 进行了配置：
 
 ```json5 fileName="tsconfig.json"
@@ -599,14 +635,6 @@ Intlayer 使用模块扩展来利用 TypeScript，使您的代码库更加健壮
 .intlayer
 ```
 
-> 如果您想在 `字符串` 属性（如 `alt`、`title`、`href`、`aria-label` 等）中使用内容，可以使用函数的值，例如：
-
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
-> ```
-
 ### VS Code 扩展
 
 为了改善使用 Intlayer 的开发体验，您可以安装**官方 Intlayer VS Code 扩展**。

package/docs/zh/intlayer_with_astro_react.md

@@ -68,12 +68,18 @@ author: aymericzip
 
 **完整的 Astro 报道**
 
+<Accordion header="Full Astro coverage">
+
 Intlayer 经过优化，可与 Astro 完美配合，提供**多语言路由**、**站点地图**以及扩展国际化 (i18n) 所需的所有功能。
 
+</Accordion>
+
 **捆绑尺寸**
 
 不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
 
+</Accordion>
+
 <AccordionGroup>
 <Accordion header="可维护性">
 
@@ -322,6 +328,14 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> 如果你想在 `string` 属性中使用你的内容，比如 `alt`、`title`、`href`、`aria-label` 等，你可以像这样使用函数的值：
+
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
 > **关于路由设置的说明：**
 > 您使用的目录结构取决于 `intlayer.config.ts` 中的 `middleware.routing` 设置：
 >
@@ -555,6 +569,22 @@ export default defineConfig({
     intlayerCompiler(), // Adds the compiler plugin
   ],
 });
+```
+
+```bash packageManager="npm"
+npm run build # 或 npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # 或 pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # 或 yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # 或 bun run dev
 ```
 
  </Tab>
@@ -597,14 +627,6 @@ Intlayer 使用模块扩展来利用 TypeScript，使您的代码库更加健壮
 .intlayer
 ```
 
-> 如果您想在 `字符串` 属性（如 `alt`、`title`、`href`、`aria-label` 等）中使用内容，可以使用函数的值，例如：
-
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
-> ```
-
 ### VS Code 扩展
 
 为了改善使用 Intlayer 的开发体验，您可以安装**官方 Intlayer VS Code 扩展**。

package/docs/zh/intlayer_with_astro_solid.md

@@ -65,12 +65,18 @@ author: aymericzip
 
 **完整的 Astro 报道**
 
+<Accordion header="Full Astro coverage">
+
 Intlayer 经过优化，可与 Astro 完美配合，提供**多语言路由**、**站点地图**以及扩展国际化 (i18n) 所需的所有功能。
 
+</Accordion>
+
 **捆绑尺寸**
 
 不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
 
+</Accordion>
+
 <AccordionGroup>
 <Accordion header="可维护性">
 
@@ -318,6 +324,14 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> 如果你想在 `string` 属性中使用你的内容，比如 `alt`、`title`、`href`、`aria-label` 等，你可以使用函数的返回值，像这样：
+
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
 > **关于路由设置的说明：**
 > 您使用的目录结构取决于 `intlayer.config.ts` 中的 `middleware.routing` 设置：
 >
@@ -555,6 +569,22 @@ export default defineConfig({
     intlayerCompiler(), // Adds the compiler plugin
   ],
 });
+```
+
+```bash packageManager="npm"
+npm run build # 或 npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # 或 pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # 或 yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # 或 bun run dev
 ```
 
  </Tab>
@@ -597,14 +627,6 @@ Intlayer 使用模块扩展来利用 TypeScript，使您的代码库更加健壮
 .intlayer
 ```
 
-> 如果您想在 `字符串` 属性（如 `alt`、`title`、`href`、`aria-label` 等）中使用内容，可以使用函数的值，例如：
-
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
-> ```
-
 ### VS Code 扩展
 
 为了改善使用 Intlayer 的开发体验，您可以安装**官方 Intlayer VS Code 扩展**。

package/docs/zh/intlayer_with_astro_svelte.md

@@ -65,12 +65,18 @@ author: aymericzip
 
 **完整的 Astro 报道**
 
+<Accordion header="Full Astro 覆盖">
+
 Intlayer 经过优化，可与 Astro 完美配合，提供**多语言路由**、**站点地图**以及扩展国际化 (i18n) 所需的所有功能。
 
+</Accordion>
+
 **捆绑尺寸**
 
 不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
 
+</Accordion>
+
 <AccordionGroup>
 <Accordion header="可维护性">
 
@@ -318,6 +324,14 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> 如果您想在 `string` 属性中使用您的内容，例如 `alt`、`title`、`href`、`aria-label` 等，您可以使用函数的返回值，如下所示：
+
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
 > **关于路由设置的说明：**
 > 您使用的目录结构取决于 `intlayer.config.ts` 中的 `middleware.routing` 设置：
 >
@@ -559,6 +573,22 @@ export default defineConfig({
     intlayerCompiler(), // Adds the compiler plugin
   ],
 });
+```
+
+```bash packageManager="npm"
+npm run build # 或 npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # 或 pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # 或 yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # 或 bun run dev
 ```
 
  </Tab>
@@ -601,14 +631,6 @@ Intlayer 使用模块扩展来利用 TypeScript，使您的代码库更加健壮
 .intlayer
 ```
 
-> 如果您想在 `字符串` 属性（如 `alt`、`title`、`href`、`aria-label` 等）中使用内容，可以使用函数的值，例如：
-
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
-> ```
-
 ### VS Code 扩展
 
 为了改善使用 Intlayer 的开发体验，您可以安装**官方 Intlayer VS Code 扩展**。

package/docs/zh/intlayer_with_astro_vanilla.md

@@ -65,12 +65,18 @@ author: aymericzip
 
 **完整的 Astro 报道**
 
+<Accordion header="Full Astro 覆盖">
+
 Intlayer 经过优化，可与 Astro 完美配合，提供**多语言路由**、**站点地图**以及扩展国际化 (i18n) 所需的所有功能。
 
+</Accordion>
+
 **捆绑尺寸**
 
 不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
 
+</Accordion>
+
 <AccordionGroup>
 <Accordion header="可维护性">
 
@@ -342,6 +348,14 @@ const { greeting, description, switchLocale } = getIntlayer("app", locale);
 </html>
 ```
 
+> 如果你想在 `string` 属性中使用你的内容，例如 `alt`、`title`、`href`、`aria-label` 等，你可以像这样使用该函数的值：
+
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
 > **关于路由设置的说明：**
 > 您使用的目录结构取决于 `intlayer.config.ts` 中的 `middleware.routing` 设置：
 >
@@ -533,6 +547,22 @@ export default defineConfig({
     intlayerCompiler(), // Adds the compiler plugin
   ],
 });
+```
+
+```bash packageManager="npm"
+npm run build # 或 npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # 或 pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # 或 yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # 或 bun run dev
 ```
 
  </Tab>
@@ -575,14 +605,6 @@ Intlayer 使用模块扩展来利用 TypeScript，使您的代码库更加健壮
 .intlayer
 ```
 
-> 如果您想在 `字符串` 属性（如 `alt`、`title`、`href`、`aria-label` 等）中使用内容，可以使用函数的值，例如：
-
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
-> ```
-
 ### VS Code 扩展
 
 为了改善使用 Intlayer 的开发体验，您可以安装**官方 Intlayer VS Code 扩展**。