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

[Discourse]

	ملخص	يضيف اللافتة متعددة الاستخدامات لافتة قابلة للتخصيص إلى موقعك.
	معاينة	معاينة في منشئ سمات 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	أدخل المسارات التي يجب أن تعرض اللافتة. أضف * في نهاية المسار كعلامة جامدة
dismissible	السماح للمستخدمين بإغلاق اللافتة
collapsible	السماح للمستخدمين بتوسيع اللافتة وطيها
default collapsed state	حالة الطي الافتراضية عند تفعيل إعداد collapsible
cookie lifespan	عمر ملف تعريف الارتباط المستخدم لتذكر ما إذا كانت اللافتة قد أُغلقت أو مُدّت أو طُويت. إذا تم تعيينه على “none”، فلن يتم استخدام أي ملفات تعريف ارتباط مع هذا المكون، وسيتم حذف أي ملفات تعريف ارتباط سابقة تم إنشاؤها تتعلق باللافتة في المرة التالية التي يقوم فيها المستخدم بتحميل صفحة كاملة. تُقاس القيم بوحدة واحدة، لذا فإن تعيين “year” سيكون عامًا واحدًا، و"week" سيكون أسبوعًا واحدًا، وهكذا.
cookie name	عند إجراء تغييرات مهمة على اللافتة، يجب عليك تغيير اسم ملف تعريف الارتباط لضمان رؤية جميع المستخدمين للتغييرات.
full width banner	عرض اللافتة بعرض المتصفح الكامل
swap default positioning	إذا كان هناك مكون آخر مرتبط باللافتة نشطًا، فاستخدم هذا لتبديل موضعه مع لافتة Versatile Banner
plugin outlet	يضعها أسفل-site-header فوق الشريط الجانبي، وabove-main-container يضعها فوق المحتوى بجانب الشريط الجانبي
banner background image	عنوان URL المصدر لصورة الخلفية الخاصة بك. نصيحة: يمكنك رفع صورة إلى سمة رئيسية واستخدام الرابط منها، ولكن تأكد من عدم استخدام قسم “Uploads” في هذا المكون. سيتم حذف أي رفعات مضافة إلى هذا المكون عند تحديثه.
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،
أرغب في تثبيت المكوّن أكثر من مرة لاستخدام كل نسخة لعرض بانرات مختلفة لفئات مختلفة؛ لذا قمت بتعطيل خيار “العرض في الصفحة الرئيسية” واستخدمت شرط “يجب أن يحتوي الرابط على”، لكن هذا يمنع المكوّن الرئيسي الذي أستخدمه لعرضه في الصفحة الرئيسية فقط. هل يمكنك تقديم حل بديل، أم أن هذه مشكلة؟ شكراً! (: