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

目录

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

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

在 Astro 中配置 Intlayer 的分步指南

在 GitHub 上查看应用程序模板。

1. 1

   安装依赖

   使用您喜欢的包管理器安装所需的软件包：

   bash

   复制内容

   复制代码

   复制代码到剪贴板

   npx intlayer init --interactive
   

   --interactive 参数是可选的。如果您是 AI 代理，请使用 intlayer-cli init。

   此命令将检测您的环境并安装所需的软件包。例如：

   bash

   复制内容

   复制代码

   复制代码到剪贴板

   npm install intlayer astro-intlayer
   

   • intlayer 核心软件包，提供用于配置管理、翻译、内容声明、编译和 CLI 命令的国际化工具。

   • astro-intlayer 包含用于将 Intlayer 与 Vite 打包器 集成的 Astro 集成插件、将每个请求的语言环境解析到 Astro.locals.intlayer 的中间件，以及 useIntlayer / useDictionary / useLocale 钩子。相同的导入路径在 .astro frontmatter 中解析为服务端实现，在 <script> 块中解析为客户端实现（由 vanilla-intlayer 支持）。

2. 2

   配置您的项目

   架构

   在此架构中，注册在 astro.config.ts 中的 intlayer() 集成会构建你的字典，并添加一个中间件来解析每个请求的语言环境，并将其暴露在 Astro.locals.intlayer 上。页面位于 src/pages/[...locale]/ rest 参数段下，因此默认语言环境不带前缀提供服务，而其他每个语言环境都拥有其专用的 URL。.astro 文件使用 astro-intlayer 的 useIntlayer / useLocale 钩子读取内容，内容声明文件与你的组件一起放置在 src/ 中。

   bash

   复制内容

   复制代码

   复制代码到剪贴板

   .
   ├── src
   │   ├── app.content.tsx               # App content declaration
   │   ├── components
   │   │   └── LocaleSwitcher.astro      # Locale switcher component
   │   └── pages
   │       ├── [...locale]
   │       │   └── index.astro           # Localized page (rest param also serves the default locale)
   │       ├── robots.txt.ts             # robots.txt endpoint
   │       └── sitemap.xml.ts            # Localized sitemap endpoint
   ├── astro.config.ts                   # Astro config with the intlayer() integration
   ├── intlayer.config.ts
   ├── package.json
   └── tsconfig.json
   

   配置

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

   intlayer.config.ts

   复制内容

   复制代码

   复制代码到剪贴板

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // 您的其他语言
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;
   

   通过此配置文件，您可以配置本地化 URL、中间件重定向、Cookie 名称、内容声明的位置和扩展名、在控制台中禁用 Intlayer 日志等。有关可用参数的完整列表，请参阅配置文档。

3. 3

   在 Astro 配置中集成 Intlayer

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

   astro.config.ts

   复制内容

   复制代码

   复制代码到剪贴板

   // @ts-check
   
   import { intlayer } from "astro-intlayer";
   import { defineConfig } from "astro/config";
   
   // https://astro.build/config
   export default defineConfig({
     integrations: [intlayer()],
   });
   

   intlayer() 集成插件用于将 Intlayer 与 Astro 集成。它确保内容声明文件的构建并在开发模式下进行监视。它在 Astro 应用程序中定义 Intlayer 环境变量，并提供别名以优化性能。

4. 4

   声明您的内容

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

   src/app.content.tsx

   复制内容

   复制代码

   复制代码到剪贴板

   import { t, type Dictionary } from "intlayer";
   import type { ReactNode } from "react";
   
   const appContent = {
     key: "app",
     content: {
       title: t({
         en: "Hello World",
         fr: "Bonjour le monde",
         es: "Hola mundo",
         zh: "你好，世界",
       }),
     },
   } satisfies Dictionary;
   
   export default appContent;
   

   只要您的内容声明包含在 contentDir（默认为 ./src）中，且匹配内容声明文件扩展名（默认为 .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}），就可以在应用程序的任何位置定义。

   有关更多信息，请参阅内容声明文档。

