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

[Discourse]

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

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

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

لافتة الترحيب

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

لتمكين لافتة الترحيب:

1. في منطقة المسؤول، انقر فوق الرابط المظهر > السمات والمكونات في الشريط الجانبي.
2. ابحث عن السمة النشطة وانقر فوق تحرير.
3. ابحث عن إعداد تمكين لافتة الترحيب وتأكد من تحديده.

سيؤدي هذا إلى تمكين لافتة الترحيب لهذه السمة. إذا كنت تقدم سمات متعددة قابلة للاختيار من قبل المستخدم، فستحتاج إلى تكرار هذه العملية لكل سمة.

تخصيص لافتة الترحيب

يمكنك تخصيص لافتة الترحيب لتغيير مظهرها في مجتمعك. في منطقة المسؤول، عند الانتقال إلى جميع إعدادات الموقع، يمكنك البحث عن “لافتة الترحيب” للعثور على خيارات التخصيص التالية:

• موقع لافتة الترحيب: يحدد هذا مكان ظهور لافتة الترحيب على الصفحة. افتراضيًا، تظهر “فوق محتوى الموضوع”، ولكن يمكنك أيضًا تحديد “أسفل رأس الموقع”. الفرق دقيق بعض الشيء، ويظهر في لقطات الشاشة أدناه:

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

• صورة لافتة الترحيب: قم بتحميل صورة لاستخدامها كخلفية للافتة الترحيب الخاصة بك.

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

1. في منطقة المسؤول، انقر فوق الرابط المظهر > نصوص الموقع في الشريط الجانبي.
2. ابحث عن سلسلة النص التي تريد تعديلها:

• js.welcome_banner.header.logged_in_members — التحية الأساسية المعروضة للأعضاء المسجلين في لافتة الترحيب.
• js.welcome_banner.header.anonymous_members — التحية الأساسية المعروضة للأعضاء المجهولين (أي غير المسجلين) في لافتة الترحيب.
• js.welcome_banner.subheader.logged_in_members — سطر نص اختياري ثانوي معروض للأعضاء المسجلين في لافتة الترحيب، أسفل الرأس.
• js.welcome_banner.subheader.anonymous_members — سطر نص اختياري ثانوي معروض للأعضاء المجهولين (أي غير المسجلين) في لافتة الترحيب، أسفل الرأس.
• js.welcome_banner.search_placeholder — النص النائب المعروض في حقل البحث للافتة الترحيب.

3. انقر فوق الزر تحرير.
4. قم بتحديث النص حسب الرغبة.
5. انقر فوق حفظ التغييرات.

لافتة قابلة للإغلاق

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

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

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

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

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

لافتة دائمة

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

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

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

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

لافتات متقدمة

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

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

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

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

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

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

• عرض اللافتة محدود بـ
  • المستخدمين المسجلين أو المجهولين
  • الجهاز المحمول أو سطح المكتب
  • الصفحة الرئيسية، قائمة الموضوعات، أو جميع الصفحات
• خيارات قابلة للإغلاق، قابلة للتوسيع، أو دائمة
• إعداد عرض المتصفح بالكامل
• إدارة الألوان
• تخصيص العناوين والأعمدة باستخدام 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 الخاص بي.
سأكون سعيدًا بتجربة أي إصلاحات تقرر تنفيذها.