Гендерно-орієнтований контент / Гендер в Intlayer

Як працює гендерна логіка

У Intlayer контент, залежний від гендера, реалізується за допомогою функції gender, яка зіставляє конкретні значення гендера ('male', 'female') з відповідним вмістом. Такий підхід дозволяє динамічно обирати контент залежно від заданого гендера. При інтеграції з React Intlayer або Next Intlayer відповідний вміст автоматично вибирається відповідно до гендера, переданого під час виконання.

Налаштування контенту, залежного від гендера

Щоб налаштувати контент залежно від гендера у вашому проекті Intlayer, створіть модуль контенту, який містить ваші визначення для конкретних гендерів. Нижче наведені приклади в різних форматах.

import { gender, type Dictionary } from "intlayer";const myGenderContent = {  key: "my_key",  content: {    myGender: gender({      male: "мій контент для чоловіків",      female: "мій контент для жінок",      fallback: "мій контент, коли стать не вказана", // Необов'язково    }),  },} satisfies Dictionary;export default myGenderContent;

Якщо не вказано fallback, останній оголошений ключ буде використано як fallback, якщо стать не вказана або не відповідає жодній визначеній статі.

Використання контенту за гендером у React Intlayer

Щоб використовувати контент, залежний від гендеру, у React-компоненті, імпортуйте й застосуйте хук useIntlayer з пакету react-intlayer. Цей хук отримує контент за вказаним ключем і дозволяє передати гендер, щоб обрати відповідний варіант виводу.

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const GenderComponent: FC = () => {  const { myGender } = useIntlayer("my_key");  return (    <div>      <p>        {          /* Вивід: мій контент для чоловіків */          myGender("male")        }      </p>      <p>        {          /* Вивід: мій контент для жіночої аудиторії */          myGender("female")        }      </p>      <p>        {          /* Вивід: мій контент для чоловічої аудиторії */          myGender("m")        }      </p>      <p>        {          /* Вивід: мій контент для жіночої аудиторії */          myGender("f")        }      </p>      <p>        {          /* Вивід: мій контент, коли стать не вказана */          myGender("")        }      </p>      <p>        {          /* Вивід: мій контент, коли стать не вказана */          myGender(undefined)        }      </p>    </div>  );};export default GenderComponent;

Додаткові ресурси

Для детальнішої інформації щодо налаштування та використання зверніться до таких ресурсів:

• Документація Intlayer CLI
• Документація React Intlayer
• Документація Next Intlayer

Ці ресурси надають додаткові відомості щодо налаштування та використання Intlayer у різних середовищах та фреймворках.