Yazar:

Oluşturma:2025-09-07Son güncelleme:2025-09-07

Bu dokümanı favori AI asistanınıza referans verinChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Sorunuzu sorun ve bu sayfaya ve seçtiğiniz AI sağlayıcısına referans vererek belgenin bir özetini alın

Sürüm Geçmişi

"Cinsiyete dayalı içerik tanıtıldı"
v5.7.227.07.2025

Bu sayfanın içeriği bir yapay zeka kullanılarak çevrildi.

Orijinal içeriğin İngilizce son sürümünü görüntüleyin

Bu dokümanı düzenle

Bu dokümantasyonu geliştirmek için bir fikriniz varsa, lütfen GitHub'da bir çekme isteği göndererek katkıda bulunmaktan çekinmeyin.

Dokümantasyon için GitHub bağlantısı

Kopyala

Belge Markdown'ını panoya kopyala

Cinsiyete Dayalı İçerik / Intlayer'da Cinsiyet

Name: Intlayer
Author: Intlayer

Cinsiyet Nasıl Çalışır

Intlayer'da cinsiyete dayalı içerik, belirli cinsiyet değerlerini ('male', 'female') karşılık gelen içeriklerine eşleyen gender fonksiyonu aracılığıyla gerçekleştirilir. Bu yaklaşım, verilen cinsiyete göre içeriği dinamik olarak seçmenizi sağlar. React Intlayer veya Next Intlayer ile entegre edildiğinde, çalışma zamanında sağlanan cinsiyete göre uygun içerik otomatik olarak seçilir.

Cinsiyete Dayalı İçeriği Ayarlama

Intlayer projenizde cinsiyete dayalı içeriği ayarlamak için, cinsiyete özel tanımlarınızı içeren bir içerik modülü oluşturun. Aşağıda çeşitli formatlarda örnekler verilmiştir.

**/*.content.ts

Kodu kopyala

Kodu panoya kopyala

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

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "erkek kullanıcılar için içeriğim",
      female: "kadın kullanıcılar için içeriğim",
      fallback: "cinsiyet belirtilmediğinde içeriğim", // İsteğe bağlı
    }),
  },
} satisfies Dictionary;

export default myGenderContent;

Eğer hiçbir fallback bildirilmezse, cinsiyet belirtilmezse veya tanımlanan herhangi bir cinsiyetle eşleşmezse bildirilen son anahtar fallback olarak alınacaktır.

React Intlayer ile Cinsiyete Dayalı İçeriği Kullanma

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

Kodu kopyala

Kodu panoya kopyala

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

Kodu kopyala

Kodu panoya kopyala

"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

Kodu kopyala

Kodu panoya kopyala

<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

Kodu kopyala

Kodu panoya kopyala

<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

Kodu kopyala

Kodu panoya kopyala

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

Kodu kopyala

Kodu panoya kopyala

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

Kodu kopyala

Kodu panoya kopyala

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

Kodu kopyala

Kodu panoya kopyala

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

Ek Kaynaklar

Yapılandırma ve kullanım hakkında daha detaylı bilgi için aşağıdaki kaynaklara başvurun:

Bu kaynaklar, çeşitli ortamlar ve çerçevelerde Intlayer'ın kurulumu ve kullanımı hakkında daha fazla bilgi sunar.

Koşul Ekleme