作者:
    Aymeric PINEAU
    Creation:2025-04-18Last update:2026-06-23

    使用 Intlayer 翻译您的 Vite 和 Preact 网站 | 国际化 (i18n)

    www.youtube.com
    ide.intlayer.org
    intlayer-vite-preact-template.vercel.app

    目录

    为什么选择 Inlayer 而不是替代品？

    与preact-i18n或i18next等主要解决方案相比，Intlayer是一个具有集成优化的解决方案，例如：

    完整的 Preact 覆盖

    Intlayer 经过优化，可与 Preact 完美配合，提供组件级内容范围、延迟加载翻译以及​​扩展国际化 (i18n) 所需的所有功能。

    捆绑尺寸

    不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于将捆绑包和页面大小减少多达 50%。

    </Accordion>

    可维护性

    确定应用程序内容的范围有利于大型应用程序的维护。您可以复制或删除单个功能文件夹，而无需承担检查整个内容代码库的精神负担。此外，Intlayer 具有完全类型化 (fully typed)，以确保您的内容的准确性。

    人工智能代理

    共置内容减少大型语言模型 (LLM) 所需的上下文。 Intlayer 还附带了一套工具，例如用于测试缺失翻译的 CLI、LSP、MCP 和 agent skills，使 AI 代理的开发者体验 (DX) 更加流畅。

    自动化

    使用您选择的法学硕士，通过自动化在 CI/CD 管道中进行翻译，而费用由您的 AI 提供商承担。 Intlayer 还提供了一个编译器来自动提取内容，以及一个网络平台来帮助在后台翻译。

    表现

    将大量 JSON 文件连接到组件可能会导致性能和反应性问题。 Intlayer 可在构建时 (build time)优化您的内容加载。

    无需开发即可扩展

    Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个自托管的可视化编辑器和一个完整的 CMS 来帮助您管理多语言内容实时，与译员、文案人员和其他团队成员无缝协作。内容可以本地和/或远程存储。

    </AccordionGroup>

    在 Vite 和 Preact 应用中设置 Intlayer 的分步指南

    查看 GitHub 上的应用模板。

    1. 安装依赖

      使用 npm 安装必要的包：

      bash
      npx intlayer init --interactive
      --interactive 标志是可选的。如果您是 AI 代理，请使用 intlayer-cli init。
      此命令将检测您的环境并安装所需的包。例如：
      bash
      npm install intlayer preact-intlayer
npm install vite-intlayer --save-dev

      • intlayer

        核心包，为配置管理、翻译、内容声明、转译和 CLI 命令提供国际化工具。

      • preact-intlayer 将 Intlayer 与 Preact 应用集成的包。它为 Preact 国际化提供上下文提供程序和钩子。

      • vite-intlayer 包含用于将 Intlayer 与 Vite 打包器集成的 Vite 插件，以及用于检测用户首选语言、管理 Cookie 和处理 URL 重定向的中间件。

    2. 配置您的项目

      创建一个配置文件来配置应用程序的语言：

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // 您的其他语言环境
    ],
    defaultLocale: Locales.ENGLISH,
  },
  routing: {
    mode: "prefix-no-default", // 默认：为除默认语言外的所有语言添加前缀
    storage: ["cookie", "header"], // 默认：将语言存储在 Cookie 中并从标头检测
  },
};

export default config;
      通过此配置文件，您可以设置本地化 URL、路由模式、存储选项、Cookie 名称、内容声明的位置和扩展名、禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅配置文档。

    3. 在您的 Vite 配置中集成 Intlayer

      将 intlayer 插件添加到您的配置中。

      vite.config.ts
      import { defineConfig } from "vite";
import preact from "@preact/preset-vite";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact(), intlayer()],
});
      intlayer() Vite 插件用于将 Intlayer 与 Vite 集成。它确保内容声明文件的构建，并在开发模式下监视它们。它在 Vite 应用中定义 Intlayer 环境变量。此外，它还提供别名以优化性能。

    4. 声明您的内容

      创建和管理您的内容声明以存储翻译：

      src/app.content.tsx
      import { t, type Dictionary } from "intlayer";
import type { ComponentChildren } from "preact";

