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

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

Hey people! I want to make all the text left-aligned but the CSS theme is not working for me. Can anyone tell me how exactly can we do it?

[tshenry (Taylor)]

Is this along the lines of what you are after?

If so, here’s some quick and dirty CSS that will hopefully get you started:

.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;
    }
  }
}

You’ll want to create a new component called “Versatile Banner Customizations” and add the above CSS to the Common section. Make sure you add the new component to any active themes that use the Versatile Banner to pick up the customization.

[Dhruvi_Butti]

This worked for me. Thank you so much.

[charlie788 (Charlie)]

Hello,

Is it possible to transform the background image into a clickable image ?

Thank you for your response.

[SidV]

@charlie788

Is it possible to transform the background image into a clickable image ?

Can you give us an example?
Why will you do that?
I mean… all the background image will be a link?
If a user click everywhere on banner will be redirected to that link.
I can’t imagine the use.

[Astra]

How can I adjust the height of the banner?

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

Hi @tshenry I am using the Versatile Banner theme-component but it disappears when I uncheck “display on desktop”.
Indeed I would like to display the banner only on mobiles.

But when I uncheck the “display on desktop”… both desktop and mobile Versatile Banner disappear.
Here is the site if you want to check : https://hec.fm

Did I miss something ?

[Astra]

Is it possible to have the links displayed horizontally on mobile as well? I was a bit surprised to see them show up underneath each other in stead of horizontally.

[tshenry (Taylor)]

@LeCoyote

when I uncheck the “display on desktop”… both desktop and mobile Versatile Banner disappear.

Thanks for reporting this! Sorry for the delayed response. I can reproduce what you describe. I’m pretty sure I know what’s going on. I’ll take a look later this week and get back to you.

@Astra

How can I adjust the height of the banner?

@Astra

Is it possible to have the links displayed horizontally on mobile as well? I was a bit surprised to see them show up underneath each other in stead of horizontally.

The height of the banner is primarily dependent on its content, but you can adjust anything as needed with your own CSS. I’m not sure how well you will be able to fit three columns horizontally on mobile, but you can certainly try with custom CSS as well! Have a look at Make CSS changes on Your Site for some tips.

[MrDavis97 (Miles Davis)]

I think I’m experiencing a bug on my site with regards to cookie lifespan in maintaining the expanded/collapsed state. What I want is for my site to remember when users collapse the banner and expand the banner, and keep it on whatever they have no matter what. And it works as expected when I stay on the home page or click on topics. However, as soon as I go to the admin panel, user settings, faq, about, tos, privacy, or docs, and then return to the home page, things get wacky, and sometimes the banner is the opposite of what it was set to, and sometimes even the chevron icon to indicate collapse or expand is in the incorrect orientation.

Here, the chevron icon is up:

But after clicking on docs, and then returning to the homepage, the chevron icon is in the opposite orientation.

This seems like pretty strange behavior…

[augustinecicc]

Just discovered that the Versatile Banner isn’t appearing on the login page for our forum (it’s a private forum) like it used to.

‘Display the banner for anonymous users’ is checked in the component settings

Looking at the html there is a div with class ‘banner-box’ inside a nest of divs with classes ‘emberX’ but nothing inside the div with class ‘banner-box’ - unlike the html for logged in users.

Any idea what could be going wrong?

[tshenry (Taylor)]

I just pushed a small update to the component.

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

@LeCoyote

when I uncheck the “display on desktop”… both desktop and mobile Versatile Banner disappear.

This should be fixed with the above. I’m really sorry it took so long to get a fix in place. Thanks again for your report!

@augustinecicc

Just discovered that the Versatile Banner isn’t appearing on the login page for our forum (it’s a private forum) like it used to.

You will need to add /login to the url must contain theme setting. See this post for more detail.

@MrDavis97

I think I’m experiencing a bug on my site with regards to cookie lifespan in maintaining the expanded/collapsed state.

This has been reported once or twice in the past. Unfortunately I have never able to reproduce it. I’ll try again when I get a chance using your exact steps and see if I have any luck.

[Dimitri_Nightmare (chris)]

I’m using versatile banner and i try to turn the banner into a giant link that redirect to another website
how can i do that ?

try to change-it via un script : '“api.changeWidgetSetting(‘banner-content-widget’, ‘href’, '<site_adresse>” but the versatille banner stop working

[augustinecicc]

@tshenry

You will need to add /login to the url must contain theme setting. See this post for more detail.

Thanks, that’s great. It’s working perfectly now!

[tshenry (Taylor)]

You might be able to do something like:

<script type="text/discourse-plugin" version="0.10.0">
  // Add the link to the heading
  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;
    }
  });
  
  // Add the link to the rest of the content
  api.reopenWidget("banner-content-widget", {
    html(attrs) {
      let bannerContent = this._super();
      bannerContent.tagName = "A";
      bannerContent.properties.href = "https://meta.discourse.org";
      return bannerContent;
    }
  });
</script>

And add a CSS rule to adjust the link color

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

Unless there’s specific functionality you need that the Versatile Banner offers, I wonder if you would be better off just making your own simple HTML banner in a new component. Rough example:

Add the following to the Common “After Header” section:

<a href="https://meta.discourse.org">
  <div class="custom-banner">
    <h2>This is a customer banner!</h2>
  </div>
</a>

and the following to the Common “CSS” section:

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

That would give you a simple banner that’s fully clickable:

[mercury233]

I’m installing this component from git, but it seems that I didn’t got the latest codes, FIX: Work with new sticky header and move away from deprecated $.cookie · discourse/discourse-versatile-banner@0939120 · GitHub wasn’t updated in my site https://ygobbs.com/.

[tshenry (Taylor)]

This is because you are running Discourse version 2.6.0.beta2. The commit you linked to requires 2.6.0.beta3 and above. You’ll notice that the commit you linked to has added a discourse-compatibility file to ensure you don’t update to a commit that is incompatible with your Discourse version.

[mercury233]

wow it is amazing that discourse will find elder version for me instead of preventing me to install the component. Thank you!

[gassim (Al-Gassim Sharaf Addin)]

Hi @tshenry
I want to install the component more than once so that I can use each component to give different categories different banners; therefore, I disabled the show on homepage and used the URL must contain, but this stops the main one which I use to display it in the homepage only. Would you either give me a different solution or is this a bug? Thanks! (: