@intlayer/docs 8.5.1 → 8.6.0

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
@@ -116,7 +117,7 @@ yarn intlayer init
 ```bash packageManager="bun"
 bun add intlayer react-intlayer
 bun add vite-intlayer --dev
-bunx intlayer init
+bun x intlayer init
 ```
 
 - **intlayer**
@@ -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='提取命令'>
 
@@ -894,7 +809,7 @@ yarn intlayer extract
 ```
 
 ```bash packageManager="bun"
-bunx intlayer extract
+bun x intlayer extract
 ```
 
  </Tab>
@@ -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

@@ -76,7 +76,7 @@ yarn intlayer init
 ```bash packageManager="bun"
 bun add intlayer lit-intlayer
 bun add vite-intlayer --dev
-bunx intlayer init
+bun x intlayer init
 ```
 
 - **intlayer**
@@ -409,7 +409,6 @@ export class MyElement extends LitElement {
 }
 ```
 
-> [!NOTE]
 > 当您在原生 HTML 属性（例如 `alt`、`aria-label`、`title`）中需要翻译后的字符串时，请在叶节点上调用 `.value`：
 >
 > ```typescript

package/docs/zh/intlayer_with_vite+preact.md

@@ -91,7 +91,7 @@ yarn intlayer init
 ```bash packageManager="bun"
 bun add intlayer preact-intlayer
 bun add vite-intlayer --dev
-bunx intlayer init
+bun x intlayer init
 ```
 
 - **intlayer**
@@ -1478,7 +1478,7 @@ yarn intlayer extract
 ```
 
 ```bash packageManager="bun"
-bunx intlayer extract
+bun x intlayer extract
 ```
 
  </Tab>

package/docs/zh/intlayer_with_vite+react.md

@@ -93,7 +93,7 @@ yarn intlayer init
 ```bash packageManager="bun"
 bun add intlayer react-intlayer
 bun add vite-intlayer --dev
-bunx intlayer init
+bun x intlayer init
 ```
 
 - **intlayer**
@@ -1534,7 +1534,7 @@ yarn intlayer extract
 ```
 
 ```bash packageManager="bun"
-bunx intlayer extract
+bun x intlayer extract
 ```
 
  </Tab>

package/docs/zh/intlayer_with_vite+react_compiler.md

@@ -102,7 +102,7 @@ yarn intlayer init
 ```bash packageManager="bun"
 bun add intlayer react-intlayer
 bun add vite-intlayer --dev
-bunx intlayer init
+bun x intlayer init
 ```
 
 - **intlayer**

package/docs/zh/intlayer_with_vite+solid.md

@@ -97,7 +97,7 @@ yarn intlayer init
 ```bash packageManager="bun"
 bun add intlayer solid-intlayer
 bun add vite-intlayer --dev
-bunx intlayer init
+bun x intlayer init
 ```
 
 - **intlayer**
@@ -313,7 +313,6 @@ const App: Component = () => (
 export default App;
 ```
 
-> [!NOTE]
 > 在 Solid 中，`useIntlayer` 返回一个 **accessor** 函数（例如，`content()`）。您必须调用此函数才能访问响应式内容。
 
 > 如果您想在 `string` 属性（如 `alt`、`title`、`href`、`aria-label` 等）中使用您的内容，必须调用函数的值，例如：
@@ -693,7 +692,7 @@ yarn intlayer extract
 ```
 
 ```bash packageManager="bun"
-bunx intlayer extract
+bun x intlayer extract
 ```
 
  </Tab>

package/docs/zh/intlayer_with_vite+svelte.md

@@ -83,7 +83,7 @@ yarn intlayer init
 ```bash packageManager="bun"
 bun add intlayer svelte-intlayer
 bun add vite-intlayer --save-dev
-bunx intlayer init
+bun x intlayer init
 ```
 
 - **intlayer**
@@ -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>
 ```
@@ -639,7 +639,7 @@ yarn intlayer extract
 ```
 
 ```bash packageManager="bun"