const appContent = {
  key: "app",
  content: {
    viteLogo: t({
      zh: "Vite 徽标",
      en: "Vite logo",
      fr: "Logo Vite",
      es: "Logo Vite",
    }),
    preactLogo: t({
      zh: "Preact 徽标",
      en: "Preact logo",
      fr: "Logo Preact",
      es: "Logo Preact",
    }),

    title: "Vite + Preact",

    count: t({
      zh: "计数是 ",
      en: "count is ",
      fr: "le compte est ",
      es: "el recuento es ",
    }),

    edit: t<ComponentChildren>({
      zh: (
        <>
          编辑 <code>src/app.tsx</code> 并保存以测试 HMR
        </>
      ),
      en: (
        <>
          Edit <code>src/app.tsx</code> and save to test HMR
        </>
      ),
      fr: (
        <>
          Éditez <code>src/app.tsx</code> et enregistrez pour tester HMR
        </>
      ),
      es: (
        <>
          Edita <code>src/app.tsx</code> y guarda para probar HMR
        </>
      ),
    }),

    readTheDocs: t({
      zh: "点击 Vite 和 Preact 徽标了解更多",
      en: "Click on the Vite and Preact logos to learn more",
      fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
      es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
    }),
  },
} satisfies Dictionary;

export default appContent;
      您的内容声明可以在应用程序中的任何位置定义，只要它们包含在 contentDir 目录中（默认为 ./src），并且匹配内容声明文件扩展名（默认为 .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}）。
      有关更多详情，请参阅内容声明文档。
      如果您的内容文件包含 TSX 代码，您可能需要导入 import { h } from "preact"; 或确保您的 JSX pragma 为 Preact 正确设置。

    5. 在您的代码中使用 Intlayer

      在整个应用程序中访问您的内容字典：

      src/app.tsx
      import { useState } from "preact/hooks";
import type { FunctionalComponent } from "preact";
import preactLogo from "./assets/preact.svg"; // 假设您有 preact.svg
import viteLogo from "/vite.svg";
import "./app.css"; // 假设您的 CSS 文件名为 app.css
import { IntlayerProvider, useIntlayer } from "preact-intlayer";

const AppContent: FunctionalComponent = () => {
  const [count, setCount] = useState(0);
  const content = useIntlayer("app");

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} class="logo" alt={content.viteLogo.value} />
        </a>
        <a href="https://preactjs.com" target="_blank">
          <img
            src={preactLogo}
            class="logo preact"
            alt={content.preactLogo.value}
          />
        </a>
      </div>
      <h1>{content.title}</h1>
      <div class="card">
        <button onClick={() => setCount((count) => count + 1)}>
          {content.count}
          {count}
        </button>
        <p>{content.edit}</p>
      </div>
      {/* Markdown 内容 */}
      <div>{content.myMarkdownContent}</div>

      {/* HTML 内容 */}
      <div>{content.myHtmlContent}</div>

      <p class="read-the-docs">{content.readTheDocs}</p>
    </>
  );
};

const App: FunctionalComponent = () => (
  <IntlayerProvider>
    <AppContent />
  </IntlayerProvider>
);

export default App;
      如果您想在 string 属性中使用您的内容，例如 alt、title、href、aria-label 等，您可以使用函数的值，如：
      html
      <img src="{content.image.src.value}" alt="{content.image.value}" />
<img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
<img src="{String(content.image.src)}" alt="{String(content.image)}" />
      注意：在 Preact 中，className 通常写成 class。
      要了解更多关于 useIntlayer 钩子的信息，请参阅文档（对于 preact-intlayer 的 API 类似）。
      如果您的应用程序已经存在，您可以使用 Intlayer Compiler 以及提取命令在一秒内转换数千个组件。

    6. 更改您的内容语言

      可选

      要更改您的内容语言，您可以使用 useLocale 钩子提供的 setLocale 函数。此函数允许您设置应用程序的语言环境并相应地更新内容。

      src/components/LocaleSwitcher.tsx
      import type { FunctionalComponent } from "preact";
import { Locales } from "intlayer";
import { useLocale } from "preact-intlayer";

const LocaleSwitcher: FunctionalComponent = () => {
  const { setLocale } = useLocale();

  return (
    <button onClick={() => setLocale(Locales.ENGLISH)}>更改语言为英文</button>
  );
};

export default LocaleSwitcher;
      要了解更多关于 useLocale 钩子的信息，请参阅文档（对于 preact-intlayer 的 API 类似）。

    7. 向您的应用程序添加本地化路由

      可选

      此步骤的目的是为每种语言创建唯一的路由。这对 SEO 和 SEO 友好的 URL 很有用。 示例：

      plaintext
      - https://example.com/about
