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

Настройка контента на основе пола

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

**/*.content.ts

Копировать код

Копировать код в буфер обмена

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

To utilize gender-based content within a React component, import and use the useIntlayer hook from the react-intlayer package. This hook fetches the content for the specified key and allows you to pass in a gender to select the appropriate output.

**/*.tsx

Копировать код

Копировать код в буфер обмена

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const GenderComponent: FC = () => {
const { myGender } = useIntlayer("my_key");

return (
  <div>
    <p>
      {
        /* Output: my content for male users */
        myGender("male")
      }
    </p>
    <p>
      {
        /* Output: my content for female users */
        myGender("female")
      }
    </p>
    <p>
      {
        /* Output: my content for male users */
        myGender("m")
      }
    </p>
    <p>
      {
        /* Output: my content for female users */
        myGender("f")
      }
    </p>
    <p>
      {
        /* Output: my content when gender is not specified */
        myGender("")
      }
    </p>
    <p>
      {
        /* Output: my content when gender is not specified */
        myGender(undefined)
      }
    </p>
  </div>
);
};

export default GenderComponent;

To utilize gender-based content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const GenderComponent: FC = () => {
const { myGender } = useIntlayer("my_key");

return (
  <div>
    <p>{myGender("male")}</p>
    <p>{myGender("female")}</p>
  </div>
);
};

export default GenderComponent;

To utilize gender-based content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Копировать код

Копировать код в буфер обмена

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myGender } = useIntlayer("my_key");</script><template><div>  <p>{{ myGender("male") }}</p>  <p>{{ myGender("female") }}</p></div></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myGender } = useIntlayer("my_key");</script><template><div>  <p>{{ myGender("male") }}</p>  <p>{{ myGender("female") }}</p></div></template>

To utilize gender-based content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my_key");</script><div><p>{$content.myGender("male")}</p><p>{$content.myGender("female")}</p></div>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my_key");</script><div><p>{$content.myGender("male")}</p><p>{$content.myGender("female")}</p></div>

To utilize gender-based content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const GenderComponent: FC = () => {
const { myGender } = useIntlayer("my_key");

return (
  <div>
    <p>{myGender("male")}</p>
    <p>{myGender("female")}</p>
  </div>
);
};

export default GenderComponent;

To utilize gender-based content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const GenderComponent: Component = () => {
const { myGender } = useIntlayer("my_key");

return (
  <div>
    <p>{myGender("male")}</p>
    <p>{myGender("female")}</p>
  </div>
);
};

export default GenderComponent;

To utilize gender-based content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

Копировать код

Копировать код в буфер обмена

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-gender",template: `  <div>    <p>{{ content().myGender("male") }}</p>    <p>{{ content().myGender("female") }}</p>  </div>`,})export class GenderComponent {content = useIntlayer("my_key");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-gender",template: `  <div>    <p>{{ content().myGender("male") }}</p>    <p>{{ content().myGender("female") }}</p>  </div>`,})export class GenderComponent {content = useIntlayer("my_key");}

To utilize gender-based content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Копировать код

Копировать код в буфер обмена

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
document.getElementById("gender-male")!.textContent =
  newContent.myGender("male");
document.getElementById("gender-female")!.textContent =
  newContent.myGender("female");
});

// Initial render
document.getElementById("gender-male")!.textContent = content.myGender("male");
document.getElementById("gender-female")!.textContent =
content.myGender("female");

Дополнительные ресурсы

Для получения более подробной информации о настройке и использовании обратитесь к следующим ресурсам:

Эти ресурсы предлагают дополнительные сведения о настройке и использовании Intlayer в различных средах и фреймворках.

Условие

Вставка