Autor:
    Aymeric PINEAU
    Data utworzenia:2025-07-27Ostatnia aktualizacja:2026-10-08

    Treści oparte na płci / Płeć w Intlayer

    Jak działa płeć

    W Intlayer treści oparte na płci są realizowane za pomocą funkcji gender, która mapuje konkretne wartości płci ('male', 'female') na odpowiadające im treści. Takie podejście pozwala na dynamiczny wybór zawartości w zależności od podanej płci. Po integracji z React Intlayer, Next Intlayer lub innymi adapterami, odpowiednia treść jest automatycznie wybierana zgodnie z płcią przekazaną w czasie wykonywania.

    Konfiguracja treści opartych na płci

    Aby skonfigurować treści oparte na płci w swoim projekcie Intlayer, utwórz moduł deklaracji treści, który zawiera definicje specyficzne dla płci. Poniżej znajdują się przykłady w różnych formatach.

    **/*.content.ts
    import { gender, type Dictionary } from "intlayer";

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "moja treść dla użytkowników płci męskiej",
      female: "moja treść dla użytkowniczek płci żeńskiej",
      fallback: "moja treść, gdy płeć nie jest określona", // Opcjonalne
    }),
  },
} satisfies Dictionary;

export default myGenderContent;
    Jeśli nie zostanie zadeklarowany fallback, ostatni zadeklarowany klucz zostanie użyty jako fallback, jeśli płeć nie zostanie określona lub nie pasuje do żadnej zdefiniowanej wartości.

    Używanie treści zależnych od płci

    Aby użyć treści zależnych od płci w komponencie React, zaimportuj i użyj hooka useIntlayer z pakietu react-intlayer. Hook ten pobiera treść dla podanego klucza i pozwala przekazać płeć, aby wybrać odpowiedni wynik.

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

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

  return (
    <div>
      <p>
        {
          /* Wynik: moja treść dla użytkowników płci męskiej */
          myGender("male")
        }
      </p>
      <p>
        {
          /* Wynik: moja treść dla użytkowniczek płci żeńskiej */
          myGender("female")
        }
      </p>
      <p>
        {
          /* Wynik: moja treść, gdy płeć nie jest określona */
          myGender("")
        }
      </p>
      <p>
        {
          /* Wynik: moja treść, gdy płeć nie jest określona */
          myGender(undefined)
        }
      </p>
    </div>
  );
};

export default GenderComponent;

    Aby użyć treści zależnych od płci w komponentach klienckich Next.js (Client Components), pobierz je za pomocą hooka useIntlayer. Oto przykład:

    **/*.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;

    Aby użyć treści zależnych od płci w komponentach Vue, pobierz je za pomocą hooka useIntlayer. Oto przykład:

    **/*.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>

    Aby użyć treści zależnych od płci w komponentach Svelte, pobierz je za pomocą hooka useIntlayer. Dostęp do magazynu (store) uzyskujemy za pomocą $. Oto przykład:

    **/*.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>

    Aby użyć treści zależnych od płci w komponentach Preact, pobierz je za pomocą hooka useIntlayer. Oto przykład:

    **/*.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;

    Aby użyć treści zależnych od płci w komponentach SolidJS, pobierz je za pomocą hooka useIntlayer. Oto przykład:

    **/*.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;

    Aby użyć treści zależnych od płci w komponentach Angular, pobierz je za pomocą funkcji useIntlayer. Oto przykład:

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

    Aby użyć treści zależnych od płci w czystym JavaScript (vanilla-intlayer), pobierz je za pomocą funkcji useIntlayer. Oto przykład:

    **/*.ts
    import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

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

// Pierwsze renderowanie
document.getElementById("male-content")!.textContent = content.myGender("male");
document.getElementById("female-content")!.textContent =
  content.myGender("female");

    Dodatkowe zasoby

    Aby uzyskać bardziej szczegółowe informacje na temat konfiguracji i użytkowania, zapoznaj się z następującymi zasobami:

    Dokumentacja Intlayer CLI
    Dokumentacja React Intlayer
    Dokumentacja Next Intlayer

    Te zasoby oferują dodatkowe informacje na temat konfiguracji i użytkowania Intlayer w różnych środowiskach oraz frameworkach.

    WarunekWstawienie