@intlayer/docs 9.5.6 → 9.5.8

package/docs/zh/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: 了解如何使用 Intlayer 在您的多语言网站中声明和使用 Markdown 内容。按照本在线文档中的步骤将 Markdown 无缝集成到您的项目中。
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -487,6 +489,111 @@ Markdown 渲染支持 **MDX** — 在您的 Markdown 中直接按名称使用任
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    在 Remix 3 中，Markdown 节点在服务器端渲染为 HTML 字符串。使用 Remix JSX 的 `innerHTML` 属性注入它，或在 `html-template` 视图中使用 `html.raw`。
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div innerHTML={myMarkdownContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return html.raw`<div>${myMarkdownContent.value}</div>`;
+    };
+    ```
+
+    > Remix 默认会转义插值。`innerHTML` 和 `html.raw` 是两个例外选项，这正是渲染后的 Markdown 字符串所需要的。
+
+    你还可以使用 `.use()` 方法为特定标签提供本地覆盖。覆盖是返回 HTML 字符串的函数：
+
+    ```tsx
+    <div
+      innerHTML={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` 是渲染后的 HTML 字符串，而 `String()` / `.toString()` 返回原始 Markdown 源码：
+
+    ```tsx
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    你还可以像这样访问 Markdown 元数据：
+
+    ```tsx
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    在 Astro 中，Markdown 节点渲染为 HTML 字符串。使用模板中的 `set:html` 指令注入它，或在客户端 `<script>` 中使用 `innerHTML`。
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myMarkdownContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myMarkdownContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myMarkdownContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myMarkdownContent.value;
+    </script>
+    ```
+
+    > Astro 默认会转义 `{表达式}`。`set:html` 是例外选项，这正是渲染后的 Markdown 字符串所需要的。
+
+    你还可以使用 `.use()` 方法为特定标签提供本地覆盖。覆盖是返回 HTML 字符串的函数：
+
+    ```astro
+    <div
+      set:html={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` 是渲染后的 HTML 字符串，而 `String()` / `.toString()` 返回原始 Markdown 源码：
+
+    ```astro
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    你还可以像这样访问 Markdown 元数据：
+
+    ```astro
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
 </Tabs>
 
 ### 2. 辅助实用程序（仅限 Markdown 字符串）
@@ -698,6 +805,60 @@ Markdown 渲染支持 **MDX** — 在您的 Markdown 中直接按名称使用任
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### `useMarkdownRenderer()` Hook
+
+    获取由 `installIntlayerMarkdown()` 预配置的渲染器函数。它返回一个 HTML 字符串。
+
+    ```tsx
+    import { useMarkdownRenderer } from "remix-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+
+    return <div innerHTML={renderMarkdown("# My Title")} />;
+    ```
+
+    #### `renderMarkdown()` 实用工具
+
+    忽略全局配置的独立实用工具。
+
+    ```tsx
+    import { renderMarkdown } from "remix-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### `useMarkdownRenderer()` Hook
+
+    获取由 `installIntlayerMarkdown()` 预配置的渲染器函数。它返回一个 HTML 字符串。
+
+    ```astro
+    ---
+    import { useMarkdownRenderer } from "astro-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+    ---
+
+    <div set:html={renderMarkdown("# My Title")} />
+    ```
+
+    #### `renderMarkdown()` 实用工具
+
+    忽略全局配置的独立实用工具。
+
+    ```astro
+    ---
+    import { renderMarkdown } from "astro-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## 使用 `MarkdownProvider` 进行全局配置
@@ -998,6 +1159,72 @@ Markdown 渲染支持 **MDX** — 在您的 Markdown 中直接按名称使用任
     > 动态导入您的 Markdown 渲染器是减少应用程序Bundle 大小的好方法。
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix 没有组件树来承载 provider，因此配置在服务器启动时作为单例安装一次。它配置由 `useMarkdownRenderer()` 返回的渲染器。由 `useIntlayer` 返回的 `md` 节点使用默认编译器渲染；通过 `.use()` 为每个节点覆盖其标签。
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+    ```
+
+    你也可以使用自己的 markdown 渲染器：
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > 使用 `installIntlayerMarkdownDynamic(async () => …)` 延迟加载渲染器本身；加载器仅在第一次调用时运行。
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro 没有组件树来承载 provider，因此配置在中间件（服务器）和客户端 `<script>`（浏览器）中作为单例安装一次。它配置由 `useMarkdownRenderer()` 返回的渲染器。由 `useIntlayer` 返回的 `md` 节点使用默认编译器渲染；通过 `.use()` 为每个节点覆盖其标签。
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+    import { defineMiddleware } from "astro:middleware";
+
+    // 服务器启动时运行一次；Intlayer 中间件本身由集成在此文件之前注册。
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    你也可以使用自己的 markdown 渲染器：
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > 使用 `installIntlayerMarkdownDynamic(async () => …)` 延迟加载渲染器本身；加载器仅在第一次调用时运行。
+
+  </Tab>
 </Tabs>
 
 ## Suspense (悬念)
@@ -1326,6 +1553,40 @@ Intlayer 允许您在服务端将 Markdown 预解析为抽象语法树 (AST)，
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix 3 在服务器端渲染并流式传输 HTML，因此无需将 AST 传递给客户端。解析一次，并在构建页面的任何位置渲染 AST：
+
+    ```tsx fileName="src/views/article.tsx"
+    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";
+
+    // 1. 将 Markdown 解析为可序列化的 AST（例如在模块加载时解析一次）
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+
+    export const ArticlePage = () => () => (
+      // 2. 渲染 AST：渲染器接受原始字符串或解析后的 AST
+      <article innerHTML={renderMarkdown(ast)} />
+    );
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro 页面在服务器端渲染，因此无需将 AST 传递给客户端。在 frontmatter 中解析 Markdown 并使用 `set:html` 渲染：
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. 将 Markdown 解析为可序列化的 AST
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. 渲染 AST：渲染器接受原始字符串或解析后的 AST -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 这种模式确保 Markdown 解析逻辑完全在服务端执行，从而显著减少客户端执行时间，并提高初始注水速度。

package/docs/zh/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Analog i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Analog 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -157,6 +157,28 @@ bun add intlayer angular-intlayer vite-intlayer
 </Step>
 <Step number={2} title="配置你的项目">
 
+### 架构
+
+在此架构中，`angular-intlayer` 提供 `provideIntlayer()`，并在 `src/app/app.config.ts` 中注册，以便每个组件和基于文件的页面都能通过 `useIntlayer` signal 读取其内容。Analog 基于 Vite 构建，因此 `vite-intlayer` 的 `intlayer()` 插件与 `analog()` 一起添加到 `vite.config.ts` 中，以监视并重新构建你的内容声明并运行语言环境代理。内容声明文件与组件和页面一起放置在 `src/app/` 中。
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── pages
+│   │   │   └── index.page.ts         # File-based route using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts                    # analog() and intlayer() Vite plugins
+```
+
+### 配置
+
 创建一个配置文件来配置应用的语言：
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/zh/intlayer_with_angular_19.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Angular 19 i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Angular 19 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -164,6 +164,29 @@ bun add @angular-builders/custom-webpack --dev
 </Step>
 <Step number={2} title="配置你的项目">
 
+### 架构
+
+在此架构中，`angular-intlayer` 提供 `provideIntlayer()`，并在 `src/app/app.config.ts` 中注册，以便每个组件都能通过 `useIntlayer` signal 读取其内容。Angular CLI 切换为自定义 Webpack 构建器，`webpack.config.ts` 将 Intlayer 插件合并到构建中，以监视并重新构建你的内容声明。内容声明文件与组件一起放置在 `src/app/` 中。
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom Webpack builder for build and serve
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── webpack.config.ts                 # mergeConfig() from angular-intlayer/webpack
+```
+
+### 配置
+
 创建一个配置文件来配置应用的语言：
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/zh/intlayer_with_angular_21.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Angular 22 i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Angular 22 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -166,6 +166,29 @@ bun add @angular-builders/custom-esbuild --dev
 </Step>
 <Step number={2} title="配置您的项目">
 
+### 架构
+
+在此架构中，`angular-intlayer` 提供 `provideIntlayer()`，并在 `src/app/app.config.ts` 中注册，以便每个组件都能通过 `useIntlayer` signal 读取其内容。Angular CLI 切换为自定义 esbuild 构建器，`esbuild.plugins.ts` 将 Intlayer 插件注册到构建中，以监视并重新构建你的内容声明。内容声明文件与组件一起放置在 `src/app/` 中。
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom esbuild builder for build and serve
+├── esbuild.plugins.ts                # intlayerEsbuildPlugin() from angular-intlayer/esbuild
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 配置
+
 创建一个配置文件以配置您应用程序的语言：
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/zh/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Astro 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -160,6 +160,29 @@ bun add intlayer astro-intlayer
 </Step>
 <Step number={2} title="配置您的项目">
 
+### 架构
+
+在此架构中，注册在 `astro.config.ts` 中的 `intlayer()` 集成会构建你的字典，并添加一个中间件来解析每个请求的语言环境，并将其暴露在 `Astro.locals.intlayer` 上。页面位于 `src/pages/[...locale]/` rest 参数段下，因此默认语言环境不带前缀提供服务，而其他每个语言环境都拥有其专用的 URL。`.astro` 文件使用 `astro-intlayer` 的 `useIntlayer` / `useLocale` 钩子读取内容，内容声明文件与你的组件一起放置在 `src/` 中。
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── LocaleSwitcher.astro      # Locale switcher component
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page (rest param also serves the default locale)
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() integration
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 配置
+
 创建一个配置文件来定义您的应用程序语言：
 
 ```typescript fileName="intlayer.config.ts"

package/docs/zh/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Lit i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Astro + Lit 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -168,6 +168,30 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
 </Step>
 <Step number={2} title="配置您的项目">
 
+### 架构
+
+在此架构中，注册在 `astro.config.ts` 中的 `intlayer()` 集成会构建你的字典，并添加一个中间件来解析每个请求的语言环境，并将其暴露在 `Astro.locals.intlayer` 上。页面位于 `src/pages/[...locale]/` rest 参数段下，因此默认语言环境不带前缀提供服务，而其他每个语言环境都拥有其专用的 URL。`.astro` 文件使用 `astro-intlayer` 的 `useIntlayer` / `useLocale` 钩子进行服务端渲染，Lit 孤岛 (`src/components/lit/LitDemo.ts`) 接收服务端检测到的语言环境作为 prop，并将其传递给 `lit-intlayer` 用于交互部分。内容声明文件与你的组件一起放置在 `src/` 中。
+
+```bash
+.
+├── src
+│   ├── components
+│   │   └── lit
+│   │       ├── app.content.ts        # App content declaration
+│   │       └── LitDemo.ts            # Lit custom element (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the custom element
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and lit() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 配置
+
 创建一个配置文件来定义您的应用程序语言：
 
 ```typescript fileName="intlayer.config.ts"

package/docs/zh/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Preact i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Astro + Preact 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -167,6 +167,31 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
 </Step>
 <Step number={2} title="配置您的项目">
 
+### 架构
+
+在此架构中，注册在 `astro.config.ts` 中的 `intlayer()` 集成会构建你的字典，并添加一个中间件来解析每个请求的语言环境，并将其暴露在 `Astro.locals.intlayer` 上。页面位于 `src/pages/[...locale]/` rest 参数段下，因此默认语言环境不带前缀提供服务，而其他每个语言环境都拥有其专用的 URL。`.astro` 文件使用 `astro-intlayer` 的 `useIntlayer` / `useLocale` 钩子进行服务端渲染，Preact 孤岛 (`src/components/preact/PreactIsland.tsx`) 接收服务端检测到的语言环境作为 prop，并将其传递给 `preact-intlayer` 用于交互部分。内容声明文件与你的组件一起放置在 `src/` 中。
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── preact
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── PreactIsland.tsx      # Preact island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and preact() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 配置
+
 创建一个配置文件来定义您的应用程序语言：
 
 ```typescript fileName="intlayer.config.ts"

package/docs/zh/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + React i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Astro + React 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -170,6 +170,31 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
 </Step>
 <Step number={2} title="配置您的项目">
 
+### 架构
+
+在此架构中，注册在 `astro.config.ts` 中的 `intlayer()` 集成会构建你的字典，并添加一个中间件来解析每个请求的语言环境，并将其暴露在 `Astro.locals.intlayer` 上。页面位于 `src/pages/[...locale]/` rest 参数段下，因此默认语言环境不带前缀提供服务，而其他每个语言环境都拥有其专用的 URL。`.astro` 文件使用 `astro-intlayer` 的 `useIntlayer` / `useLocale` 钩子进行服务端渲染，React 孤岛 (`src/components/react/ReactIsland.tsx`) 接收服务端检测到的语言环境作为 prop，并将其传递给 `react-intlayer` 用于交互部分。内容声明文件与你的组件一起放置在 `src/` 中。
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── react
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── ReactIsland.tsx       # React island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and react() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 配置
+
 创建一个配置文件来定义您的应用程序语言：
 
 ```typescript fileName="intlayer.config.ts"

package/docs/zh/intlayer_with_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Solid i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Astro + Solid 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -167,6 +167,31 @@ bun add intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
 </Step>
 <Step number={2} title="配置您的项目">
 
+### 架构
+
+在此架构中，注册在 `astro.config.ts` 中的 `intlayer()` 集成会构建你的字典，并添加一个中间件来解析每个请求的语言环境，并将其暴露在 `Astro.locals.intlayer` 上。页面位于 `src/pages/[...locale]/` rest 参数段下，因此默认语言环境不带前缀提供服务，而其他每个语言环境都拥有其专用的 URL。`.astro` 文件使用 `astro-intlayer` 的 `useIntlayer` / `useLocale` 钩子进行服务端渲染，Solid 孤岛 (`src/components/solid/SolidIsland.tsx`) 接收服务端检测到的语言环境作为 prop，并将其传递给 `solid-intlayer` 用于交互部分。内容声明文件与你的组件一起放置在 `src/` 中。
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── solid
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── SolidIsland.tsx       # Solid island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and solid() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 配置
+
 创建一个配置文件来定义您的应用程序语言：
 
 ```typescript fileName="intlayer.config.ts"

package/docs/zh/intlayer_with_astro_svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Svelte i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Astro + Svelte 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -167,6 +167,30 @@ bun add intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
 </Step>
 <Step number={2} title="配置您的项目">
 
+### 架构
+
+在此架构中，注册在 `astro.config.ts` 中的 `intlayer()` 集成会构建你的字典，并添加一个中间件来解析每个请求的语言环境，并将其暴露在 `Astro.locals.intlayer` 上。页面位于 `src/pages/[...locale]/` rest 参数段下，因此默认语言环境不带前缀提供服务，而其他每个语言环境都拥有其专用的 URL。`.astro` 文件使用 `astro-intlayer` 的 `useIntlayer` / `useLocale` 钩子进行服务端渲染，Svelte 孤岛 (`src/components/svelte/SvelteIsland.svelte`) 接收服务端检测到的语言环境作为 prop，并将其传递给 `svelte-intlayer` 用于交互部分。内容声明文件与你的组件一起放置在 `src/` 中。
+
+```bash
+.
+├── src
+│   ├── app.content.ts                # App content declaration
+│   ├── components
+│   │   └── svelte
+│   │       └── SvelteIsland.svelte   # Svelte island (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and svelte() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 配置
+
 创建一个配置文件来定义您的应用程序语言：
 
 ```typescript fileName="intlayer.config.ts"