- https://example.com/es/about
- https://example.com/fr/about
      默认情况下，默认语言的路由不带前缀。如果您想为默认语言添加前缀，可以在配置中将 routing.mode 选项设置为 "prefix-all"。有关更多信息，请参阅配置文档。

      要向您的应用程序添加本地化路由，您可以创建一个 LocaleRouter 组件来包装您的应用程序的路由并处理基于语言的路由。这是一个使用 preact-iso 的示例：

      src/components/LocaleRouter.tsx
      import { localeMap } from "intlayer";
import { IntlayerProvider } from "preact-intlayer";
import { LocationProvider, Router, Route } from "preact-iso";
import type { ComponentChildren, FunctionalComponent } from "preact";

/**
 * 设置特定于语言的路由的路由器组件。
 * 它使用 preact-iso 来管理导航和呈现本地化的组件。
 */
export const LocaleRouter: FunctionalComponent<{
  children: ComponentChildren;
}> = ({ children }) => (
  <LocationProvider>
    <Router>
      {localeMap(({ locale, urlPrefix }) => ({ locale, urlPrefix }))
        .sort((a, b) => b.urlPrefix.length - a.urlPrefix.length)
        .map(({ locale, urlPrefix }) => (
          <Route
            key={locale}
            path={`${urlPrefix}/:rest*`}
            component={() => (
              <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
            )}
          />
        ))}
    </Router>
  </LocationProvider>
);

      然后，您可以在您的应用程序中使用 LocaleRouter 组件：

      src/app.tsx
      import { LocaleRouter } from "./components/LocaleRouter";
import type { FunctionalComponent } from "preact";

// ... 您的 AppContent 组件

const App: FunctionalComponent = () => (
  <LocaleRouter>
    <AppContent />
  </LocaleRouter>
);

export default App;

      同时，您也可以使用 intlayerProxy 向您的应用程序添加服务器端路由。此插件将根据 URL 自动检测当前的语言环境并设置适当的语言 Cookie。如果未指定语言环境，该插件将根据用户的浏览器语言偏好确定最合适的语言环境。如果未检测到任何语言环境，它将重定向到默认语言环境。

      注意，要在生产中使用 intlayerProxy，您需要将 vite-intlayer 包从 devDependencies 切换到 dependencies。
      自 Intlayer v9 起，intlayerProxy() 直接捆绑到 intlayer() 插件中，并通过 routing.enableProxy 选项默认启用（默认为 true）。如下所示单独注册它现在是可选的——为了向后兼容和需要控制插件顺序的设置而保留。设置 routing.enableProxy: false 以选择退出。查看 v9 发布说明。
      vite.config.ts
      import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";
import preact from "@preact/preset-vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    preact(),
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
  ],
});

    8. 当语言环境更改时更改 URL

      可选

      要在语言环境更改时更改 URL，您可以使用 useLocale 钩子提供的 onLocaleChange 属性。同时，您可以使用 preact-iso 中 useLocation 的 route 方法来更新 URL 路径。

      src/components/LocaleSwitcher.tsx
      import { useLocation } from "preact-iso";
import {
  Locales,
  getHTMLTextDir,
  getLocaleName,
  getLocalizedUrl,
} from "intlayer";
import { useLocale } from "preact-intlayer";
import type { FunctionalComponent } from "preact";

const LocaleSwitcher: FunctionalComponent = () => {
  const { url, route } = useLocation();
  const { locale, availableLocales, setLocale } = useLocale({
    onLocaleChange: (newLocale) => {
      // 使用更新的语言环境构造 URL
      // 示例：/es/about?foo=bar
      const pathWithLocale = getLocalizedUrl(url, newLocale);

      // 更新 URL 路径
      route(pathWithLocale, true); // true 用于替换
    },
  });

  return (
    <div>
      <button popovertarget="localePopover">{getLocaleName(locale)}</button>
      <div id="localePopover" popover="auto">
        {availableLocales.map((localeItem) => (
          <a
            href={getLocalizedUrl(url, localeItem)}
            hreflang={localeItem}
            aria-current={locale === localeItem ? "page" : undefined}
            onClick={(e) => {
              e.preventDefault();
              setLocale(localeItem);
              // 设置语言环境后的编程导航将由 onLocaleChange 处理
            }}
            key={localeItem}
          >
            <span>
              {/* 语言环境 - 例如 FR */}
              {localeItem}
            </span>
            <span>
              {/* 其自身语言环境中的语言 - 例如 Français */}
              {getLocaleName(localeItem, localeItem)}
            </span>
            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
              {/* 当前语言环境中的语言 - 例如 Francés（当前语言环境设置为 Locales.SPANISH 时） */}
              {getLocaleName(localeItem, locale)}
            </span>
            <span dir="ltr" lang={Locales.ENGLISH}>
              {/* 英文中的语言 - 例如 French */}
              {getLocaleName(localeItem, Locales.ENGLISH)}
            </span>
          </a>
        ))}
      </div>
    </div>
  );
};

