لافتة متعددة الاستخدامات

[Discourse]

	الملخص	يضيف Versatile Banner شريطًا إعلانيًا قابلًا للتخصيص إلى موقعك.
	معاينة	معاينة على منشئ قوالب Discourse
	رابط المستودع	https://github.com/discourse/discourse-versatile-banner
	جديد على قوالب Discourse؟	دليل المبتدئين لاستخدام قوالب Discourse

تثبيت مكون القالب هذا

نظرًا لأن هذا مكون قالب #رسمي تحافظ عليه فريق Discourse، يمكن تقديم طلبات #دعم، #مساعدة:أخطاء، #مساعدة:تجربة_مستخدم، و #مساعدة:ميزات في الفئات ذات الصلة هنا على Meta، مع وسمها بوسم مكون القالب المناسب. انقر على أحد الروابط أدناه لبدء طلبك.

 الدعم  خطأ  تجربة المستخدم  ميزة

الميزات

يعد هذا المكون قالبًا تطورًا عن الجهود السابقة الخاصة بالشريط الإعلاني. الهدف هو توفير سهولة ومرونة أكبر من خلال استخدام إعدادات القالب.

فيما يلي أبرز الميزات:

• تقييد العرض للمستخدمين المسجلين الدخول أو المستخدمين المجهولين
• تقييد العرض ليكون حصريًا للأجهزة المحمولة أو أجهزة سطح المكتب
• تقييد العرض لصفحات محددة
• خيارات الإغلاق، والتوسيع/الطي، والظهور الدائم
• خيار عرض العرض الكامل لعرض المتصفح
• إدارة الألوان
• تخصيص العناوين والأعمدة باستخدام HTML (انظر أدناه للمزيد)
• خيار الحالة الدائمة (انظر أدناه للمزيد)

تخصيص محتوى شريطك الإعلاني

يتم تقسيم محتوى الشريط الإعلاني إلى العنوان الرئيسي والأعمدة. يمكنك الحصول على ما يصل إلى 5 أعمدة في شريطك الإعلاني، ومع ذلك، فإن العدد الموصى به هو 3 أو أقل بسبب قيود العرض. يتم توفير قوالب HTML ويمكن تخصيصها لتلبية احتياجاتك الفردية. يمكنك أيضًا التحكم في عرض كل عمود وإضافة أي صورة أو أيقونة Font Awesome تريدها في أعلى كل عمود.

استخدام خيار الحالة الدائمة

يعتمد خيار الحالة الدائمة على ما يصل إلى ملفي تعريف ارتباط (cookies). ستحتوي ملفات تعريف الارتباط هذه على اسم للشريط الإعلاني وقيمة صحيحة/خاطئة تتعلق بحالة الشريط. إذا كانت لديك أي مخاوف بشأن استخدام ملفات تعريف الارتباط على موقعك، فمن الأفضل تجنب استخدام هذا الإعداد. سيضمن اختيار خيار وقت نسبي لإعداد cookie_lifespan بقاء الشريط الإعلاني مغلقًا/موسعًا/مطويًا لمدة زمنية محددة بعد أن يضغط المستخدم على الزر المناسب. بدون هذا الإعداد، يتم إعادة تعيين الشريط الإعلاني مع كل تحميل كامل للصفحة. إذا قمت بإجراء تغيير على الشريط الإعلاني وتريد التأكد من أن جميع المستخدمين يرون تلك التغييرات، حتى أولئك الذين أغلقوا الشريط سابقًا، فتأكد من تغيير “اسم ملف تعريف الارتباط”. سيؤدي ذلك إلى إعادة تعيين أي حالة دائمة، ثم السماح للمستخدم بإغلاق الشريط مرة أخرى.

الإعدادات

