إنشاء شريط إعلاني للعرض في أعلى موقعك

[Discourse]

يشرح هذا الدليل طرقًا مختلفة لإنشاء شارات (Banners) مخصّصة على موقعك في Discourse، بدءًا من الشارات القابلة للإغلاق البسيطة وصولًا إلى خيارات أكثر تقدمًا.

مستوى المستخدم المطلوب: مشرف (للشارة القابلة للإغلاق)، مدير

تُعدّ الشارات وسيلة فعّالة للتواصل مع زوار موقعك وإبلاغهم بالمعلومات المهمة. سيأخذك هذا الدليل خطوة بخطوة عبر طرق مختلفة لإنشاء الشارات وتخصيصها على موقعك في Discourse.

شارة الترحيب

ترحب شارة الترحيب بالأعضاء الجدد والعائدين برسالة ودودة وشريط بحث بارز، مما يسهّل على الزوار العثور بسرعة على المحتوى الذي يبحثون عنه.

لتفعيل شارة الترحيب وتخصيصها، انتقل إلى منطقة الإدارة واختر رابط المظهر > شارة الترحيب في الشريط الجانبي.

في هذه المنطقة، ستجد الإعدادات التالية:

• مفعّلة على القوالب…: يتيح لك هذا تحديد أي من قوالبك النشطة يجب أن تعرض شارة الترحيب.
• صورة الخلفية: ارفع صورة لتعمل كخلفية لشارة الترحيب الخاصة بك.
• لون النص: إذا كان لون النص الافتراضي الذي يتحكم فيه لوحة الألوان الخاصة بك يتعارض مع صورة الخلفية، يمكنك اختيار لون جديد هنا. لاحظ أن هذا الإعداد ينطبق فقط عند رفع صورة خلفية.
• إظهار الصفحة: يحدد هذا الصفحات التي تعرض شارة الترحيب. افتراضيًا، تظهر على صفحات القائمة العلوية (أي الصفحات المحددة في إعداد الموقع القائمة العلوية)، لكن يمكنك تغييرها إلى:
  • الصفحة الرئيسية فقط: تظهر شارة الترحيب فقط على الصفحة الرئيسية للموقع (أي الصفحة الأولى المدرجة في إعداد الموقع القائمة العلوية).
  • صفحات الاكتشاف: تظهر شارة الترحيب على جميع صفحات القائمة العلوية، حتى لو لم تظهر في القائمة العلوية الفعلية لموقعك (أي غير محددة في الإعداد).
  • جميع الصفحات: تظهر شارة الترحيب على جميع صفحات موقعك. بشكل عام، لا يُنصح بهذا لأنه قد يسبب ازدحامًا بصريًا على صفحات المواضيع يشتت الأعضاء عن القراءة والمشاركة.
• الموقع: يحدد هذا المكان الذي تظهر فيه شارة الترحيب على الصفحة. افتراضيًا، تظهر فوق محتوى الموضوع، لكن يمكنك أيضًا اختيار تحت ترويسة الموقع. الفرق بسيط إلى حد ما، وهو موضح في لقطات الشاشة أدناه:

يمكنك أيضًا تخصيص نص شارة الترحيب لتغيير الترحيب وإضافة المزيد من النص التوضيحي إلى شارة الترحيب.

• العنوان للأعضاء الجدد: الترحيب الرئيسي المعروض للأعضاء الجدد عند تسجيل دخولهم الأول لموقعك.
• العنوان للأعضاء المسجلين: الترحيب الرئيسي المعروض للأعضاء العائدين.
• العنوان للزوار المجهولين: الترحيب الرئيسي المعروض للأعضاء المجهولين (أي غير المسجلين).
• العنوان الفرعي للأعضاء المسجلين: سطر ثانوي اختياري من النص تحت العنوان المعروض للأعضاء العائدين.
• العنوان الفرعي للزوار المجهولين: سطر ثانوي اختياري من النص تحت العنوان المعروض للأعضاء المجهولين (أي غير المسجلين).
• نص حقل البحث: النص الظاهر في حقل البحث بشارة الترحيب.

الشارة القابلة للإغلاق

الشارة القابلة للإغلاق هي إشعار مؤقت يمكن للمستخدمين إغلاقه. إليك كيفية إنشاء واحدة:

