@intlayer/docs 9.5.6 → 9.5.7

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"

package/docs/zh/intlayer_with_astro_vue.md

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

package/docs/zh/intlayer_with_remix_3.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-09
-updatedAt: 2026-09-19
+updatedAt: 2026-09-21
 title: "Remix 3 i18n - 完整的应用多语言国际化翻译指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Remix 3 应用的权威指南。借助 AI 智能体完成翻译，并优化打包体积、SEO 和性能。"
 keywords:
@@ -138,6 +138,27 @@ bun add intlayer remix-intlayer remix@next
 </Step>
 <Step number={2} title="配置 Intlayer">
 
+### 架构
+
+在此架构中，`remix-intlayer` 的 `intlayer()` 中间件在 `render()` 中间件之前注册到 `createRouter()` 中。它会在路由匹配前去除语言环境前缀，因此路由只需在 `src/routes.ts` 中声明一次，无需 `:locale` 段，并且它会在 `AsyncLocalStorage` 作用域内运行请求的其余部分，从而让 `useIntlayer` / `useLocale` 能够在路由处理函数和 `remix/ui` 视图中无需参数读取语言环境。内容声明文件与你的视图一起放置在 `src/` 中：
+
+```bash
+.
+├── src
+│   ├── home.content.ts               # Home page content declaration
+│   ├── router.tsx                    # createRouter() with the intlayer() and render() middleware
+│   ├── routes.ts                     # Type-safe routes, declared once without locale segment
+│   ├── server.ts                     # fetch handler (Node.js, Bun, Deno, Cloudflare Workers)
+│   └── views
+│       ├── document.tsx              # HTML shell setting <html lang dir> from the locale
+│       └── home.tsx                  # Localized page using useIntlayer / useLocale
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 配置
+
 在项目根目录下创建 `intlayer.config.ts`，声明支持的语言及国际化设置：
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}