الاسم	الوصف
إظهار للأعضاء	عرض الشريط الإعلاني للمستخدمين المسجلين الدخول إلى المنتدى
إظهار للمجهولين	عرض الشريط الإعلاني للمستخدمين المجهولين
العرض على الأجهزة المحمولة	عرض الشريط الإعلاني على الأجهزة المحمولة
العرض على أجهزة سطح المكتب	عرض الشريط الإعلاني على أجهزة الكمبيوتر المكتبية
العرض على الصفحة الرئيسية	عرض الشريط الإعلاني على الصفحة الرئيسية
يجب أن يحتوي الرابط على	أدخل المسارات التي يجب أن يعرض فيها الشريط الإعلاني. أضف * إلى نهاية المسار كرمز بدل
قابل للإغلاق	السماح للمستخدمين بإغلاق الشريط الإعلاني
قابل للطي/التوسيع	السماح للمستخدمين بتوسيع وطي الشريط الإعلاني
حالة الطي الافتراضية	حالة الطي الافتراضية عند تفعيل إعداد القابلية للطي
عمر ملف تعريف الارتباط	عمر ملف تعريف الارتباط المستخدم لتذكر ما إذا كان الشريط الإعلاني قد تم إغلاقه أو توسيعه أو طيه. إذا تم تعيينه على “لا شيء”، فلن يتم استخدام أي ملفات تعريف ارتباط مع هذا المكون، وسيتم حذف أي ملفات تعريف ارتباط تم إنشاؤها سابقًا والمتعلقة بالشريط في المرة التالية التي يقوم فيها المستخدم بتحميل الصفحة بالكامل. يتم قياس القيم كوحدة واحدة، لذا فإن تعيين “سنة” سيكون سنة واحدة، و"أسبوع" سيكون أسبوعًا واحدًا، إلخ.
اسم ملف تعريف الارتباط	عند إجراء تغييرات مهمة على الشريط الإعلاني، يجب عليك تغيير اسم ملف تعريف الارتباط لضمان رؤية جميع المستخدمين للتغييرات.
شريط إعلاني بعرض كامل	عرض الشريط الإعلاني بعرض المتصفح الكامل
تبديل الموضع الافتراضي	إذا كان هناك مكون آخر متعلق بالشريط الإعلاني نشطًا، استخدم هذا لتبديل موضعه مع Versatile Banner
منفذ البرنامج المساعد	يضع below-site-header الشريط فوق الشريط الجانبي، و above-main-container يضعه فوق المحتوى بجانب الشريط الجانبي
صورة خلفية الشريط الإعلاني	عنوان URL لمصدر صورة الخلفية الخاصة بك. نصيحة: يمكنك تحميل صورة إلى قالبك الرئيسي واستخدام عنوان URL منها، ولكن تأكد من عدم استخدام قسم “التحميلات” الخاص بهذا المكون. سيتم حذف أي تحميلات تمت إضافتها إلى هذا المكون كلما تم تحديثه.
صورة خلفية الشريط الإعلاني للوضع الداكن	عنوان URL لمصدر صورة الخلفية عند اكتشاف الوضع الداكن للنظام.
لون الخلفية	يُستخدم بدلاً من صورة الخلفية
لون الخلفية للوضع الداكن	يُستخدم بدلاً من صورة الخلفية عند اكتشاف الوضع الداكن للنظام.
لون النص الأساسي	لون النص الرئيسي للشريط الإعلاني
لون النص الأساسي للوضع الداكن	لون النص الرئيسي للشريط الإعلاني عند اكتشاف الوضع الداكن للنظام
لون النص الثانوي	لون النص الخاص بالأيقونة والعناوين النصية، ولون خلفية الزر.
لون النص الثانوي للوضع الداكن	لون النص الخاص بالأيقونة والعناوين النصية، ولون خلفية الزر عند اكتشاف الوضع الداكن للنظام.
لون نص الروابط	لون النص للروابط داخل الشريط الإعلاني
لون نص الروابط للوضع الداكن	لون النص للروابط داخل الشريط الإعلاني عند اكتشاف الوضع الداكن للنظام.