5. 5

   在 Astro 中使用内容

   使用 astro-intlayer 导出的钩子在 .astro 文件中使用你的字典。它们与 react-intlayer 具有相同的签名：useIntlayer("key") 返回字典内容，useLocale() 返回当前语言环境，无需传递参数。

   语言环境来自 astro-intlayer 中间件，集成会自动在你的 src/middleware.ts 之前注册该中间件。它会依次从 URL 前缀、客户端持久化的语言环境（Cookie 或标头）、Accept-Language 解析每个请求的语言环境，并将其存储在 Astro.locals.intlayer 中。预渲染页面仅使用 URL，因为它们只为每个访客渲染一次。

   你还应该向每个页面添加 hreflang 和规范链接等 SEO 元数据，并包含一个语言切换器以允许用户切换语言。

   src/pages/index.astro

   复制内容

   复制代码

   复制代码到剪贴板

   ---
   import { useIntlayer, useLocale } from "astro-intlayer";
   import {
     getLocalizedUrl,
     defaultLocale,
     localeMap,
     getHTMLTextDir,
   } from "intlayer";
   import LocaleSwitcher from "../components/LocaleSwitcher.astro";
   
   // 中间件解析的语言环境（例如 /zh/about -> 'zh'）
   const { locale } = useLocale();
   
   // 该语言环境的 'app' 字典内容
   const { title } = useIntlayer("app");
   ---
   
   <!doctype html>
   <html lang={locale} dir={getHTMLTextDir(locale)}>
     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width" />
       <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
       <title>{title}</title>
   
       <!-- Canonical link: Tells search engines which is the primary version of this page -->
       <link
         rel="canonical"
         href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}
       />
   
       <!-- Hreflang: Tell Google about all localized versions -->
       {
         localeMap(({ locale: mapLocale }) => (
           <link
             rel="alternate"
             hreflang={mapLocale}
             href={new URL(
               getLocalizedUrl(Astro.url.pathname, mapLocale),
               Astro.site
             )}
           />
         ))
       }
   
       <!-- x-default: Fallback for users in unmatched languages -->
       <link
         rel="alternate"
         hreflang="x-default"
         href={new URL(
           getLocalizedUrl(Astro.url.pathname, defaultLocale),
           Astro.site
         )}
       />
     </head>
     <body>
       <header>
         <LocaleSwitcher />
       </header>
       <main>
         <h1>{title}</h1>
       </main>
     </body>
   </html>
   

   Astro.locals.intlayer 还向你自己的中间件和端点公开 locale、defaultLocale 和 availableLocales。将语言环境或选择器作为第二个参数传递（useIntlayer("app", "fr")、useIntlayer("faq", { item: 2 })）可在单次调用中覆盖请求语言环境。

6. 6

   本地化路由

   创建动态路由段以提供本地化页面（例如 src/pages/[locale]/index.astro）：

   src/pages/[locale]/index.astro

   复制内容

   复制代码

   复制代码到剪贴板

   <!-- astro -->
   ---
   import { getIntlayer } from "intlayer";
   
   const { title } = getIntlayer('app');
   ---
   
   <h1>{title}</h1>
   

   Astro 集成添加了一个 Vite 中间件，有助于在开发期间进行语言感知路由和环境定义。您还可以使用自己的逻辑或 intlayer 的 getLocalizedUrl 等工具创建语言之间的链接。

7. 7

   添加语言切换器

   为了允许用户在语言之间进行切换，您可以创建一个 LocaleSwitcher 组件。此组件应显示所有受支持语言的列表，并链接到每种语言的相同页面。

   src/components/LocaleSwitcher.astro

   复制内容

   复制代码

   复制代码到剪贴板

   ---
   import { useLocale } from "astro-intlayer";
   import { getLocaleName, getLocalizedUrl, getPathWithoutLocale } from "intlayer";
   
   const { locale, availableLocales } = useLocale();
   const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
   ---
   
   <nav aria-label="Languages">
     <ul>
       {
         availableLocales.map((localeItem) => (
           <li key={localeItem} class="p-1">
             <a
               href={getLocalizedUrl(pathWithoutLocale, localeItem)}
               data-locale={localeItem}
               aria-current={localeItem === locale ? "page" : undefined}
             >
               {getLocaleName(localeItem)}
             </a>
           </li>
         ))
       }
     </ul>
   </nav>
   
   <script>
     // 在浏览器中，相同的导入解析为客户端实现
     import { useLocale } from "astro-intlayer";
     import { getLocalizedUrl, type LocalesValues } from "intlayer";
   
     // 将选择持久化到语言环境 Cookie 中，然后导航到本地化 URL
     const { setLocale } = useLocale({
       onLocaleChange: (newLocale) => {
         window.location.href = getLocalizedUrl(window.location.pathname, newLocale);
       },
     });
   
     const localeLinks = document.querySelectorAll("[data-locale]");
   
     localeLinks.forEach((link) => {
       link.addEventListener("click", (event) => {
         const locale = link.getAttribute("data-locale") as LocalesValues;
   
         event.preventDefault();
         setLocale(locale);
       });
     });
   </script>
   
   <style>
     nav {
       display: flex;
       gap: 1rem;
     }
     ul {
       display: flex;
       list-style: none;
       padding: 0;
       margin: 0;
       gap: 0.5rem;
     }
     a[aria-current="page"] {
       font-weight: bold;
       text-decoration: underline;
     }
   </style>
   

   持久化注意事项： 客户端 useLocale 中的 setLocale 将用户的语言偏好保存在 cookie 中。这使 Intlayer 能够记住该选择，并在将来的访问中自动将用户重定向到其首选语言：按需渲染的页面（带有 output: 'server' 或 prerender = false 的适配器）在发送任何 HTML 之前由 Intlayer 中间件重定向，而作为静态文件提供的预渲染页面则由集成注入每个页面的小脚本重定向。将 routing.enableProxy 设置为 false 可同时关闭两者。在 astro dev 中，除非将 routing.enableProxy 设置为 true，否则 cookie 将被忽略作为重定向来源，因此过期的 cookie 不会劫持你正在处理的页面。

   服务端 / 客户端互兼容性： astro-intlayer 在 frontmatter 中解析为服务端钩子（读取 Astro.locals），在 <script> 块和孤岛（islands）中解析为 vanilla-intlayer 的客户端钩子，具有相同的名称和内容结构。setLocale 和 onChange 仅在客户端起作用，在客户端调用一次 installIntlayer() 以初始化客户端存储。astro-intlayer/client 显式公开客户端入口。

