Перевод

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

    Функция t в intlayer позволяет объявлять контент на нескольких языках. Эта функция гарантирует безопасность типов, вызывая ошибку, если какие-либо переводы отсутствуют, что особенно полезно в средах TypeScript.

    Использование TypeScript

    Вот пример того, как объявить контент с переводами.

    **/*.content.ts
    import { t, type DeclarationContent } 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",      ru: "Добро пожаловать в наше приложение",    }),  },} 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,      Locales.RUSSIAN,    ],  },};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: "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",      },      ru: {        title: "Название страницы",        content: "Содержание страницы",      },    }),  },} satisfies DeclarationContent;export default customContent;

    Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.

    Ссылка на документацию GitHub
    Декларация контентаПеречисление