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

    Перевод

    Определение переводов

    Функция t в intlayer позволяет объявлять контент на нескольких языках. Эта функция обеспечивает типовую безопасность, выдавая ошибку, если какие-либо переводы отсутствуют, что особенно полезно в средах 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;
    Объявление контента
    Множественное число