الرئيسيةبيئة اختبارمعرض الأعمالتطبيقوثيقةمدونة
    • Englishالإنجليزية
      EN
    • русскийالروسية
      RU
    • 日本語اليابانية
      JA
    • françaisالفرنسية
      FR
    • 한국어الكورية
      KO
    • 中文الصينية
      ZH
    • españolالإسبانية
      ES
    • Deutschالألمانية
      DE
    • العربيةالعربية
      AR
    • italianoالإيطالية
      IT
    • British Englishالإنجليزية (المملكة المتحدة)
      EN-GB
    • portuguêsالبرتغالية
      PT
    • हिन्दीالهندية
      HI
    • Türkçeالتركية
      TR
    • polskiالبولندية
      PL
    • Indonesiaالإندونيسية
      ID
    • Tiếng Việtالفيتنامية
      VI
    • українськаالأوكرانية
      UK
    /
    تصفية المستندات حسب الإطار
    Alt+←
    لماذا Intlayer؟
    ابدأ
    مفهوم
    • كيف يعمل Intlayer
    • التكوين
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • المحرر المرئي
    • CMS
    • تكامل CI/CD
    • ترجمةجمعتعدادشرطجنسإدراجملفتداخلMarkdownHTMLجلب الوظيفة
    • ملف لكل لغة
    • محرر
    • الملء التلقائي
    • اختبار
    • تحسين الحزمة
    بيئة
    • Next.js 14 وموجه التطبيق
      Next.js 15
      Next.js بدون locale URL
      Next.js وموجه الصفحة
      المترجم
    • Tanstack Start Solid
    • Astro و React
      Astro و Svelte
      Astro و Vue
      Astro و Solid
      Astro و Preact
      Astro و Lit
      Astro و Vanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • Nuxt و Vue
    • Vite و Solid
    • SvelteKit
    • Vite و Preact
    • Vite و Vanilla JS
    • Vite و Lit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React Native و Expo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • Lynx و React
    Plugins
    • JSON
    • gettext (.po)
    امتداد VS Code
    وكيل
    • خادم MCP
    • مهارات الوكيل
    إصدارات
    • v8
    • v7
    • v6
    مؤشر أداء
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    مدونة
    طرح سؤال
    1. Documentation
    2. مفهوم
    3. إعلان المحتوى
    4. جنس
    إنشاء:2025-07-27آخر تحديث:2025-07-27
    استخدم هذه الصفحة والموفر AI الذي تريده
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

    استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده

    تاريخ الإصدارات

    1. "تقديم المحتوى المعتمد على الجنس"
      v5.7.227‏/7‏/2025

    تمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.

    اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزية
    تعديل هذه الوثيقة

    إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.

    رابط GitHub للتوثيق
    نسخ

    نسخ الـ Markdown من المستند إلى الحافظة

    المحتوى القائم على النوع الاجتماعي / النوع في Intlayer

    كيف يعمل النوع الاجتماعي

    في 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;
    إذا لم يتم إعلان قيمة بديلة، فسيتم أخذ آخر مفتاح معلن كقيمة بديلة إذا لم يتم تحديد النوع أو لم يتطابق مع أي نوع معرف.

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

    لاستخدام المحتوى المعتمد على النوع داخل مكون React، قم باستيراد واستخدام الخطاف useIntlayer من حزمة react-intlayer. يقوم هذا الخطاف بجلب المحتوى للمفتاح المحدد ويسمح لك بتمرير النوع لاختيار المخرجات المناسبة.

    **/*.tsx
    نسخ الكود

    نسخ الكود إلى الحافظة

    import type { FC } from "react";
    import { useIntlayer } from "react-intlayer";
    
    const GenderComponent: FC = () => {
      const { myGender } = useIntlayer("my_key");
    
      return (
        <div>
          <p>
            {
              /* المخرجات: محتواي للمستخدمين الذكور */
              myGender("male")
            }
          </p>
          <p>
            {
              /* المخرجات: محتواي للمستخدمين الإناث */
              myGender("female")
            }
          </p>
          <p>
            {
              /* المخرجات: محتواي للمستخدمين الذكور */
              myGender("m")
            }
          </p>
          <p>
            {
              /* المخرجات: محتواي للمستخدمين الإناث */
              myGender("f")
            }
          </p>
          <p>
            {
              /* المخرجات: محتواي عندما لا يتم تحديد النوع */
              myGender("")
            }
          </p>
          <p>
            {
              /* المخرجات: محتواي عندما لا يتم تحديد النوع */
              myGender(undefined)
            }
          </p>
        </div>
      );
    };
    
    export default GenderComponent;

    موارد إضافية

    لمزيد من المعلومات التفصيلية حول التهيئة والاستخدام، يرجى الرجوع إلى الموارد التالية:

    • توثيق Intlayer CLI
    • توثيق React Intlayer
    • توثيق Next Intlayer

    توفر هذه الموارد رؤى إضافية حول إعداد واستخدام Intlayer عبر بيئات وأُطُر عمل مختلفة.

    شرط
    إدراج
    Alt+→

    في هذه الصفحة

      المناقشات مجهولة الهوية ويتم مراجعتها بانتظام لمعالجة المشكلات الشائعة. لا تتردد في مشاركة أفكار الميزات أو التعليقات على الوثائق أو أي شيء يتعلق بـ Intlayer, نستخدم هذه المدخلات لتشكيل خارطة الطريق وتحسين المنتج.