@intlayer/docs 8.5.2 → 8.6.1

package/docs/zh/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-03-25
+updatedAt: 2026-03-29
 title: Tanstack Start i18n - 如何在 2026 年使用 Solid.js 翻译 Tanstack Start 应用
-description: 了解如何使用 Intlayer 和 Solid.js 为您的 Tanstack Start 应用程序添加国际化 (i18n)。按照此综合指南创建具有本地化感知路由的多语言应用。
+description: 了解如何使用 Intlayer 和 Solid.js 为您的 Tanstack Start 应用程序添加 internationalization (i18n)。按照此综合指南创建具有本地化感知路由的多语言应用。
 keywords:
   - 国际化
   - 文档
@@ -12,6 +12,7 @@ keywords:
   - i18n
   - TypeScript
   - 语言路由
+  - Sitemap
 slugs:
   - doc
   - environment
@@ -140,16 +141,12 @@ export default config;
 import { intlayer } from "vite-intlayer";
 import { defineConfig } from "vite";
 import { devtools } from "@tanstack/devtools-vite";
-import viteTsConfigPaths from "vite-tsconfig-paths";
 import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
 import solidPlugin from "vite-plugin-solid";
 
 export default defineConfig({
   plugins: [
     devtools(),
-    viteTsConfigPaths({
-      projects: ["./tsconfig.json"],
-    }),
     tanstackStart({
       router: {
         routeFileIgnorePattern:
@@ -221,9 +218,6 @@ function RootComponent() {
 }
 ```
 
-> [!NOTE]
-> 在 Solid 中，`useMatches` 返回一个 **signal** (响应式访问器)。请使用 `matches()` (带括号) 来响应式地访问当前值。
-
 ### 第 6 步：创建语言布局 (可选)
 
 创建一个处理语言前缀并执行验证的布局。此布局将确保仅处理有效的语言。
@@ -415,7 +409,6 @@ function RouteComponent() {
 }
 ```
 
-> [!NOTE]
 > 在 Solid 中，`useIntlayer` 返回一个 **accessor** 函数 (例如：`content()`)。您必须调用该函数以访问响应式内容。
 >
 > 欲了解更多关于 `useIntlayer` 钩子的信息，请参考[文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/solid-intlayer/useIntlayer.md)。
@@ -460,7 +453,6 @@ export const LocaleSwitcher = () => {
 export default LocaleSwitcher;
 ```
 
-> [!NOTE]
 > 在 Solid 中，来自 `useLocale` 的 `locale` 是一个 **signal accessor**。请使用 `locale()` (带括号) 来响应式地读取其当前值。
 >
 > 欲了解更多关于 `useLocale` 钩子的信息，请参考[文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/solid-intlayer/useLocale.md)。
@@ -502,15 +494,11 @@ import solid from "vite-plugin-solid";
 import { nitro } from "nitro/vite";
 import { defineConfig } from "vite";
 import { intlayer, intlayerProxy } from "vite-intlayer";
-import viteTsConfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [
     intlayerProxy(), // 如果您使用 Nitro，Proxy 应放置在服务器之前
     nitro(),
-    viteTsConfigPaths({
-      projects: ["./tsconfig.json"],
-    }),
     intlayer(),
     tanstackStart({
       router: {
@@ -525,7 +513,7 @@ export default defineConfig({
 
 ---
 
-### 第 13 步：国际化您的元数据 (可选)
+### 第 12 步：国际化您的元数据 (可选)
 
 您还可以在 `head` 加载器中使用 `getIntlayer` 函数访问您的内容字典，以实现语言感知的元数据：
 
@@ -551,7 +539,7 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### 第 14 步：在服务器操作中获取语言 (可选)
+### 第 13 步：在服务器操作中获取语言 (可选)
 
 您可能希望从服务器操作 (server actions) 或 API 端点中访问当前语言。
 您可以使用 `intlayer` 提供的 `getLocale` 助手函数来实现这一点。
@@ -588,7 +576,7 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### 第 15 步：管理“未找到”页面 (可选)
+### 第 14 步：管理“未找到”页面 (可选)
 
 当用户访问不存在的页面时，您可以显示自定义的 404 页面，而语言前缀可能会影响 404 页面的触发方式。
 
@@ -662,7 +650,7 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (可选) 第 16 步：提取组件中的内容
+### 第 15 步：提取组件中的内容 (可选)
 
 如果您拥有现有的代码库，转换数千个文件可能会非常耗时。
 
@@ -803,16 +791,12 @@ bun x intlayer extract
 import { intlayer, intlayerCompiler } from "vite-intlayer";
 import { defineConfig } from "vite";
 import { devtools } from "@tanstack/devtools-vite";
-import viteTsConfigPaths from "vite-tsconfig-paths";
 import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
 import solidPlugin from "vite-plugin-solid";
 
 export default defineConfig({
   plugins: [
     devtools(),
-    viteTsConfigPaths({
-      projects: ["./tsconfig.json"],
-    }),
     tanstackStart({
       router: {
         routeFileIgnorePattern:
@@ -847,6 +831,79 @@ bun run build # 或 bun run dev
 
 ---
 
+### 第 16 步：生成站点地图 (可选)
+
+Intlayer 带有内置的站点地图生成器，可帮助您轻松为应用程序创建站点地图。它处理本地化路由并为搜索引擎添加必要的元数据。
+
+> Intlayer 生成的站点地图支持 `xhtml:link` 命名空间（Hreflang XML 扩展）。与仅列出原始 URL 的默认站点地图生成器不同，Intlayer 会自动在页面的所有语言版本（例如 `/about`、`/about?lang=fr` 和 `/about?lang=es`）之间创建所需的双向链接。这确保了搜索引擎能够正确索引并向合适的受众提供正确的语言版本。
+
+要使用它，您首先需要配置 `vite.config.ts` 以启用本地化路由的预渲染，并禁用 TanStack Start 的默认站点地图生成。
+
+```typescript fileName="vite.config.ts"
+import { localeMap, localeFlatMap } from "intlayer";
+// ... 其他导入
+
+export const pathList = ["", "/about", "/404"];
+
+const localizedPages = localeFlatMap(({ urlPrefix }) =>
+  pathList.map((path) => ({
+    path: `${urlPrefix}${path}`,
+    prerender: {
+      enabled: true,
+    },
+  }))
+);
+
+export default defineConfig({
+  plugins: [
+    // ... 其他插件
+    tanstackStart({
+      // ... 其他配置
+      sitemap: {
+        enabled: false,
+      },
+      prerender: {
+        enabled: true,
+        crawlLinks: false,
+        concurrency: 10,
+      },
+      pages: localizedPages,
+    }),
+  ],
+});
+```
+
+然后，创建一个使用 `generateSitemap` 函数的 `src/routes/sitemap[.]xml.ts` 路由：
+
+```typescript fileName="src/routes/sitemap[.]xml.ts"
+import { createFileRoute } from "@tanstack/solid-router";
+import { generateSitemap } from "intlayer";
+
+const SITE_URL = "http://localhost:3000";
+
+export const Route = createFileRoute("/sitemap.xml")({
+  server: {
+    handlers: {
+      GET: async () => {
+        const sitemap = generateSitemap(
+          [
+            { path: "/", changefreq: "daily", priority: 1.0 },
+            { path: "/about", changefreq: "monthly", priority: 0.8 },
+          ],
+          { siteUrl: SITE_URL }
+        );
+
+        return new Response(sitemap, {
+          headers: { "Content-Type": "application/xml" },
+        });
+      },
+    },
+  },
+});
+```
+
+---
+
 ### 第 17 步：配置 TypeScript (可选)
 
 Intlayer 使用模块扩充 (module augmentation) 来利用 TypeScript 的优势，并使您的代码库更加健壮。

package/docs/zh/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-03-12
+updatedAt: 2026-03-29
 title: Tanstack Start i18n - 如何翻译Tanstack Start 应用 2026
 description: 学习如何使用 Intlayer 为您的 Tanstack Start 应用添加国际化 (i18n)。按照本综合指南，使您的应用支持多语言并具备基于区域设置的路由功能。
 keywords:
@@ -12,6 +12,7 @@ keywords:
   - i18n
   - TypeScript
   - 区域路由
+  - Sitemap
 slugs:
   - doc
   - environment
@@ -160,14 +161,10 @@ import viteReact from "@vitejs/plugin-react";
 import { nitro } from "nitro/vite";
 import { defineConfig } from "vite";
 import { intlayer } from "vite-intlayer";
-import viteTsConfigPaths from "vite-tsconfig-paths";
 
 const config = defineConfig({
   plugins: [
     nitro(),
-    viteTsConfigPaths({
-      projects: ["./tsconfig.json"],
-    }),
     intlayer(),
     tanstackStart({
       router: {
@@ -597,15 +594,11 @@ import viteReact from "@vitejs/plugin-react";
 import { nitro } from "nitro/vite";
 import { defineConfig } from "vite";
 import { intlayer, intlayerProxy } from "vite-intlayer";
-import viteTsConfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [
     intlayerProxy(), // 如果使用 Nitro，代理应放在服务器之前
     nitro(),
-    viteTsConfigPaths({
-      projects: ["./tsconfig.json"],
-    }),
     intlayer(),
     tanstackStart({
       router: {
@@ -620,7 +613,7 @@ export default defineConfig({
 
 ---
 
-### 第十三步：国际化您的元数据（可选）
+### 第十二步：国际化您的元数据（可选）
 
 您还可以使用 `getIntlayer` 钩子在整个应用程序中访问您的内容字典：
 
@@ -646,7 +639,7 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### 第十四步：在您的 server actions 中获取 locale（可选）
+### 第十三步：在您的 server actions 中获取 locale（可选）
 
 您可能希望从 server actions 或 API 端点内部访问当前 locale。
 您可以使用 `intlayer` 中的 `getLocale` 辅助函数来实现这一点。
@@ -683,7 +676,7 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### 第十五步：管理未找到的页面（可选）
+### 第十四步：管理未找到的页面（可选）
 
 当用户访问不存在的页面时，您可以显示自定义的未找到页面，并且区域设置前缀可能会影响未找到页面的触发方式。
 
@@ -759,29 +752,11 @@ export const Route = createFileRoute("/{-$locale}/$")({
 
 ---
 
-### 第十六步：配置 TypeScript（可选）
-
-Intlayer 使用模块增强来利用 TypeScript 的优势，使您的代码库更健壮。
-
-确保您的 TypeScript 配置包含自动生成的类型：
-
-```json5 fileName="tsconfig.json"
-{
-  // ... 您现有的配置
-  include: [
-    // ... 您现有的包含项
-    ".intlayer/**/*.ts", // 包含自动生成的类型
-  ],
-}
-```
-
----
-
-### (可选) 步骤 1 : 提取组件内容
+### 第十五步：提取组件中的内容（可选）
 
 如果您有现有的代码库，转换数千个文件可能会非常耗时。
 
-为了简化此过程，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) 来转换您的组件并提取内容。
+为了简化此过程，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) 来转换您的组件并提取内容。
 
 要进行设置，您可以在 `intlayer.config.ts` 文件中添加 `compiler` 部分：
 
@@ -816,66 +791,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... 您的其他配置
-  compiler: {
-    /**
-     * 指示是否应启用编译器。
-     */
-    enabled: true,
-
-    /**
-     * 定义输出文件路径
-     */
-    output: ({ fileName, extension }) => `./${fileName}${extension}`,
-
-    /**
-     * 指示在转换后是否应保存组件。这样，编译器只需运行一次即可转换应用程序，然后即可将其删除。
-     */
-    saveComponents: false,
-
-    /**
-     * 字典键前缀
-     */
-    dictionaryKeyPrefix: "",
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... 您的其他配置
-  compiler: {
-    /**
-     * 指示是否应启用编译器。
-     */
-    enabled: true,
-
-    /**
-     * 定义输出文件路径
-     */
-    output: ({ fileName, extension }) => `./${fileName}${extension}`,
-
-    /**
-     * 指示在转换后是否应保存组件。这样，编译器只需运行一次即可转换应用程序，然后即可将其删除。
-     */
-    saveComponents: false,
-
-    /**
-     * 字典键前缀
-     */
-    dictionaryKeyPrefix: "",
-  },
-};
-
-module.exports = config;
-```
-
 <Tabs>
  <Tab value='提取命令'>
 
@@ -914,24 +829,101 @@ export default defineConfig({
 });
 ```
 
-```bash packageManager="npm"
-npm run build # 或 npm run dev
-```
+ </Tab>
+</Tabs>
 
-```bash packageManager="pnpm"
-pnpm run build # 或 pnpm run dev
-```
+---
 
-```bash packageManager="yarn"
-yarn build # 或 yarn dev
+### 第十六步：生成站点地图 (Sitemap)（可选）
+
+Intlayer 附带一个内置的站点地图生成器，可帮助您轻松为应用程序创建站点地图。它能够处理本地化路由，并为搜索引擎添加必要的元数据。
+
+> Intlayer 生成的站点地图支持 `xhtml:link` 命名空间（Hreflang XML 扩展）。与仅列出原始 URL 的默认站点地图生成器不同，Intlayer 会自动在页面的所有语言版本（例如 `/about`、`/about?lang=fr` 和 `/about?lang=es`）之间创建所需的双向链接。这确保了搜索引擎能够正确索引并向合适的受众提供正确的语言版本。
+
+要使用它，您首先需要配置 `vite.config.ts` 文件，以启用本地化路由的预渲染，并禁用默认的 TanStack Start 站点地图生成。
+
+```typescript fileName="vite.config.ts"
+import { localeFlatMap } from "intlayer";
+// ... 其他导入
+
+export const pathList = ["", "/about", "/404"];
+
+const localizedPages = localeFlatMap(({ urlPrefix }) =>
+  pathList.map((path) => ({
+    path: `${urlPrefix}${path}`,
+    prerender: {
+      enabled: true,
+    },
+  }))
+);
+
+export default defineConfig({
+  plugins: [
+    // ... 其他插件
+    tanstackStart({
+      // ... 其他配置
+      sitemap: {
+        enabled: false,
+      },
+      prerender: {
+        enabled: true,
+        crawlLinks: false,
+        concurrency: 10,
+      },
+      pages: localizedPages,
+    }),
+  ],
+});
 ```
 
-```bash packageManager="bun"
-bun run build # Or bun run dev
+然后，创建一个使用 `generateSitemap` 函数的路由 `src/routes/sitemap[.]xml.ts`：
+
+```typescript fileName="src/routes/sitemap[.]xml.ts"
+import { createFileRoute } from "@tanstack/react-router";
+import { generateSitemap } from "intlayer";
+
+const SITE_URL = (
+  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
+).replace(/\/$/, "");
+
+export const Route = createFileRoute("/sitemap.xml")({
+  server: {
+    handlers: {
+      GET: async () => {
+        const sitemap = generateSitemap(
+          [
+            { path: "/", changefreq: "daily", priority: 1.0 },
+            { path: "/about", changefreq: "monthly", priority: 0.8 },
+          ],
+          { siteUrl: SITE_URL }
+        );
+
+        return new Response(sitemap, {
+          headers: { "Content-Type": "application/xml" },
+        });
+      },
+    },
+  },
+});
 ```
 
- </Tab>
-</Tabs>
+---
+
+### 第十七步：TypeScript 配置 (可选)
+
+Intlayer 通过模块扩充来利用 TypeScript 的优势，增强您的代码库。
+
+确保自动生成的类型已包含在您的 TypeScript 配置中。
+
+```json5 fileName="tsconfig.json"
+{
+  // ... 现有配置
+  include: [
+    // ... 现有包含
+    ".intlayer/**/*.ts", // 包含自动生成的类型
+  ],
+}
+```
 
 ---
 

package/docs/zh/intlayer_with_vite+lit.md

@@ -409,7 +409,6 @@ export class MyElement extends LitElement {
 }
 ```
 
-> [!NOTE]
 > 当您在原生 HTML 属性（例如 `alt`、`aria-label`、`title`）中需要翻译后的字符串时，请在叶节点上调用 `.value`：
 >
 > ```typescript

package/docs/zh/intlayer_with_vite+solid.md

@@ -313,7 +313,6 @@ const App: Component = () => (
 export default App;
 ```
 
-> [!NOTE]
 > 在 Solid 中，`useIntlayer` 返回一个 **accessor** 函数（例如，`content()`）。您必须调用此函数才能访问响应式内容。
 
 > 如果您想在 `string` 属性（如 `alt`、`title`、`href`、`aria-label` 等）中使用您的内容，必须调用函数的值，例如：

package/docs/zh/intlayer_with_vite+svelte.md

@@ -232,7 +232,7 @@ module.exports = appContent;
 <!-- 以简单内容渲染内容 -->
 <h1>{$content.title}</h1>
 <!-- 使用编辑器渲染可编辑内容 -->
-<h1><svelte:component this={$content.title} /></h1>
+<h1>{@const Title = $content.title}<Title /></h1>
 <!-- 以字符串形式渲染内容 -->
 <div aria-label={$content.title.value}></div>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/docs",
-  "version": "8.5.2",
+  "version": "8.6.1",
   "private": false,
   "description": "Intlayer documentation",
   "keywords": [
@@ -72,22 +72,22 @@
     "watch": "webpack --config ./webpack.config.ts --watch"
   },
   "dependencies": {
-    "@intlayer/config": "8.5.1",
-    "@intlayer/core": "8.5.2",
-    "@intlayer/types": "8.5.2"
+    "@intlayer/config": "8.6.1",
+    "@intlayer/core": "8.6.1",
+    "@intlayer/types": "8.6.1"
   },
   "devDependencies": {
-    "@intlayer/api": "8.5.2",
-    "@intlayer/cli": "8.5.2",
+    "@intlayer/api": "8.6.1",
+    "@intlayer/cli": "8.6.1",
     "@types/node": "25.5.0",
     "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",
     "@utils/tsdown-config": "1.0.4",
     "fast-glob": "3.3.3",
     "rimraf": "6.1.3",
-    "tsdown": "0.21.4",
+    "tsdown": "0.21.7",
     "typescript": "6.0.2",
-    "vitest": "4.1.1"
+    "vitest": "4.1.2"
   },
   "engines": {
     "node": ">=14.18"