-bunx intlayer extract
+bun x intlayer extract
 ```
 
  </Tab>

package/docs/zh/intlayer_with_vite+vanilla.md

@@ -69,7 +69,7 @@ yarn intlayer init
 ```bash packageManager="bun"
 bun add intlayer vanilla-intlayer
 bun add vite-intlayer --dev
-bunx intlayer init
+bun x intlayer init
 ```
 
 - **intlayer**
@@ -637,7 +637,7 @@ yarn intlayer extract
 ```
 
 ```bash packageManager="bun"
-bunx intlayer extract
+bun x intlayer extract
 ```
 
  </Tab>

package/docs/zh/intlayer_with_vite+vue.md

@@ -90,7 +90,7 @@ yarn intlayer init
 ```bash packageManager="bun"
 bun add intlayer vue-intlayer
 bun add vite-intlayer --dev
-bunx intlayer init
+bun x intlayer init
 ```
 
 - **intlayer**
@@ -1231,7 +1231,7 @@ yarn intlayer extract
 ```
 
 ```bash packageManager="bun"
-bunx intlayer extract
+bun x intlayer extract
 ```
 
  </Tab>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/docs",
-  "version": "8.5.1",
+  "version": "8.6.0",
   "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.1",
-    "@intlayer/types": "8.5.1"
+    "@intlayer/config": "8.6.0",
+    "@intlayer/core": "8.6.0",
+    "@intlayer/types": "8.6.0"
   },
   "devDependencies": {
-    "@intlayer/api": "8.5.1",
-    "@intlayer/cli": "8.5.1",
+    "@intlayer/api": "8.6.0",
+    "@intlayer/cli": "8.6.0",
     "@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"

package/src/generated/docs.entry.ts

@@ -1453,6 +1453,26 @@ export const docsEntry = {
     vi: readLocale('intlayer_with_svelte_kit.md', 'vi'),
     uk: readLocale('intlayer_with_svelte_kit.md', 'uk'),
   } as unknown as Record<LocalesValues, Promise<string>>,
+  './docs/en/intlayer_with_tanstack+solid.md': {
+    en: readLocale('intlayer_with_tanstack+solid.md', 'en'),
+    ru: readLocale('intlayer_with_tanstack+solid.md', 'ru'),
+    ja: readLocale('intlayer_with_tanstack+solid.md', 'ja'),
+    fr: readLocale('intlayer_with_tanstack+solid.md', 'fr'),
+    ko: readLocale('intlayer_with_tanstack+solid.md', 'ko'),
+    zh: readLocale('intlayer_with_tanstack+solid.md', 'zh'),
+    es: readLocale('intlayer_with_tanstack+solid.md', 'es'),
+    de: readLocale('intlayer_with_tanstack+solid.md', 'de'),
+    ar: readLocale('intlayer_with_tanstack+solid.md', 'ar'),
+    it: readLocale('intlayer_with_tanstack+solid.md', 'it'),
+    'en-GB': readLocale('intlayer_with_tanstack+solid.md', 'en-GB'),
+    pt: readLocale('intlayer_with_tanstack+solid.md', 'pt'),
+    hi: readLocale('intlayer_with_tanstack+solid.md', 'hi'),
+    tr: readLocale('intlayer_with_tanstack+solid.md', 'tr'),
+    pl: readLocale('intlayer_with_tanstack+solid.md', 'pl'),
+    id: readLocale('intlayer_with_tanstack+solid.md', 'id'),
+    vi: readLocale('intlayer_with_tanstack+solid.md', 'vi'),
+    uk: readLocale('intlayer_with_tanstack+solid.md', 'uk'),
+  } as unknown as Record<LocalesValues, Promise<string>>,
   './docs/en/intlayer_with_tanstack.md': {
     en: readLocale('intlayer_with_tanstack.md', 'en'),
     ru: readLocale('intlayer_with_tanstack.md', 'ru'),