1. أنشئ موضوعًا أو انتقل إلى موضوع في أي فئة عامة. سيكون المنشور الأصلي (OP) في أعلى الموضوع هو مصدر شارتك.
2. افتح خيارات الإدارة بالنقر على أيقونة المفتاح على يمين أو أسفل الموضوع.
3. اختر “تثبيت الموضوع…” (Pin Topic…)
4. في النافذة الجديدة، اختر تحويل إلى موضوع شارة (Make Banner Topic)

ستظهر الشارة الآن في أعلى موقعك. سيرى المستخدمون شارة قابلة للإغلاق. سيرى الموظفون (Staff) أيضًا رابطًا لتحرير الموضوع المصدر.

نصائح للشارات القابلة للإغلاق الفعّالة:

• اجعل النص واضحًا وموجزًا
• الارتفاع الأقصى هو 20vh (قابل للتعديل عبر CSS)
• للنصوص الأطول، يمكن للمستخدمين التمرير داخل الشارة
• فكّر في إضافة رابط إلى موضوع عام ذي صلة للحصول على مزيد من المعلومات
• إذا كنت ترغب في إخفاء الموضوع المستخدم كشارة، يمكنك إلغاء إعداده (unlist) باستخدام قائمة إدارة الموضوع

الشارة الدائمة

لإنشاء شارة تكون مرئية دائمًا ولا يمكن للمستخدمين إغلاقها:

1. في إعدادات موقعك، ابحث عن global_notice.
2. أدخل نص شارتك أو HTML في هذا الحقل.

نصائح للشارات الدائمة:

• تُستخدم هذه النوعية من الشارات عادةً للتواصلات العاجلة للموقع، لكن يمكن استخدامها لأي رسالة دائمة
• هذه الشارة مرئية للجميع، بما في ذلك المستخدمين المجهولين على المواقع التي تتطلب تسجيل الدخول (login_required)
• يمكن إزالة الشارة عن طريق إعادة تعيين إعداد الموقع global notice

شارات متقدمة

يمكنك بناء شارات أكثر تقدمًا باستخدام مكوّن قالب (Theme Component). يرجى ملاحظة أن هذه مكوّنات القوالب قد تتعارض مع ميزة شارة الترحيب الأساسية.

شارة رابط الترحيب

يتيح لك هذا المكوّن إضافة نص مخصص و1-4 روابط إلى شارتك. يوفر خيارات تخصيص متنوعة، بما في ذلك:

• اختيار مكان عرض الشارة (الصفحة الرئيسية، قوائم المواضيع، أو جميع الصفحات)
• إضافة روابط بأيقونات Font Awesome
• تقييد الإظهار بناءً على مستويات ثقة المستخدم
• تخصيص صور الخلفية أو الألوان
• ضبط ألوان النص والأيقونات

الشارة متعددة الاستخدامات

أحد أكثر المكونات شعبيةً وحسن الصيانة، توفر الشارة متعددة الاستخدامات خيارات تخصيص واسعة من خلال الواجهة، بما في ذلك:

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

تخصيص الشارات باستخدام CSS

يمكنك تخصيص جميع أنواع الشارات باستخدام CSS. لمزيد من المعلومات حول استخدام CSS لتخصيص موقعك في Discourse، راجع دليل المبتدئين لاستخدام قوالب Discourse.

[leopedrini (Leonardo Zanoni Pedrini)]

@Discourse

رابط المظهر > السمات والمكونات في الشريط الجانبي.

لم أتمكن من العثور على هذا الخيار… هل هي ميزة جديدة في الإصدار التجريبي؟

[leopedrini (Leonardo Zanoni Pedrini)]

@leopedrini

لم أتمكن من العثور على هذا الخيار… هل هي ميزة جديدة في الإصدار التجريبي؟

تحديث: بعد التحديث من 3.4.6 إلى 3.5.0، أصبح مرئيًا:

[RBoy]

@Discourse

js.welcome_banner.search — النص النائب المعروض في حقل البحث باللافتة الترحيبية.

هناك خطأ في الإصدار 3.6.0.beta1-dev (e44347414a)

تغيير نص الموقع هذا ليس له أي تأثير على النص الموجود في شريط البحث، فهو لا يزال يعرض دائمًا بحث. تم الاختبار على نظام التشغيل Windows 10 x64 باستخدام متصفح Chrome.

[awesomerobot (Kris)]

