Начало работы с декларацией вашего контента

Расширения файлов

По умолчанию Intlayer отслеживает все файлы с следующими расширениями для деклараций контента:

.content.json
.content.ts
.content.tsx
.content.js
.content.jsx
.content.mjs
.content.mjx
.content.cjs
.content.cjx

Приложение будет искать файлы, соответствующие шаблону ./src/**/*.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx} по умолчанию.

Эти стандартные расширения подходят для большинства приложений. Однако, если у вас есть специфические требования, обратитесь к руководству по настройке расширений контента для инструкций по их управлению.

Для полного списка опций конфигурации посетите документацию по конфигурации.

Объявление вашего контента

Создавайте и управляйте вашими словарями:

src/example.content.tsx

import { t, enu, cond, nest, md, type Dictionary } from "intlayer";

interface Content {
  imbricatedContent: {
    imbricatedContent2: {
      stringContent: string;
      numberContent: number;
      booleanContent: boolean;
      javaScriptContent: string;
    };
  };
  multilingualContent: string;
  quantityContent: string;
  conditionalContent: string;
  externalContent: string;
  insertionContent: string;
  fileContent: string;
  nestedContent: any;
  markdownContent: any;
  jsxContent: any;
}

export default {
  key: "page",
  content: {
    imbricatedContent: {
      imbricatedContent2: {
        stringContent: "Привет, мир",
        numberContent: 123,
        booleanContent: true,
        javaScriptContent: `${process.env.NODE_ENV}`,
      },
    },
    multilingualContent: t({
      en: "English content",
      "en-GB": "English content (UK)",
      fr: "French content",
      es: "Spanish content",
      ru: "Русский контент",
    }),
    quantityContent: enu({
      "<-1": "Меньше минус одной машины",
      "-1": "Минус одна машина",
      "0": "Нет машин",
      "1": "Одна машина",
      ">5": "Несколько машин",
      ">19": "Много машин",
    }),
    conditionalContent: cond({
      true: "Валидация включена",
      false: "Валидация отключена",
    }),
    nestedContent: nest(
      "navbar", // Ключ словаря для вложения
      "login.button" // [Необязательно] Путь к контенту для вложения
    ),
    externalContent: fetch("https://example.com").then((res) => res.json())
    markdownContent: md("# Пример Markdown"),

    /*
     * Доступно только с использованием `react-intlayer` или `next-intlayer`
     */
    jsxContent: <h1>Мой заголовок</h1>,
  },
} satisfies Dictionary<Content>; // [необязательно] Dictionary является обобщением и позволяет усилить форматирование вашего словаря

Вложение функций

Вы можете без проблем вкладывать функции в другие.

Пример:

src/example.content.tsx

import { t, enu, cond, nest, md, type Dictionary } from "intlayer";

const getName = async () => "Иван Иванов";

export default {
  key: "page",
  content: {
    // `getIntlayer('page','ru').hiMessage` возвращает `['Привет', ' ', 'Иван Иванов']`
    hiMessage: [
      t({
        en: "Hi",
        fr: "Salut",
        es: "Hola",
        ru: "Привет",
      }),
      " ",
      getName(),
    ],
    // Составной контент, включающий условие, перечисление и многоязычный контент
    // `getIntlayer('page','ru').advancedContent(true)(10) возвращает 'Найдено несколько элементов'`
    advancedContent: cond({
      true: enu({
        "0": t({
          en: "No items found",
          fr: "Aucun article trouvé",
          es: "No se encontraron artículos",
          ru: "Элементы не найдены",
        }),
        "1": t({
          en: "One item found",
          fr: "Un article trouvé",
          es: "Se encontró un artículo",
          ru: "Найден один элемент",
        }),
        ">1": t({
          en: "Multiple items found",
          fr: "Plusieurs articles trouvés",
          es: "Se encontraron múltiples artículos",
          ru: "Найдено несколько элементов",
        }),
      }),
      false: t({
        en: "No valid data available",
        fr: "Aucune donnée valide disponible",
        es: "No hay datos válidos disponibles",
        ru: "Нет доступных данных",
      }),
    }),
  },
} satisfies Dictionary;

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

Ссылка на документацию GitHub

Визуальный редактор Intlayer Перевод