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

[Discourse]

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

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

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

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

الميزات

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

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

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

تخصيص محتوى شريطك

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

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

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

الإعدادات

الاسم	الوصف
show for members	عرض الشريط للمستخدمين المسجلين في المنتدى
show for anon	عرض الشريط للمستخدمين المجهولين
display on mobile	عرض الشريط على أجهزة الجوال
display on desktop	عرض الشريط على أجهزة سطح المكتب
display on homepage	عرض الشريط في الصفحة الرئيسية
url must contain	أدخل المسارات التي يجب أن تعرض الشريط. أضف * في نهاية المسار كعلامة wildcard
dismissible	السماح للمستخدمين بإغلاق الشريط
collapsible	السماح للمستخدمين بتوسيع الشريط وانكماشه
default collapsed state	حالة الانكماش الافتراضية عند تمكين إعداد collapsible
cookie lifespan	عمر ملف تعريف الارتباط المستخدم لتذكر ما إذا كان الشريط قد تم إغلاقه أو توسيعه أو انكماشه. إذا تم تعيينه على «لا شيء»، فلن يتم استخدام أي ملفات تعريف ارتباط مع هذا المكون، وسيتم حذف أي ملفات تعريف ارتباط تم إنشاؤها سابقًا تتعلق بالشريط في المرة التالية التي يقوم فيها المستخدم بتحميل الصفحة بالكامل. يتم قياس القيم كوحدة واحدة، لذا فإن تعيين «سنة» سيكون سنة واحدة، و«أسبوع» سيكون أسبوعًا واحدًا، إلخ.
cookie name	عند إجراء تغييرات مهمة على الشريط، يجب عليك تغيير اسم ملف تعريف الارتباط لضمان رؤية جميع المستخدمين للتغييرات.
full width banner	عرض الشريط بعرض المتصفح الكامل
swap default positioning	إذا كان هناك مكون آخر مرتبط بالشريط نشطًا، فاستخدم هذا لتبديل موضعه مع Versatile Banner
plugin outlet	يضع below-site-header الشريط فوق الشريط الجانبي، بينما يضع above-main-container الشريط فوق المحتوى بجانب الشريط الجانبي
banner background image	عنوان URL للمصدر لصورة الخلفية الخاصة بك. نصيحة: يمكنك رفع صورة إلى سمتك الرئيسية واستخدام عنوان URL منها، ولكن تأكد من عدم استخدام قسم «التحميلات» في هذا المكون. سيتم حذف أي تحميلات مضافة إلى هذا المكون عند كل تحديث.
banner background image dark	عنوان URL للمصدر لصورة الخلفية عند اكتشاف وضع النظام الداكن.
background color	يُستخدم بدلاً من صورة الخلفية
background color dark	يُستخدم بدلاً من صورة الخلفية عند اكتشاف وضع النظام الداكن.
primary text color	لون النص الرئيسي للشريط
primary text color dark	لون النص الرئيسي للشريط عند اكتشاف وضع النظام الداكن
secondary text color	لون نص الأيقونة وعناوين النصوص، ولون خلفية الزر.
secondary text color dark	لون نص الأيقونة وعناوين النصوص، ولون خلفية الزر عند اكتشاف وضع النظام الداكن.
link text color	لون نص الروابط داخل الشريط
link text color dark	لون نص الروابط داخل الشريط عند اكتشاف وضع النظام الداكن.

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