作者:
    Aymeric PINEAU
    Creation:2024-08-11Last update:2026-10-08

    翻译

    定义翻译

    intlayer 中的 t 函数允许您声明多语言内容。该函数确保类型安全，如果缺少任何翻译会抛出错误，这在 TypeScript 环境中特别有用。

    以下是如何声明带有翻译内容的示例。

    **/*.content.ts
    import { t, type Dictionary } from "intlayer";

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

    本地化配置

    为了确保正确处理翻译，您可以在 intlayer.config.ts 中配置接受的本地化语言。此配置允许您定义应用程序支持的语言：

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

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

    在组件中使用翻译

    使用 react-intlayer，您可以在 React 组件中使用翻译。示例如下：

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

    该组件会根据应用程序中当前设置的语言环境自动获取并渲染对应的翻译。

    使用 next-intlayer，您可以在 React 服务端组件 (Server Components) 或客户端组件 (Client Components) 中使用翻译。以下是在客户端组件中的使用示例：

    **/*.tsx
    "use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

    使用 vue-intlayer，您可以在 Vue 组件中使用翻译。示例如下：

    **/*.vue
    <script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

const content = useIntlayer("multi_lang");
</script>

<template>
  <div>
    <p>{{ content.welcomeMessage }}</p>
  </div>
</template>

    使用 svelte-intlayer，您可以在 Svelte 组件中使用翻译。该 Hook 返回一个 Svelte store。示例如下：

    **/*.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";

const content = useIntlayer("multi_lang");
</script>

<div>
  <p>{$content.welcomeMessage}</p>
</div>

    使用 preact-intlayer，您可以在 Preact 组件中使用翻译。示例如下：

    **/*.tsx
    import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

    使用 solid-intlayer，您可以在 SolidJS 组件中使用翻译。示例如下：

    **/*.tsx
    import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const MyComponent: Component = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

    使用 angular-intlayer，您可以在 Angular 组件中使用翻译。示例如下：

    app.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-my-component",
  template: `
    <div>
      <p>{{ content().welcomeMessage }}</p>
    </div>
  `,
})
export class MyComponent {
  content = useIntlayer("multi_lang");
}

    使用 vanilla-intlayer，您可以通过监听内容变更来使用翻译。示例如下：

    **/*.ts
    import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("multi_lang").onChange((newContent) => {
  document.getElementById("welcome-message")!.textContent = String(
    newContent.welcomeMessage
  );
});

// 初始渲染
document.getElementById("welcome-message")!.textContent = String(
  content.welcomeMessage
);
    内容声明复数