جارٍ العمل على إصلاح هذا هنا: DEV: use welcome_banner.search placeholder in search banner by awesomerobot · Pull Request #34523 · discourse/discourse · GitHub

[RBoy]

رائع، شكراً لك - لقد أصلح ذلك!

[tknospdr (David Muszynski)]

لدي مشكلة في صورة الخلفية لشعار الترحيب.
أنا أستخدم Cloudflare R2 S3 buckets للتخزين للكائنات في الموقع المعني.
عندما أقوم بتحميل صورة خلفية في قسم المسؤول، تظهر بشكل صحيح، وإذا نقرت لعرضها بالحجم الكامل، فإنها تعمل. وإذا قمت بالنقر بزر الماوس الأيمن وعرض الصورة في علامة تبويب جديدة، فإنها تعمل وباستخدام عنوان URL الخاص بالمخزن العام:
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

لكن ما يتم حقنه في CSS هو عنوان URL هذا:
https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

لدي موقع آخر يستخدم التخزين المحلي وتعمل صورة الخلفية للشعار بشكل صحيح.

هل هذا خطأ في الكود، أم أنني أفعل شيئًا خاطئًا؟

بعد البحث أكثر، يبدو أن هذا الـ CSS يتحكم في صورة الخلفية:

إذا قمت باستبدال عنوان URL يدويًا في الفاحص، فإنه يعمل.
حاولت تجاوز ذلك باستخدام:

.custom-search-banner-wrap .welcome-banner__wrap {
  background-image: "eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg";
}

لكن هذا لا يعمل. لا يزال يبدو وكأنه خطأ.

[yuriy (Yuriy Kurant)]

@tknospdr، لست متأكدًا تمامًا من المشكلة التي تواجهها؟

لقد تحققت من موقعك https://eu.technospider.com، وأرى أن صورة الخلفية معروضة كما هو متوقع:

[tknospdr (David Muszynski)]

أعتقد أنني نجحت أخيرًا في تجاوز CSS. المشكلة هي أنه لا ينبغي أن يتطلب تجاوزًا.

يبدو أن رمز اللافتة يستخدم الأصل الخطأ إذا كنت تستضيف باستخدام Cloudflare S3.

[yuriy (Yuriy Kurant)]

ما هو تجاوزك بالضبط؟

من جانبنا، يمكننا التأكد من تطبيق مسار URL فقط /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg في CSS:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

أعتقد أن هذه القاعدة ستعمل معك دون الحاجة إلى أي تجاوزات؟

[tknospdr (David Muszynski)]

@yuriy

ما هو التجاوز الخاص بك بالضبط؟

التجاوز بالكامل هو:

.welcome-banner {
  background-image: url(//eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg);
}
.--with-bg-img .welcome-banner__wrap {
  border-radius: 20px;
}
.welcome-banner__title {
  font-size: var(--font-up-4);
  max-width: 900px;
}
.welcome-banner__subheader {
  font-size: 17px;
  padding-bottom: 20px;
}

من جانبنا، يمكننا التأكد من تطبيق مسار URL فقط /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg في CSS:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

أعتقد أن هذه القاعدة ستعمل معك دون الحاجة إلى أي تجاوزات؟

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

[Frenky]

مرحباً بالجميع،

مع آخر تحديث لـ Discourse، لم تعد مكونة الثيم Advanced Search Banner مدعومة ويبدو أنها لم تعد تتم صيانتها. بدلاً من ذلك، يوجد الآن إضافة Welcome Banner الرسمية.

المشكلة هي أنه في المكونة الجديدة، يمكنك حاليًا تحديد صورة خلفية واحدة فقط. باستخدام مكونة Advanced Search Banner القديمة، كان من الممكن تحديد صور خلفية مختلفة لوضع الإضاءة (Light-Mode) ووضع الظلام (Dark-Mode)، وهو أمر مثالي بالتأكيد للتخطيطات والثيمات المختلفة.

سؤالي للمجتمع:

• هل هناك طريقة لمحاكاة هذه الوظيفة في Welcome Banner؟

• هل قام أي شخص بتطبيق إضافة أو حل بديل لاستخدام صور خلفية مختلفة لوضعي الإضاءة والظلام؟

• هل يخطط المطورون لتنفيذ ذلك في المستقبل؟

سأكون سعيدًا بأي إشارات أو نصائح أو أفكار!

شكرًا مقدمًا!