@intlayer/docs 8.11.3 → 8.12.0-canary.0

package/docs/zh/intlayer_with_react_router_v7.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-04
 updatedAt: 2026-05-31
-title: React Router v7 i18n - 完整翻译指南： React Router
-description: 最佳的包体积、SEO、性能和可维护性解决方案。让您的 React Router v7 应用在 2026 年实现多语言化，LLM 翻译，Agent Skills & MCP。
+title: "React Router v7 i18n - 翻译你的应用的完整指南"
+description: "告别 i18next。2026 年构建多语言 (i18n) React Router v7 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
   - 国际化
   - 文档

package/docs/zh/intlayer_with_react_router_v7_fs_routes.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-04
 updatedAt: 2026-05-31
-title: React Router v7 i18n - 完整翻译指南： Complete
-description: 最佳的包体积、SEO、性能和可维护性解决方案。让您的 React Router v7 应用在 2026 年实现多语言化，LLM 翻译，Agent Skills & MCP。
+title: "React Router v7 i18n - 翻译你的应用的完整指南"
+description: "告别 i18next。2026 年构建多语言 (i18n) React Router v7 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
   - 国际化
   - 文档

package/docs/zh/intlayer_with_storybook.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-20
 updatedAt: 2026-05-31
-title: 如何在 Storybook 中设置 Intlayer
-description: 学习如何使用 Intlayer 和 Storybook 使您的设计系统多语言化 - 编译内容声明、添加语言切换器，并以任何语言预览您的组件。
+title: "Storybook i18n - 翻译你的应用的完整指南"
+description: "告别 i18next。2026 年构建多语言 (i18n) Storybook 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
   - 国际化
   - 文档

package/docs/zh/intlayer_with_svelte_kit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-20
 updatedAt: 2026-05-31
-title: SvelteKit i18n - 完整翻译指南： SvelteKit
-description: 最佳的包体积、SEO、性能和可维护性解决方案。让您的 SvelteKit 网站在 2026 年实现多语言化，LLM 翻译，Agent Skills & MCP。
+title: "SvelteKit i18n - 翻译你的应用的完整指南"
+description: "告别 i18next。2026 年构建多语言 (i18n) SvelteKit 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
   - 国际化
   - 文档