export default LocaleSwitcher;

      文档参考：

      以下是更新的步骤 9，包含添加的解释和精制的代码示例：

    9. 切换 HTML 语言和方向属性

      可选

      当您的应用程序支持多种语言时，关键是要更新 <html> 标签的 lang 和 dir 属性以匹配当前的语言环境。这样做可以确保：

      • 可访问性：屏幕阅读器和辅助技术依赖正确的 lang 属性来准确地发音和解释内容。
      • 文本渲染：dir（方向）属性确保文本以适当的顺序呈现（例如，英文为从左到右，阿拉伯语或希伯来语为从右到左），这对可读性至关重要。
      • SEO：搜索引擎使用 lang 属性来确定您页面的语言，帮助在搜索结果中提供正确的本地化内容。

      通过在语言环境更改时动态更新这些属性，您可以为所有支持的语言的用户保证一致和可访问的体验。

      实现钩子

      创建一个自定义钩子来管理 HTML 属性。该钩子监听语言环境更改并相应地更新属性：

      src/hooks/useI18nHTMLAttributes.tsx
      import { useEffect } from "preact/hooks";
import { useLocale } from "preact-intlayer";
import { getHTMLTextDir } from "intlayer";

/**
 * 根据当前语言环境更新 HTML <html> 元素的 `lang` 和 `dir` 属性。
 * - `lang`: 通知浏览器和搜索引擎页面的语言。
 * - `dir`: 确保正确的阅读顺序（例如，英语为 'ltr'，阿拉伯语为 'rtl'）。
 *
 * 这种动态更新对于正确的文本渲染、无障碍访问和 SEO 至关重要。
 */
export const useI18nHTMLAttributes = () => {
  const { locale } = useLocale();

  useEffect(() => {
    // 将语言属性更新为当前语言环境。
    document.documentElement.lang = locale;

    // 根据当前语言环境设置文本方向。
    document.documentElement.dir = getHTMLTextDir(locale);
  }, [locale]);
};

      在应用程序中使用钩子

      将钩子集成到您的主组件中，以便在语言环境更改时更新 HTML 属性：

      src/app.tsx
      import type { FunctionalComponent } from "preact";
import { IntlayerProvider } from "preact-intlayer"; // 如果 AppContent 需要，useIntlayer 已导入
import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
import "./app.css";
// 第 5 步中的 AppContent 定义

const AppWithHooks: FunctionalComponent = () => {
  // 应用钩子以根据语言环境更新 <html> 标签的 lang 和 dir 属性。
  useI18nHTMLAttributes();

  // 假设 AppContent 是您在第 5 步中的主要内容显示组件
  return <AppContent />;
};

const App: FunctionalComponent = () => (
  <IntlayerProvider>
    <AppWithHooks />
  </IntlayerProvider>
);

export default App;

      通过应用这些更改，您的应用将:

      • 确保 language (lang) 属性正确反映当前locale，这对SEO和浏览器行为很重要。
      • 根据locale调整 text direction (dir)，增强可读性和可用性，特别是对于阅读顺序不同的语言。
      • 提供更 accessible 的体验，因为辅助技术依赖这些属性才能实现最佳功能。

    10. 创建本地化链接组件

      可选

      为了确保您的应用程序的导航尊重当前的语言环境，您可以创建一个自定义 Link 组件。该组件自动为内部 URL 添加当前语言的前缀。

      这种行为有几个有用的原因:

      • SEO 和用户体验：本地化的 URL 帮助搜索引擎正确索引特定语言的页面，并为用户提供他们首选语言的内容。
      • 一致性：通过在整个应用程序中使用本地化链接，你可以保证导航保持在当前的语言环境中，防止意外的语言切换。
      • 可维护性：将本地化逻辑集中在一个单独的组件中，简化了 URL 的管理。

      Below is the implementation of a localized Link component in Preact:

      src/components/Link.tsx
      import { getLocalizedUrl } from "intlayer";
import { useLocale } from "preact-intlayer";
import { forwardRef } from "preact/compat";
import type { JSX } from "preact";

export interface LinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
  href: string;
}

