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

[Discourse]

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

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

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

لافتة الترحيب (Welcome banner)

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

لتمكين لافتة الترحيب وتخصيصها، انتقل إلى منطقة المسؤول (admin area) وحدد الرابط المظهر (Appearance) > لافتة الترحيب (Welcome banner) في الشريط الجانبي.

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

• تم التمكين في السمات… (Enabled on themes…): يتيح لك هذا تحديد السمات النشطة التي يجب أن تعرض لافتة الترحيب.
• صورة الخلفية (Background image): قم بتحميل صورة لتكون بمثابة خلفية لافتة الترحيب الخاصة بك.
• لون النص (Text color): إذا كان لون النص الافتراضي الذي تتحكم فيه لوحة الألوان الخاصة بك يتعارض مع صورة الخلفية الخاصة بك، يمكنك تحديد لون جديد هنا. لاحظ أن هذا الإعداد ينطبق فقط عندما تكون قد قمت بتحميل صورة خلفية.
• رؤية الصفحة (Page visibility): يحدد هذا الصفحات التي تعرض لافتة الترحيب. افتراضيًا، يتم عرضها في صفحات القائمة العلوية (Top menu pages) (مما يعني الصفحات المحددة في إعداد الموقع القائمة العلوية (Top menu))، ولكن يمكنك التغيير إلى:
  • الصفحة الرئيسية فقط (Homepage only): تظهر لافتة الترحيب فقط على الصفحة الرئيسية للموقع (أي الصفحة الأولى المدرجة في إعداد الموقع القائمة العلوية (Top menu)).
  • صفحات الاكتشاف (Discovery pages): تظهر لافتة الترحيب في جميع صفحات القائمة العلوية (Top menu)، حتى لو لم يتم عرضها في القائمة العلوية الفعلية لموقعك (أي لم يتم تحديدها في الإعداد).
  • جميع الصفحات (All pages): تظهر لافتة الترحيب في جميع صفحات موقعك. هذا لا يوصى به بشكل عام لأنه يمكن أن يسبب فوضى بصرية في صفحات المواضيع تشتت انتباه الأعضاء عن القراءة والمشاركة.
• الموقع (Location): يحدد هذا المكان الذي تظهر فيه لافتة الترحيب على الصفحة. افتراضيًا، تظهر فوق محتوى الموضوع (Above topic content) ولكن يمكنك أيضًا تحديد أسفل رأس الموقع (Below site header). الفرق دقيق بعض الشيء، ويظهر في لقطات الشاشة أدناه:

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

• عنوان للأعضاء الجدد (Header for new members): التحية الأساسية التي تظهر للأعضاء الجدد في المرة الأولى التي يسجلون فيها الدخول إلى موقعك.
• عنوان للأعضاء المسجلين الدخول (Header for logged-in members): التحية الأساسية التي تظهر للأعضاء العائدين.
• عنوان للزوار المجهولين (Header for anonymous visitors): التحية الأساسية التي تظهر للأعضاء المجهولين (أي غير المسجلين الدخول).
• عنوان فرعي للأعضاء المسجلين الدخول (Subheader for logged-in members): سطر نص اختياري ثانوي أسفل العنوان يظهر للأعضاء العائدين.
• عنوان فرعي للزوار المجهولين (Subheader for anonymous visitors): سطر نص اختياري ثانوي أسفل العنوان يظهر للأعضاء المجهولين (أي غير المسجلين الدخول).
• نص نائب للحقل (Search placeholder): النص النائب المعروض في حقل البحث الخاص بلافتة الترحيب.

لافتة قابلة للإخفاء (Dismissible banner)

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

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

نصائح للافتات الفعالة القابلة للإخفاء:

• اجعل النص واضحًا وموجزًا
• الحد الأقصى للارتفاع هو 250 بكسل (يمكن تعديله عبر CSS)
• بالنسبة للنصوص الأطول، يمكن للمستخدمين التمرير داخل اللافتة
• فكر في إضافة رابط إلى موضوع عام ذي صلة لمزيد من المعلومات

لافتة دائمة (Permanent banner)

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

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

نصائح للافتات الدائمة:

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

لافتات متقدمة (Advanced banners)

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

لافتة رابط الترحيب (Welcome Link Banner)

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

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

اللافتة متعددة الاستخدامات (Versatile Banner)

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

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

تخصيص اللافتات باستخدام CSS

يمكنك تخصيص جميع أنواع اللافتات باستخدام CSS. لمزيد من المعلومات حول استخدام CSS لتخصيص موقع Discourse الخاص بك، راجع الدليل التمهيدي لاستخدام سمات Discourse (Beginner’s guide to using Discourse Themes).

[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 الخاص بي.
سأكون سعيدًا بتجربة أي إصلاحات تقرر تنفيذها.