المحتوى القائم على النوع الاجتماعي / النوع في 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;

إذا لم يتم إعلان قيمة بديلة، فسيتم أخذ آخر مفتاح معلن كقيمة بديلة إذا لم يتم تحديد النوع أو لم يتطابق مع أي نوع معرف.

استخدام المحتوى المعتمد على النوع مع React Intlayer

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;

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

<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>

لاستخدام المحتوى المستند إلى الجنس في مكونات Svelte، استرجعه عبر خطاف useIntlayer. يتم الوصول إلى المخزن باستخدام `--- createdAt: 2025-07-27 updatedAt: 2026-09-27 priority: 8 title: "المحتوى حسب الجنس في Intlayer" description: "كيّف الرسائل حسب جنس القارئ باستخدام العقدة gender() في Intlayer: صيغ المذكر والمؤنث والافتراضي في مكان واحد." keywords:

• المحتوى القائم على النوع الاجتماعي
• العرض الديناميكي
• التوثيق
• Intlayer
• Next.js
• JavaScript
• React slugs:
• doc
• concept
• content
• gender history:
• version: 5.7.2 date: 2025-07-27 changes: "تقديم المحتوى المعتمد على الجنس" author: aymericzip

المحتوى القائم على النوع الاجتماعي / النوع في 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;

إذا لم يتم إعلان قيمة بديلة، فسيتم أخذ آخر مفتاح معلن كقيمة بديلة إذا لم يتم تحديد النوع أو لم يتطابق مع أي نوع معرف.

استخدام المحتوى المعتمد على النوع مع React Intlayer

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;

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

<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 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>

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;

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;

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 { 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 عبر بيئات وأُطُر عمل مختلفة.