翻译
定义翻译
intlayer中的t函数允许您声明多种语言的内容。该函数确保类型安全，如果缺少任何翻译，则会引发错误，这在TypeScript环境中特别有用。
使用TypeScript
以下是如何声明具有翻译的内容的示例。
**/*.content.ts
import { t, type DeclarationContent } from "intlayer";interface Content { welcomeMessage: string;}export default { key: "multi_lang", content: { welcomeMessage: t({ en: "欢迎使用我们的应用程序", fr: "Bienvenue dans notre application", es: "Bienvenido a nuestra aplicación", }), },} satisfies DeclarationContent<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 DeclarationContent } 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: "Título de la Página", content: "Contenido de la Página", }, }), },} satisfies DeclarationContent;export default customContent;如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接