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

翻译

定义翻译

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

使用 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 组件中使用翻译

使用 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: "Page Title",        content: "Page Content",      },      fr: {        title: "Titre de la Page",        content: "Contenu de la Page",      },      es: {        title: "Título de la Página",        content: "Contenido de la Página",      },    }),  },} satisfies Dictionary;export default customContent;

如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。

文档的 GitHub 链接

词典枚举