الترجمة	الافتراضي
close.title	إغلاق الشريط الإعلاني
close.label	إغلاق
toggle.title	توسيع/طي الشريط الإعلاني
toggle.collapse_label	طي
toggle.expand_label	توسيع

مستضاف من قبلنا؟ مكونات القالب متاحة للاستخدام في خطط Pro و Business و Enterprise الخاصة بنا.

[Dhruvi_Butti]

مرحباً يا أصدقاء! أريد جعل جميع النصوص محاذية لليسار، لكن سمة CSS لا تعمل معي. هل يمكن لأحد أن يخبرني بالضبط كيف يمكننا فعل ذلك؟

[tshenry (Taylor)]

هل هذا على ما يبدو ما تبحث عنه؟

إذا كان الأمر كذلك، إليك كود CSS سريع وغير منقح قد يساعدك على البدء:

.banner-box {
  h1,
  h2,
  h3,
  .row .single-box {
    text-align: left;
    & .banner-list {
      display: block;
      ul {
        margin: 0 0 9px 25px;
      }
    }
  }

  .section-header {
    .x-title {
      padding: 25px 15px;
    }
    .description p {
      text-align: left;
    }
  }
}

ستحتاج إلى إنشاء مكون جديد باسم “تخصيصات اللافتة متعددة الاستخدامات” وإضافة كود CSS المذكور أعلاه إلى قسم Common. تأكد من إضافة المكون الجديد إلى أي سمة نشطة تستخدم لافتة Versatile Banner لتطبيق التخصيصات.

[Dhruvi_Butti]

نجح هذا معي. شكرًا جزيلاً لك.

[charlie788 (Charlie)]

مرحبًا،

هل من الممكن تحويل صورة الخلفية إلى صورة قابلة للنقر؟

شكرًا لك على ردك.

[SidV]

@charlie788، منشور: 234، موضوع: 109133

هل من الممكن تحويل صورة الخلفية إلى صورة قابلة للنقر؟

هل يمكنك إعطاء مثال؟
لماذا ستفعل ذلك؟
أعني… هل ستكون جميع صور الخلفية روابط؟
إذا نقر المستخدم في أي مكان على اللافتة، سيتم إعادة توجيهه إلى ذلك الرابط.
لا أستطيع تخيل الغرض من ذلك.

[Astra]

كيف يمكنني تعديل ارتفاع اللافتة؟