8. 8

   站点地图和 Robots.txt

   Intlayer 提供了实用工具来动态创建您的本地化站点地图和 robots.txt 文件。

   站点地图

   Intlayer 附带一个内置的站点地图生成器，可帮助您轻松为应用程序创建站点地图。它能够处理本地化路由，并为搜索引擎添加必要的元数据。

   Intlayer 生成的站点地图支持 xhtml:link 命名空间（Hreflang XML 扩展）。与仅列出原始 URL 的默认站点地图生成器不同，Intlayer 会自动在页面的所有语言版本（例如 /about、/about?lang=fr 和 /about?lang=es）之间创建所需的双向链接。这确保了搜索引擎能够正确索引并向合适的受众提供正确的语言版本。

   创建 src/pages/sitemap.xml.ts 以生成包含所有本地化路由的站点地图。

   src/pages/sitemap.xml.ts

   复制内容

   复制代码

   复制代码到剪贴板

   import type { APIRoute } from "astro";
   import { generateSitemap, type SitemapUrlEntry } from "intlayer";
   
   const pathList: SitemapUrlEntry[] = [
     { path: "/", changefreq: "daily", priority: 1.0 },
     { path: "/about", changefreq: "monthly", priority: 0.7 },
   ];
   
   export const GET: APIRoute = async ({ site }) => {
     const xmlOutput = generateSitemap(pathList, {
       siteUrl: "https://example.com",
     });
   
     return new Response(xmlOutput, {
       headers: { "Content-Type": "application/xml" },
     });
   };
   

   Robots.txt

   创建 src/pages/robots.txt.ts 以控制搜索引擎抓取。

   src/pages/robots.txt.ts

   复制内容

   复制代码

   复制代码到剪贴板

   import type { APIRoute } from "astro";
   import { getMultilingualUrls } from "intlayer";
   
   const getAllMultilingualUrls = (urls: string[]) =>
     urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
   
   const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
   
   export const GET: APIRoute = ({ site }) => {
     const robotsTxt = [
       "User-agent: *",
       "Allow: /",
       ...disallowedPaths.map((path) => `Disallow: ${path}`),
       "",
       `Sitemap: ${new URL("/sitemap.xml", site).href}`,
     ].join("\n");
   
     return new Response(robotsTxt, {
       headers: { "Content-Type": "text/plain" },
     });
   };
   

9. 9

   继续使用您喜欢的框架

   继续使用您选择的框架构建您的应用程序。

   • Intlayer + React: Intlayer with React
   • Intlayer + Vue: Intlayer with Vue
   • Intlayer + Svelte: Intlayer with Svelte
   • Intlayer + Solid: Intlayer with Solid
   • Intlayer + Preact: Intlayer with Preact
   • Intlayer + Lit: Intlayer with Lit
10. 15

    提取组件中的内容

    可选

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

    为了简化此过程，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;
    

    提取命令Babel 编译器

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

    bash

    复制内容

    复制代码

    复制代码到剪贴板

    npx intlayer extract
    

    构建你的应用程序来转换你的组件并提取内容

    bash

    复制内容

    复制代码

    复制代码到剪贴板

    npm run build # 或 npm run dev
    

TypeScript 配置

Intlayer 使用模块扩展来利用 TypeScript，使您的代码库更加健壮。

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

{
  // ... 您现有的 TypeScript 配置
  "include": [
    // ... 您现有的 TypeScript 配置
    ".intlayer/**/*.ts", // 包含自动生成的类型
  ],
}

Git 配置

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

为此，您可以将以下说明添加到 .gitignore 文件中：

# 忽略 Intlayer 生成的文件
.intlayer

VS Code 扩展

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

从 VS Code Marketplace 安装

此扩展提供：

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

有关使用该扩展的更多信息，请参阅 Intlayer VS Code 扩展文档。

深入了解

如果您想了解更多，还可以实现可视化编辑器或使用 CMS 将您的内容外部化。

常见问题