/**
 * 用于检查给定 URL 是否为外部链接的实用函数。
 * 如果 URL 以 http:// 或 https:// 开头，则认为是外部链接。
 */
export const checkIsExternalLink = (href?: string): boolean =>
  /^https?:\/\//.test(href ?? "");

/**
 * 一个自定义 Link 组件，根据当前语言环境调整 href 属性。
 * 对于内部链接，它使用 `getLocalizedUrl` 为 URL 前缀添加语言环境（例如 /fr/about）。
 * 这确保导航保持在同一语言环境上下文中。
 */
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
  ({ href, children, ...props }, ref) => {
    const { locale } = useLocale();
    const isExternalLink = checkIsExternalLink(href);

    // 如果链接是内部链接并提供了有效的 href，则获取本地化的 URL。
    const hrefI18n =
      href && !isExternalLink ? getLocalizedUrl(href, locale) : href;

    return (
      <a href={hrefI18n} ref={ref} {...props}>
        {children}
      </a>
    );
  }
);

Link.displayName = "Link";

      工作原理

      • 检测外部链接:
        辅助函数 checkIsExternalLink 用于判断 URL 是否为外部链接。外部链接保持不变，因为它们不需要本地化。
      • 获取当前语言环境:
        useLocale hook 提供当前的语言环境（例如，fr 代表法语）。
      • 本地化 URL:
        对于内部链接（即非外部链接），使用 getLocalizedUrl 自动为 URL 添加当前语言环境前缀。这意味着如果用户处于法语环境，传递 /about 作为 href 将被转换为 /fr/about。
      • 返回链接:
        该组件返回一个 <a> 元素，其 URL 已本地化，确保导航与语言环境一致。

    11. 渲染 Markdown 和 HTML

      可选

      Intlayer 支持在 Preact 中渲染 Markdown 和 HTML 内容。

      您可以使用 .use() 方法自定义 Markdown 和 HTML 内容的渲染方式。该方法允许您覆盖特定标签的默认渲染。

      tsx
      import { useIntlayer } from "preact-intlayer";

const { myMarkdownContent, myHtmlContent } = useIntlayer("my-component");

// ...