@@ -446,218 +446,6 @@ export default heroContent;
         └── +layout.svelte         # 字体和全局样式的根布局
 ```
 
-### 第7步：处理服务器端的语言环境检测（Hooks）
-
-在 SvelteKit 中，服务器需要知道用户的语言环境，以便在 SSR 期间渲染正确的内容。我们使用 `hooks.server.ts` 从 URL 或 cookie 中检测语言环境。
-
-创建或修改 `src/hooks.server.ts`：
-
-```typescript fileName="src/hooks.server.ts"
-import type { Handle } from "@sveltejs/kit";
-import { getLocalizedUrl } from "intlayer";
-import { getLocale } from "$lib/getLocale";
-
-export const handle: Handle = async ({ event, resolve }) => {
-  const detectedLocale = getLocale(event);
-
-  // 检查当前路径是否已以某个语言环境开头（例如 /fr, /en）
-  const pathname = event.url.pathname;
-  const targetPathname = getLocalizedUrl(pathname, detectedLocale);
-
-  // 如果 URL 中没有语言环境（例如用户访问 "/"），则重定向
-  if (targetPathname !== pathname) {
-    return new Response(undefined, {
-      headers: { Location: targetPathname },
-      status: 307, // 临时重定向
-    });
-  }
-
-  return resolve(event, {
-    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),
-  });
-};
-```
-
-然后，创建一个辅助函数从请求事件中获取用户的语言环境：
-
-```typescript fileName="src/lib/getLocale.ts"
-import {
-  configuration,
-  getLocaleFromStorage,
-  localeDetector,
-  type Locale,
-} from "intlayer";
-import type { RequestEvent } from "@sveltejs/kit";
-
-/**
- * 从请求事件中获取用户的语言环境。
- * 此函数用于 `src/hooks.server.ts` 中的 `handle` 钩子。
- *
- * 它首先尝试从 Intlayer 存储（cookies 或自定义头）中获取语言环境。
- * 如果未找到语言环境，则回退到浏览器的 "Accept-Language" 协商。
- *
- * @param event - 来自 SvelteKit 的请求事件
- * @returns 用户的语言环境
- */
-export const getLocale = (event: RequestEvent): Locale => {
-  const defaultLocale = configuration?.internationalization?.defaultLocale;
-
-  // 尝试从 Intlayer 存储（Cookies 或头）中获取语言环境
-  const storedLocale = getLocaleFromStorage({
-    // SvelteKit cookies 访问
-    getCookie: (name: string) => event.cookies.get(name) ?? null,
-    // SvelteKit headers 访问
-    getHeader: (name: string) => event.request.headers.get(name) ?? null,
-  });
-
-  if (storedLocale) {
-    return storedLocale;
-  }
-
-  // 回退到浏览器的 "Accept-Language" 协商
-  const negotiatorHeaders: Record<string, string> = {};
-
-  // 将 SvelteKit Headers 对象转换为普通的 Record<string, string>
-  event.request.headers.forEach((value, key) => {
-    negotiatorHeaders[key] = value;
-  });
-
-  // 从 `Accept-Language` 头检查语言环境
-  const userFallbackLocale = localeDetector(negotiatorHeaders);
-
-  if (userFallbackLocale) {
-    return userFallbackLocale;
-  }
-
-  // 如果没有匹配，返回默认语言环境
-  return defaultLocale;
-};
-```
-
-> `getLocaleFromStorage` 将根据您的配置从请求头或 cookie 中检查语言环境。更多详情请参见 [Configuration](https://intlayer.org/doc/configuration)。
-
-> `localeDetector` 函数会处理 `Accept-Language` 请求头并返回最佳匹配的语言环境。
-
-如果未配置语言环境，我们希望返回 404 错误。为简化操作，我们可以创建一个 `match` 函数来检查语言环境是否有效：
-
-```ts fileName="/src/params/locale.ts"import { defaultLocale, locales, type Locale } from "intlayer";
-export const match = (param: Locale = defaultLocale): boolean =>
-  locales.includes(param);
-```
-
-> **注意：** 请确保您的 `src/app.d.ts` 中包含语言环境的定义：
->
-> ```typescript
-> declare global {
->   namespace App {
->     interface Locals {
->       locale: import("intlayer").Locale;
->     }
->   }
-> }
-> ```
-
-对于 `+layout.svelte` 文件，我们可以删除所有内容，只保留与国际化无关的静态内容：
-
-```svelte fileName="src/+layout.svelte"
-<script lang="ts">
-	 import './layout.css';
-
-    let { children } = $props();
-</script>
-
-<div class="app">
-	{@render children()}
-</div>
-
-<style>
-	.app {
-    /*  */
-	}
-</style>
-```
-
-然后，在 `[[locale=locale]]` 组下创建一个新的页面和布局：
-
-```ts fileName="src/routes/[[locale=locale]]/+layout.ts"
-import type { Load } from "@sveltejs/kit";
-import { defaultLocale, type Locale } from "intlayer";
-
-export const prerender = true;
-
-// 使用通用的 Load 类型
-export const load: Load = ({ params }) => {
-  const locale: Locale = (params.locale as Locale) ?? defaultLocale;
-
-  return {
-    locale,
-  };
-};
-```
-
-```svelte fileName="src/routes/[[locale=locale]]/+layout.svelte"
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { useIntlayer, setupIntlayer } from "svelte-intlayer";
-	import Header from './Header.svelte';
-	import type { LayoutData } from './$types';
-
-	let { children, data }: { children: Snippet, data: LayoutData } = $props();
-
-	// 使用路由中的 locale 初始化 Intlayer
-  $effect(() => {
-      setupIntlayer(data.locale);
-  });
-	// 使用布局内容字典
-	const layoutContent = useIntlayer('layout');
-</script>
-
-<Header />
-
-<main>
-	{@render children()}
-</main>
-
-<footer>
-	<p>
-		{$layoutContent.footer.prefix.value}{' '}
-		<a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}
-		{$layoutContent.footer.suffix.value}
-	</p>
-</footer>
-
-<style>
-  /*  */
-</style>
-```
-
-```ts fileName="src/routes/[[locale=locale]]/+page.ts"
-export const prerender = true;
-```
-
-```svelte fileName="src/routes/[[locale=locale]]/+page.svelte"
-<script lang="ts">
-	import { useIntlayer } from "svelte-intlayer";
-
-	// 使用主页内容字典
-	const homeContent = useIntlayer('home');
-</script>
-
-<svelte:head>
-	<title>{$homeContent.title.value}</title>
-</svelte:head>
-
-<section>
-	<h1>
-		{$homeContent.title}
-	</h1>
-</section>
-
-<style>
-  /*  */
-</style>
-```
-
 </Step>
 
 <Step number={8} title="国际化链接">
@@ -784,17 +572,6 @@ export default defineConfig({
 </div>
 ```
 
-### Git 配置
-
-建议忽略 Intlayer 生成的文件。
-
-```plaintext fileName=".gitignore"
-# 忽略 Intlayer 生成的文件
-.intlayer
-```
-
----
-
 </Step>
 
 <Step number={1} title="提取组件内容" isOptional={true}>
