作者:
    Creation:2025-11-20Last update:2026-06-23

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

    ide.intlayer.org

    目录

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

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

    完整的 SvelteKit 覆盖

    Intlayer 经过优化，可与 SvelteKit 完美配合，提供多语言路由、SSR 支持以及扩展国际化 (i18n) 所需的所有功能。

    捆绑尺寸

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

    可维护性

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

    人工智能代理

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

    自动化

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

    表现

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

    无需开发即可扩展

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

    第5步：在您的组件中使用 Intlayer

    前缀来访问其响应式值（例如，$content.title）。

    src/lib/components/Component.svelte
    <script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" 对应于步骤4中定义的键  const content = useIntlayer("hero-section");</script><!-- 以简单内容渲染内容 --><h1>{$content.title}</h1><!-- 使用编辑器渲染可编辑内容 --><h1>{@const Title = $content.title}<Title /></h1><!-- 以字符串形式渲染内容 --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

    1. 设置路由

      以下步骤展示了如何在 SvelteKit 中设置基于语言环境的路由。这允许您的 URL 包含语言环境前缀（例如 /en/about，/fr/about），以提升 SEO 和用户体验。

      bash
      .└─── src    ├── app.d.ts                  # 定义语言环境类型    ├── hooks.server.ts           # 管理语言环境路由    ├── lib    │   └── getLocale.ts          # 从请求头、cookies 检查语言环境    ├── params    │   └── locale.ts             # 定义语言环境参数    └── routes        ├── [[locale=locale]]     # 使用路由组包裹以设置语言环境        │   ├── +layout.svelte    # 路由的本地布局        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # 字体和全局样式的根布局

    2. 国际化链接

      为了SEO，建议在路由前加上语言前缀（例如 /en/about，/fr/about）。该组件会自动为任何链接添加当前语言的前缀。

      src/lib/components/LocalizedLink.svelte
      <script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // 辅助函数：为URL添加当前语言前缀  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

      如果你使用 SvelteKit 的 goto，可以用相同的逻辑结合 getLocalizedUrl 来跳转到本地化的URL：

      typescript
      import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // 根据语言环境导航到 /en/about 或 /fr/about

    3. 语言切换器

      为了允许用户切换语言，更新 URL。

      src/lib/components/LanguageSwitcher.svelte
      <script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // 将在存储中设置语言环境并触发 onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

    4. 添加后端代理

      要为您的 SvelteKit 应用添加后端代理，可以使用 vite-intlayer 插件提供的 intlayerProxy 函数。该插件将根据 URL、Cookie 和浏览器语言偏好自动检测用户的最佳语言环境。

      vite.config.ts
      import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayer({      proxy: {        ignore: (req) => req.url?.startsWith("/api"),      },    }),    sveltekit(),  ],],});

    5. 设置 intlayer 编辑器 / CMS

      要设置 intlayer 编辑器，您必须遵循 intlayer 编辑器文档。

      要设置 intlayer CMS，您必须遵循 intlayer CMS 文档。

      要能够可视化 intlayer 编辑器选择器，您必须在 intlayer 内容中使用组件语法。

      Component.svelte
      <script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- 以简单内容方式渲染内容 -->  <h1>{$content.title}</h1>  <!-- 以组件方式渲染内容（编辑器所需） -->  {@const Component = $content.component}<Component /></div>

    6. 提取组件内容

      可选

      如果您有现有的代码库，转换数千个文件可能会非常耗时。

      为了简化此过程，Intlayer 提出了 编译器 / 提取器 来转换您的组件并提取内容。

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

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

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

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

    /**
     * 指示在转换后是否应保存组件。这样，编译器只需运行一次即可转换应用程序，然后即可将其删除。
     */
    saveComponents: false,

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

export default config;

      运行提取器以转换组件并提取内容

      bash
      npx intlayer extract

    Git 配置

    建议忽略 Intlayer 生成的文件。

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

    深入了解

    Vite和Svelte
    Vite和Preact