Creation:2024-08-11Last update:2025-06-29

将此文档参考到您的 AI 助手

使用您最喜欢的AI助手总结文档，并引用此页面和AI提供商

此文档已过期，基础版本已在以下日期更新 2025年8月23日.

前往英文文档

版本历史

"初始化历史"
v5.5.102025/6/29

此页面的内容已使用 AI 翻译。

查看英文原文的最新版本

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

翻译

定义翻译

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;

本地化配置

为了确保正确的翻译处理，您可以在 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 组件中使用翻译

使用 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;

该组件根据您应用中设置的当前语言环境获取相应的翻译内容。

自定义内容对象

intlayer 支持用于翻译的自定义内容对象，允许您定义更复杂的结构，同时确保类型安全。以下是一个自定义对象的示例：

**/*.content.ts

复制代码

复制代码到剪贴板

import { t, type Dictionary } from "intlayer";

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "页面标题",
        content: "页面内容",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "页面标题",
        content: "页面内容",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;

内容声明

复数