return (
  <div>
    {/* 基础渲染 */}
    {myMarkdownContent}

    {/* Markdown 自定义渲染 */}
    {myMarkdownContent.use({
      h1: (props) => <h1 style={{ color: "red" }} {...props} />,
    })}

    {/* HTML 基础渲染 */}
    {myHtmlContent}

    {/* HTML 自定义渲染 */}
    {myHtmlContent.use({
      b: (props) => <strong style={{ color: "blue" }} {...props} />,
    })}
  </div>
);

    12. 提取组件内容

      可选

      如果您有现有的 codebase，转换数千个文件可能很耗时。

      为了简化此过程，Intlayer 提供了一个 compiler / extractor 来转换您的组件并提取内容。

      要设置它，您可以在 intlayer.config.ts 文件中添加一个 compiler 部分：

      intlayer.config.ts
      import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... 其余配置
  compiler: {
    /**
     * 指示编译器是否应启用。
     */
    enabled: true,

    /**
     * 定义输出文件路径
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * 指示转换后是否应保存组件。
     *
     * - 如果为 `true`，编译器将重写磁盘上的组件文件。所以转换将是永久的，编译器将在下一个过程中跳过转换。这样，编译器可以转换应用程序，然后可以被删除。
     *
     * - 如果为 `false`，编译器仅在构建输出中注入 `useIntlayer()` 函数调用，并保持基础 codebase 完整。转换仅在内存中完成。
     */
    saveComponents: false,

    /**
     * 字典键前缀
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

      运行提取器来转换您的组件并提取内容

      bash
      npx intlayer extract
      从 v9 起，intlayerCompiler 已包含在 intlayer 插件中。所以您不需要手动添加它。

      更新您的 vite.config.ts 以包含 intlayerCompiler 插件：

      vite.config.ts
      import { defineConfig } from "vite";
import { intlayer, intlayerCompiler } from "vite-intlayer";

export default defineConfig({
  plugins: [
    intlayer(),
    intlayerCompiler(), // 添加编译器插件
  ],
});
      bash
      npm run build # 或 npm run dev

    （可选）第 10 步：创建本地化链接组件

    • SEO 和用户体验：本地化 URL 帮助搜索引擎正确索引特定语言的页面，并为用户提供其首选语言的内容。
    • 一致性：通过在整个应用程序中使用本地化链接，您可以确保导航保持在当前语言环境内，防止意外的语言切换。
    • 可维护性：将本地化逻辑集中在单个组件中可以简化 URL 的管理。

    Sitemap

    Intlayer 的 sitemap 生成器遵守你的本地化设置，并包括用于爬虫的常见元数据。

    生成的 sitemap 支持 xhtml:link 命名空间（hreflang XML 扩展）。与只生成平面 URL 的基本生成器不同，Intlayer 在每个页面的所有本地化变体之间连接双向链接（例如 /about、/fr/about 或 /about?lang=fr，具体取决于你的路由模式），这有助于搜索引擎关联本地化 URL。

    Robots.txt

    使用 getMultilingualUrls 以便 Disallow 条目涵盖敏感路径的每个本地化拼写。

    1. 在项目根目录添加 generate-seo.mjs

    generate-seo.mjs
    import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";
import { generateSitemap, getMultilingualUrls } from "intlayer";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

// 站点 URL，默认为本地开发环境
const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(
  /\/$/,
  ""
);

// 定义需要生成的路径列表
const pathList = [
  { path: "/", changefreq: "daily", priority: 1.0 },
  { path: "/about", changefreq: "monthly", priority: 0.7 },
];

// 生成 sitemap.xml
const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);

// 获取所有多语言 URL
const getAllMultilingualUrls = (urls) =>
  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));

// 定义禁止访问的路径
const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);

// 生成 robots.txt
const robotsTxt = [
  "User-agent: *",
  "Allow: /",
  ...disallowedPaths.map((path) => `Disallow: ${path}`),
  "",
  `Sitemap: ${SITE_URL}/sitemap.xml`,
].join("\n");

fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);

console.log("SEO files generated successfully.");

    必须安装 intlayer 以便脚本能够导入它。在生产环境中设置环境变量 SITE_URL（例如在 CI 中）。

    对于 Node ESM，建议使用 generate-seo.mjs。如果改用 generate-seo.js，请确保在 package.json 中设置 "type": "module"，或以 ESM 模式运行 Node。

    工作原理

    package.json
    {
  "scripts": {
    "dev": "vite",
    "prebuild": "node generate-seo.mjs",
    "build": "vite build",
    "preview": "vite preview"
  }
}
    • 检测外部链接：
      辅助函数 checkIsExternalLink 确定 URL 是否为外部。外部链接保持不变，因为它们不需要本地化。
    • 检索当前语言环境：
      useLocale 钩子提供当前的语言环境（例如，法语为 fr）。
    • 本地化 URL：
      对于内部链接（即非外部链接），使用 getLocalizedUrl 自动为 URL 添加当前语言环境的前缀。这意味着如果您的用户处于法语环境，将 /about 作为 href 传递将使其转换为 /fr/about。
    • 返回链接：
      该组件返回一个带有本地化 URL 的 <a> 元素，确保导航与语言环境保持一致。

    配置 TypeScript

    Intlayer 使用模块增强来利用 TypeScript 的优势，使您的代码库更健壮。

    自动补全

    翻译错误

    确保您的 TypeScript 配置包含自动生成的类型。

    tsconfig.json
    {
  // ... 您现有的 TypeScript 配置
  "compilerOptions": {
    // ...
    "jsx": "react-jsx",
    "jsxImportSource": "preact", // 推荐用于 Preact 10+
    // ...
  },
  "include": [
    // ... 您现有的 TypeScript 配置
    ".intlayer/**/*.ts", // 包含自动生成的类型
  ],
}
    确保您的 tsconfig.json 已为 Preact 设置，特别是 jsx 和 jsxImportSource；如果不使用 preset-vite 的默认值，对于较旧的 Preact 版本，还需要设置 jsxFactory/jsxFragmentFactory。

    Git 配置

    建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库。

    为此，您可以在 .gitignore 文件中添加以下指令：

    bash
    #  忽略 Intlayer 生成的文件
.intlayer

    VS Code 扩展

    为了提升您使用 Intlayer 的开发体验，您可以安装官方的 Intlayer VS Code 扩展。

    从 VS Code 市场安装

    此扩展提供：

    • 自动补全 翻译键。
    • 实时错误检测 缺失的翻译。
    • 内联预览 翻译内容。
    • 快速操作 轻松创建和更新翻译。

    有关如何使用该扩展的更多详细信息，请参考 Intlayer VS Code 扩展文档。

    深入了解

    要进一步了解，您可以实现 可视化编辑器 或使用 CMS 将内容外部化。

    SvelteKitVite和Vanilla JS