@@ -892,12 +669,234 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### 第7步：处理服务器端的语言环境检测（Hooks）
+
+在 SvelteKit 中，服务器需要知道用户的语言环境，以便在 SSR 期间渲染正确的内容。我们使用 `hooks.server.ts` 从 URL 或 cookie 中检测语言环境。
+
+创建或修改 `src/hooks.server.ts`：
+
+```typescript fileName="src/hooks.server.ts"
+import type { Handle } from "@sveltejs/kit";
+import { getLocalizedUrl } from "intlayer";
+import { getLocale } from "$lib/getLocale";
+
+export const handle: Handle = async ({ event, resolve }) => {
+  const detectedLocale = getLocale(event);
+
+  // 检查当前路径是否已以某个语言环境开头（例如 /fr, /en）
+  const pathname = event.url.pathname;
+  const targetPathname = getLocalizedUrl(pathname, detectedLocale);
+
+  // 如果 URL 中没有语言环境（例如用户访问 "/"），则重定向
+  if (targetPathname !== pathname) {
+    return new Response(undefined, {
+      headers: { Location: targetPathname },
+      status: 307, // 临时重定向
+    });
+  }
+
+  return resolve(event, {
+    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),
+  });
+};
+```
+
+然后，创建一个辅助函数从请求事件中获取用户的语言环境：
+
+```typescript fileName="src/lib/getLocale.ts"
+import {
+  configuration,
+  getLocaleFromStorage,
+  localeDetector,
+  type Locale,
+} from "intlayer";
+import type { RequestEvent } from "@sveltejs/kit";
+
+/**
+ * 从请求事件中获取用户的语言环境。
+ * 此函数用于 `src/hooks.server.ts` 中的 `handle` 钩子。
+ *
+ * 它首先尝试从 Intlayer 存储（cookies 或自定义头）中获取语言环境。
+ * 如果未找到语言环境，则回退到浏览器的 "Accept-Language" 协商。
+ *
+ * @param event - 来自 SvelteKit 的请求事件
+ * @returns 用户的语言环境
+ */
+export const getLocale = (event: RequestEvent): Locale => {
+  const defaultLocale = configuration?.internationalization?.defaultLocale;
+
+  // 尝试从 Intlayer 存储（Cookies 或头）中获取语言环境
+  const storedLocale = getLocaleFromStorage({
+    // SvelteKit cookies 访问
+    getCookie: (name: string) => event.cookies.get(name) ?? null,
+    // SvelteKit headers 访问
+    getHeader: (name: string) => event.request.headers.get(name) ?? null,
+  });
+
+  if (storedLocale) {
+    return storedLocale;
+  }
+
+  // 回退到浏览器的 "Accept-Language" 协商
+  const negotiatorHeaders: Record<string, string> = {};
+
+  // 将 SvelteKit Headers 对象转换为普通的 Record<string, string>
+  event.request.headers.forEach((value, key) => {
+    negotiatorHeaders[key] = value;
+  });
+
+  // 从 `Accept-Language` 头检查语言环境
+  const userFallbackLocale = localeDetector(negotiatorHeaders);
+
+  if (userFallbackLocale) {
+    return userFallbackLocale;
+  }
+
+  // 如果没有匹配，返回默认语言环境
+  return defaultLocale;
+};
+```
+
+> `getLocaleFromStorage` 将根据您的配置从请求头或 cookie 中检查语言环境。更多详情请参见 [Configuration](https://intlayer.org/doc/configuration)。
+
+> `localeDetector` 函数会处理 `Accept-Language` 请求头并返回最佳匹配的语言环境。
+
+如果未配置语言环境，我们希望返回 404 错误。为简化操作，我们可以创建一个 `match` 函数来检查语言环境是否有效：
+
+```ts fileName="/src/params/locale.ts"import { defaultLocale, locales, type Locale } from "intlayer";
+export const match = (param: Locale = defaultLocale): boolean =>
+  locales.includes(param);
+```
+
+> **注意：** 请确保您的 `src/app.d.ts` 中包含语言环境的定义：
+>
+> ```typescript
+> declare global {
+>   namespace App {
+>     interface Locals {
+>       locale: import("intlayer").Locale;
+>     }
+>   }
+> }
+> ```
+
+对于 `+layout.svelte` 文件，我们可以删除所有内容，只保留与国际化无关的静态内容：
+
+```svelte fileName="src/+layout.svelte"
+<script lang="ts">
+	 import './layout.css';
+
+    let { children } = $props();
+</script>
+
+<div class="app">
+	{@render children()}
+</div>
+
+<style>
+	.app {
+    /*  */
+	}
+</style>
+```
+
+然后，在 `[[locale=locale]]` 组下创建一个新的页面和布局：
+
+```ts fileName="src/routes/[[locale=locale]]/+layout.ts"
+import type { Load } from "@sveltejs/kit";
+import { defaultLocale, type Locale } from "intlayer";
+
+export const prerender = true;
+
+// 使用通用的 Load 类型
+export const load: Load = ({ params }) => {
+  const locale: Locale = (params.locale as Locale) ?? defaultLocale;
+
+  return {
+    locale,
+  };
+};
+```
+
+```svelte fileName="src/routes/[[locale=locale]]/+layout.svelte"
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { useIntlayer, setupIntlayer } from "svelte-intlayer";
+	import Header from './Header.svelte';
+	import type { LayoutData } from './$types';
+
+	let { children, data }: { children: Snippet, data: LayoutData } = $props();
+
+	// 使用路由中的 locale 初始化 Intlayer
+  $effect(() => {
+      setupIntlayer(data.locale);
+  });
+	// 使用布局内容字典
+	const layoutContent = useIntlayer('layout');
+</script>
+
+<Header />
+
+<main>
+	{@render children()}
+</main>
+
+<footer>
+	<p>
+		{$layoutContent.footer.prefix.value}{' '}
+		<a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}
+		{$layoutContent.footer.suffix.value}
+	</p>
+</footer>
+
+<style>
+  /*  */
+</style>
+```
+
+```ts fileName="src/routes/[[locale=locale]]/+page.ts"
+export const prerender = true;
+```
+
+```svelte fileName="src/routes/[[locale=locale]]/+page.svelte"
+<script lang="ts">
+	import { useIntlayer } from "svelte-intlayer";
+
+	// 使用主页内容字典
+	const homeContent = useIntlayer('home');
+</script>
+
+<svelte:head>
+	<title>{$homeContent.title.value}</title>
+</svelte:head>
+
+<section>
+	<h1>
+		{$homeContent.title}
+	</h1>
+</section>
+
+<style>
+  /*  */
+</style>
+```
+
+### Git 配置
+
+建议忽略 Intlayer 生成的文件。
+
+```plaintext fileName=".gitignore"
+# 忽略 Intlayer 生成的文件
+.intlayer
+```
+
+---
 
 ### 深入了解
 
 - **可视化编辑器**：集成[Intlayer 可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_visual_editor.md)，以便直接从用户界面编辑翻译内容。
 - **CMS**：使用[Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md)实现内容管理的外部化。
-
-</Step>
-
-</Steps>

package/docs/zh/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
 updatedAt: 2026-05-31
-title: Tanstack Start i18n - 完整翻译指南： TanStack Start
-description: 最佳的包体积、SEO、性能和可维护性解决方案。让您的 TanStack Start and Solid 应用在 2026 年实现多语言化，LLM 翻译，Agent Skills & MCP。
+title: "TanStack Start + Solid i18n - 翻译你的应用的完整指南"
+description: "告别 i18next。2026 年构建多语言 (i18n) TanStack Start + Solid 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
   - 国际化
   - 文档

package/docs/zh/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
 updatedAt: 2026-05-31
-title: Tanstack Start i18n - 完整翻译指南： TanStack Start
-description: 最佳的包体积、SEO、性能和可维护性解决方案。让您的 TanStack Start 应用在 2026 年实现多语言化，LLM 翻译，Agent Skills & MCP。
+title: "TanStack Start i18n - 翻译你的应用的完整指南"
+description: "告别 i18next。2026 年构建多语言 (i18n) TanStack Start 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
   - 国际化
   - 文档

package/docs/zh/intlayer_with_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-31
 updatedAt: 2026-05-31
-title: Vanilla JS i18n - 完整翻译指南： Vanilla JS
-description: 最佳的包体积、SEO、性能和可维护性解决方案。让您的 Vanilla JS 网站在 2026 年实现多语言化，LLM 翻译，Agent Skills & MCP。
+title: "Vanilla JS i18n - 翻译你的应用的完整指南"
+description: "告别 i18next。2026 年构建多语言 (i18n) Vanilla JS 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
   - 国际化
   - 文档

package/docs/zh/intlayer_with_vite+lit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
 updatedAt: 2026-05-31
-title: Vite + Lit i18n - 完整翻译指南： Lit
-description: 最佳的包体积、SEO、性能和可维护性解决方案。让您的 Vite and Lit 应用在 2026 年实现多语言化，LLM 翻译，Agent Skills & MCP。
+title: "Vite + Lit i18n - 翻译你的应用的完整指南"
+description: "告别 i18next。2026 年构建多语言 (i18n) Vite + Lit 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
   - 国际化
   - 文档