[LeCoyote (https://hec.fm)]

مرحباً @tshenry، أنا أستخدم مكون موضوع “Versatile Banner” لكنه يختفي عندما ألغي تحديد خيار “العرض على سطح المكتب”. في الواقع، أود عرض اللافتة فقط على الأجهزة المحمولة.

لكن عندما ألغي تحديد خيار “العرض على سطح المكتب”… تختفي لافتة “Versatile Banner” على كل من سطح المكتب والأجهزة المحمولة.
إليك الموقع إذا أردت التحقق: https://hec.fm

هل فاتني شيء ما؟

[Astra]

هل من الممكن عرض الروابط أفقيًا على الأجهزة المحمولة أيضًا؟ لقد فوجئت قليلًا برؤيتها تظهر تحت بعضها البعض بدلاً من أن تكون أفقية.

[tshenry (Taylor)]

@LeCoyote

عندما ألغي تحديد خيار “إظهار على سطح المكتب”… يختفي اللافتة المتعددة الأغراض على كل من سطح المكتب والجوال.

شكرًا لك على الإبلاغ عن ذلك! نعتذر عن التأخير في الرد. لقد تمكنت من تكرار ما تصفه. أنا متأكد تقريبًا من فهم ما يحدث. سألقي نظرة على الأمر في وقت لاحق من هذا الأسبوع وأعود إليك.

@Astra

كيف يمكنني تعديل ارتفاع اللافتة؟

@Astra

هل من الممكن عرض الروابط أفقيًا على الجوال أيضًا؟ لقد فوجئت قليلًا برؤيتها تظهر تحت بعضها البعض بدلاً من أفقيًا.

يعتمد ارتفاع اللافتة بشكل أساسي على محتواها، ولكن يمكنك تعديل أي شيء حسب الحاجة باستخدام CSS الخاص بك. لست متأكدًا من مدى قدرتك على دمج ثلاثة أعمدة أفقيًا على الجوال، ولكن يمكنك بالتأكيد المحاولة باستخدام CSS مخصص أيضًا! راجع Making custom CSS changes on your site للحصول على بعض النصائح.

[MrDavis97 (Miles Davis)]

أعتقد أنني أواجه خطأً في موقعي يتعلق بعمر ملفات تعريف الارتباط (cookies) في الحفاظ على حالة التوسيع/الطي. ما أريده هو أن يتذكر موقعي متى قام المستخدمون بطي اللافتة أو توسيعها، ويبقيها على الحالة التي اختاروها بغض النظر عن أي شيء. ويعمل الأمر كما هو متوقع عندما أبقى في الصفحة الرئيسية أو أضغط على المواضيع. ومع ذلك، بمجرد الانتقال إلى لوحة الإدارة، أو إعدادات المستخدم، أو الأسئلة الشائعة، أو صفحة «من نحن»، أو شروط الخدمة، أو الخصوصية، أو الوثائق، ثم العودة إلى الصفحة الرئيسية، تبدأ الأمور في الاختلال، وأحيانًا تكون اللافتة عكس ما تم ضبطه، وأحيانًا تكون أيقونة السهم (chevron) الدالة على الطي أو التوسيع في الاتجاه الخاطئ.

هنا، السهم موجه للأعلى:

لكن بعد النقر على الوثائق ثم العودة إلى الصفحة الرئيسية، تصبح أيقونة السهم في الاتجاه المعاكس.

يبدو هذا السلوك غريبًا جدًا…

[augustinecicc]

لقد اكتشفت للتو أن اللافتة المتنوعة لا تظهر في صفحة تسجيل الدخول الخاصة بمنتدىنا (وهو منتدى خاص) كما كانت من قبل.

تم تحديد خيار ‘عرض اللافتة للمستخدمين المجهولين’ في إعدادات المكون.

عند فحص كود HTML، يوجد عنصر div يحمل فئة ‘banner-box’ داخل مجموعة من عناصر div ذات الفئات ‘emberX’، لكن لا يوجد شيء داخل عنصر div ذي فئة ‘banner-box’ - على عكس كود HTML للمستخدمين المسجلين.

هل لديكم أي فكرة عما قد يكون خاطئًا؟

[tshenry (Taylor)]

لقد دفعت للتو تحديثًا صغيرًا للمكون.

Fix show/hide on mobile/desktop behavior and remove ember selectors

@LeCoyote

عند إلغاء تحديد خيار “عرض على سطح المكتب”… يختفي شريط Versatile Banner على كل من سطح المكتب والجوال.

يجب أن يكون هذا قد تم إصلاحه بالتحديث أعلاه. أنا آسف جدًا لكون الأمر استغرق كل هذا الوقت لإيجاد حل. شكرًا مرة أخرى على تقريرك!

@augustinecicc

اكتشفت للتو أن شريط Versatile Banner لا يظهر على صفحة تسجيل الدخول في منتداك (وهو منتدى خاص) كما كان من قبل.

ستحتاج إلى إضافة /login إلى إعداد السمة “يجب أن يحتوي الرابط على”. راجع هذا المنشور للحصول على مزيد من التفاصيل.

@MrDavis97

أعتقد أنني أعاني من خطأ في موقعي فيما يتعلق بعمر ملف تعريف الارتباط في الحفاظ على حالة التوسيع/الطي.

تم الإبلاغ عن هذا مرة أو مرتين في الماضي. للأسف، لم أتمكن أبدًا من إعادة إنتاجه. سأحاول مرة أخرى عندما تتاح لي الفرصة باستخدام خطواتك بالضبط لأرى ما إذا كان لدي أي حظ.

[Dimitri_Nightmare (chris)]

أنا أستخدم لافتة متعددة الأغراض وأحاول تحويل اللافتة إلى رابط ضخم يعيد التوجيه إلى موقع ويب آخر.
كيف يمكنني فعل ذلك؟

حاول تغييره عبر سكريبت: '“api.changeWidgetSetting(‘banner-content-widget’, ‘href’, ‘<site_adresse>’)” لكن اللافتة المتعددة الأغراض توقفت عن العمل.

[augustinecicc]

@tshenry

ستحتاج إلى إضافة /login إلى إعداد السمة يجب أن يحتوي الرابط على. راجع هذا المنشور لمزيد من التفاصيل.

شكرًا لك، هذا رائع. إنه يعمل بشكل مثالي الآن!

[tshenry (Taylor)]

قد تتمكن من فعل شيء مثل:

<script type="text/discourse-plugin" version="0.10.0">
  // إضافة الرابط إلى العنوان
  api.reopenWidget("banner-box-widget", {
    html(attrs) {
      let bannerBox = this._super();
      bannerBox[0].children[1].tagName = "A";
      bannerBox[0].children[1].properties.href = "https://meta.discourse.org";
      return bannerBox;
    }
  });
  
  // إضافة الرابط إلى بقية المحتوى
  api.reopenWidget("banner-content-widget", {
    html(attrs) {
      let bannerContent = this._super();
      bannerContent.tagName = "A";
      bannerContent.properties.href = "https://meta.discourse.org";
      return bannerContent;
    }
  });
</script>

وإضافة قاعدة CSS لضبط لون الرابط:

.banner-box a {
    color: var(--primary);
}

ما لم تكن هناك وظيفة محددة تحتاجها من “اللافتة متعددة الاستخدامات”، أتساءل عما إذا كنت ستستفيد أكثر من إنشاء لافتة HTML بسيطة خاصة بك في مكون جديد. مثال تقريبي:

أضف ما يلي إلى قسم “بعد الرأس” المشترك:

<a href="https://meta.discourse.org">
  <div class="custom-banner">
    <h2>هذه لافتة مخصصة!</h2>
  </div>
</a>

وأضف ما يلي إلى قسم “CSS” المشترك:

 .custom-banner {
   display: flex;
   justify-content: center;
   align-items: center;
   width: $large-width; // 1110px
   height: 200px;
   margin-bottom: 15px;
   background: grey;
   color: white;
 }

هذا سيعطيك لافتة بسيطة قابلة للنقر بالكامل:

[mercury233]

أقوم بتثبيت هذا المكون من git، لكن يبدو أنني لم أحصل على أحدث الأكواد. لم يتم تحديث الرابط FIX: Work with new sticky header and move away from deprecated $.cookie · discourse/discourse-versatile-banner@0939120 · GitHub في موقعي https://ygobbs.com/.

[tshenry (Taylor)]

هذا لأنك تشغل إصدار Discourse 2.6.0.beta2. التخصيص الذي ربطت به يتطلب الإصدار 2.6.0.beta3 وما بعده. ستلاحظ أن التخصيص الذي ربطت به أضف ملف discourse-compatibility لضمان عدم تحديثك إلى تخصيص غير متوافق مع إصدار Discourse الخاص بك.

[mercury233]

واو، إنه أمر مذهل أن Discourse سيجد لي الإصدار الأقدم بدلاً من منعني من تثبيت المكون. شكرًا لك!

[gassim (Al-Gassim Sharaf Addin)]

مرحباً @tshenry،
أرغب في تثبيت المكوّن أكثر من مرة لاستخدام كل نسخة لعرض بانرات مختلفة لفئات مختلفة؛ لذا قمت بتعطيل خيار “العرض في الصفحة الرئيسية” واستخدمت شرط “يجب أن يحتوي الرابط على”، لكن هذا يمنع المكوّن الرئيسي الذي أستخدمه لعرضه في الصفحة الرئيسية فقط. هل يمكنك تقديم حل بديل، أم أن هذه مشكلة؟ شكراً! (: