Dans Intlayer, le contenu basé sur le genre est réalisé grâce à la fonction gender, qui associe des valeurs de genre spécifiques ('male', 'female') à leur contenu correspondant. Cette approche vous permet de sélectionner dynamiquement du contenu en fonction d'un genre donné. Lorsqu'elle est intégrée avec React Intlayer ou Next Intlayer, le contenu approprié est automatiquement choisi en fonction du genre fourni à l'exécution.

Configuration du contenu basé sur le genre

Pour configurer du contenu basé sur le genre dans votre projet Intlayer, créez un module de contenu qui inclut vos définitions spécifiques au genre. Voici des exemples dans différents formats.

**/*.content.ts

Copier le code

Copier le code dans le presse-papiers

import { gender, type Dictionary } from "intlayer";

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "mon contenu pour les utilisateurs masculins",
      female: "mon contenu pour les utilisatrices féminines",
      fallback: "mon contenu lorsque le genre n'est pas spécifié", // Optionnel
    }),
  },
} satisfies Dictionary;

export default myGenderContent;

Si aucun fallback n'est déclaré, la dernière clé déclarée sera prise comme fallback si le genre n'est pas spécifié ou ne correspond à aucun genre défini.

Utilisation du contenu basé sur le genre avec 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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

"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

Copier le code

Copier le code dans le presse-papiers

<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

Copier le code

Copier le code dans le presse-papiers

<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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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");

Ressources supplémentaires

Pour des informations plus détaillées sur la configuration et l'utilisation, consultez les ressources suivantes :

Ces ressources offrent des informations supplémentaires sur la configuration et l'utilisation d'Intlayer dans divers environnements et frameworks.

Condition

Insertion