يشرح هذا الدليل طرقًا مختلفة لإنشاء وتخصيص اللافتات على موقع Discourse الخاص بك، بدءًا من اللافتات البسيطة القابلة للإغلاق وصولًا إلى الخيارات الأكثر تقدمًا.
مستوى المستخدم المطلوب: مشرف (لافتة قابلة للإغلاق)، مسؤول
اللافتات هي طريقة فعالة لإيصال المعلومات الهامة لزوار موقعك. سيرشدك هذا الدليل خلال طرق متنوعة لإنشاء وتخصيص اللافتات على موقع Discourse الخاص بك.
لافتة الترحيب
ترحب لافتة الترحيب بالأعضاء الجدد والعائدين برسالة ودية وشريط بحث بارز، مما يسهل على الزوار العثور بسرعة على المحتوى الذي يبحثون عنه.
لتمكين وتخصيص لافتة الترحيب، انتقل إلى منطقة المسؤول وحدد الرابط المظهر > لافتة الترحيب في الشريط الجانبي.
في هذا القسم، ستجد الإعدادات التالية:
- ممكّن على السمات…: يتيح لك هذا تحديد السمات النشطة التي يجب أن تعرض لافتة الترحيب.
- صورة الخلفية: قم بتحميل صورة لتعمل كخلفية لافتة الترحيب الخاصة بك.
- لون النص: إذا كان لون النص الافتراضي الذي تتحكم فيه لوحة الألوان الخاصة بك يتعارض مع صورة الخلفية الخاصة بك، يمكنك تحديد لون جديد هنا. لاحظ أن هذا الإعداد ينطبق فقط عندما تكون قد قمت بتحميل صورة خلفية.
- رؤية الصفحة: يحدد هذا الصفحات التي تعرض لافتة الترحيب. افتراضيًا، يتم عرضها على
صفحات القائمة العلوية(مما يعني الصفحات المحددة في إعداد الموقعالقائمة العلوية)، ولكن يمكنك التغيير إلى:
الصفحة الرئيسية فقط: تظهر لافتة الترحيب فقط على الصفحة الرئيسية للموقع (أي الصفحة الأولى المدرجة في إعداد الموقعالقائمة العلوية).صفحات الاكتشاف: تظهر لافتة الترحيب في جميع صفحاتالقائمة العلوية، حتى لو لم يتم عرضها في القائمة العلوية الفعلية لموقعك (أي لم يتم تحديدها في الإعداد).جميع الصفحات: تظهر لافتة الترحيب في جميع صفحات موقعك. هذا لا يوصى به بشكل عام لأنه قد يسبب تشويشًا بصريًا على صفحات المواضيع يصرف الأعضاء عن القراءة والمشاركة.- الموقع: يحدد هذا المكان الذي تظهر فيه لافتة الترحيب على الصفحة. افتراضيًا، تظهر
فوق محتوى الموضوعولكن يمكنك أيضًا تحديدأسفل رأس الموقع. الفرق دقيق بعض الشيء، ويظهر في لقطات الشاشة أدناه:يمكنك أيضًا تخصيص نص لافتة الترحيب لتغيير التحية وإضافة المزيد من النص التوضيحي إلى لافتة الترحيب.
- عنوان للأعضاء الجدد: التحية الأساسية المعروضة للأعضاء الجدد في المرة الأولى التي يسجلون فيها الدخول إلى موقعك.
- عنوان للأعضاء المسجلين: التحية الأساسية المعروضة للأعضاء العائدين.
- عنوان للزوار المجهولين: التحية الأساسية المعروضة للأعضاء المجهولين (أي غير المسجلين الدخول).
- عنوان فرعي للأعضاء المسجلين: سطر نص اختياري ثانوي أسفل العنوان المعروض للأعضاء العائدين.
- عنوان فرعي للزوار المجهولين: سطر نص اختياري ثانوي أسفل العنوان المعروض للأعضاء المجهولين (أي غير المسجلين الدخول).
- نص نائب للبحث: النص النائب المعروض في حقل البحث في لافتة الترحيب.
لافتة قابلة للإغلاق
اللافتة القابلة للإغلاق هي إشعار مؤقت يمكن للمستخدمين إغلاقه. إليك كيفية إنشاء واحدة:
- أنشئ موضوعًا أو انتقل إليه في أي فئة عامة. سيكون المنشور الأصلي (OP) في أعلى الموضوع هو مصدر لافتتك.
- افتح خيارات المسؤول بالنقر على أيقونة المفتاح (المفك) على اليمين أو في أسفل الموضوع.
- حدد “تثبيت الموضوع…”
- في النافذة الجديدة، اختر
جعل الموضوع لافتة
ستظهر اللافتة الآن في الجزء العلوي من موقعك. سيشاهد المستخدمون لافتة قابلة للإغلاق. سيشاهد الموظفون أيضًا رابطًا لتعديل الموضوع المصدر.
نصائح للافتات الفعالة القابلة للإغلاق:
- اجعل النص واضحًا وموجزًا
- الحد الأقصى للارتفاع هو 20vh (قابل للتعديل عبر CSS)
- بالنسبة للنص الأطول، يمكن للمستخدمين التمرير داخل اللافتة
- فكر في إضافة رابط لموضوع عام ذي صلة لمزيد من المعلومات
- إذا كنت ترغب في إخفاء الموضوع المستخدم كلافتة، يمكنك إزالته من القائمة باستخدام قائمة المسؤول الخاصة بالموضوع
لافتة دائمة
لإنشاء لافتة تكون مرئية دائمًا ولا يمكن للمستخدمين إغلاقها:
- في إعدادات موقعك، ابحث عن
global_notice.- أدخل نص اللافتة أو HTML الخاص بك في هذا الحقل.
- يُستخدم هذا النوع من اللافتات عادةً للاتصالات العاجلة بالموقع ولكنه يمكن استخدامه لأي رسالة دائمة
- هذه اللافتة مرئية للجميع، بما في ذلك المستخدمون المجهولون على المواقع التي تتطلب تسجيل الدخول (
login_required)- يمكن إزالة اللافتة عن طريق إعادة تعيين إعداد الموقع
global noticeاللافتات المتقدمة
يمكنك إنشاء لافتات أكثر تقدمًا باستخدام مكون سمة. يرجى ملاحظة أن مكونات السمة هذه قد تتعارض مع ميزة لافتة الترحيب الأساسية.
لافتة رابط الترحيب
يسمح لك هذا المكون بإضافة نص مخصص و 1-4 روابط إلى لافتتك. يوفر خيارات تخصيص مختلفة، بما في ذلك:
- اختيار مكان عرض اللافتة (الصفحة الرئيسية، قوائم المواضيع، أو جميع الصفحات)
- إضافة روابط بأيقونات Font Awesome
- تحديد الرؤية بناءً على مستويات الثقة للمستخدم
- تخصيص صور الخلفية أو الألوان
- ضبط ألوان النص والأيقونة
اللافتة متعددة الاستخدامات
أحد المكونات الأكثر شيوعًا والمُصانة جيدًا، يوفر Versatile Banner خيارات تخصيص واسعة عبر الواجهة، بما في ذلك:
- عرض اللافتة مقتصر على
- المستخدمين المسجلين الدخول أو المجهولين
- جهاز الجوال أو سطح المكتب
- الصفحة الرئيسية، قائمة المواضيع، أو جميع الصفحات
- خيارات قابلة للإغلاق، أو قابلة للتوسيع، أو دائمة
- إعداد عرض بملء عرض المتصفح
- إدارة الألوان
- تخصيص العنوان والأعمدة باستخدام HTML
تخصيص اللافتات باستخدام CSS
يمكنك تخصيص جميع أنواع اللافتات باستخدام CSS. لمزيد من المعلومات حول استخدام CSS لتخصيص موقع Discourse الخاص بك، راجع الدليل التمهيدي لاستخدام سمات Discourse.
لم أتمكن من العثور على هذا الخيار… هل هي ميزة جديدة في الإصدار التجريبي؟
هناك خطأ في الإصدار 3.6.0.beta1-dev (e44347414a)
تغيير نص الموقع هذا ليس له أي تأثير على النص الموجود في شريط البحث، فهو لا يزال يعرض دائمًا بحث. تم الاختبار على نظام التشغيل Windows 10 x64 باستخدام متصفح Chrome.
جارٍ العمل على إصلاح هذا هنا: DEV: use welcome_banner.search placeholder in search banner by awesomerobot · Pull Request #34523 · discourse/discourse · GitHub
رائع، شكراً لك - لقد أصلح ذلك!
لدي مشكلة في صورة الخلفية لشعار الترحيب.
أنا أستخدم 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";
}
لكن هذا لا يعمل. لا يزال يبدو وكأنه خطأ.
@tknospdr، لست متأكدًا تمامًا من المشكلة التي تواجهها؟
لقد تحققت من موقعك https://eu.technospider.com، وأرى أن صورة الخلفية معروضة كما هو متوقع:
أعتقد أنني نجحت أخيرًا في تجاوز CSS. المشكلة هي أنه لا ينبغي أن يتطلب تجاوزًا.
يبدو أن رمز اللافتة يستخدم الأصل الخطأ إذا كنت تستضيف باستخدام Cloudflare S3.
ما هو تجاوزك بالضبط؟
من جانبنا، يمكننا التأكد من تطبيق مسار URL فقط /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg في CSS:
background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)
أعتقد أن هذه القاعدة ستعمل معك دون الحاجة إلى أي تجاوزات؟
التجاوز بالكامل هو:
.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;
}
في واجهة المستخدم، كل ما يمكنني فعله هو تحميل صورة، لذلك أعتقد أن تغيير الكود مطلوب لإزالة بيان تجاوز CSS الخاص بي.
سأكون سعيدًا بتجربة أي إصلاحات تقرر تنفيذها.
مرحباً بالجميع،
مع آخر تحديث لـ Discourse، لم تعد مكونة الثيم Advanced Search Banner مدعومة ويبدو أنها لم تعد تتم صيانتها. بدلاً من ذلك، يوجد الآن إضافة Welcome Banner الرسمية.
المشكلة هي أنه في المكونة الجديدة، يمكنك حاليًا تحديد صورة خلفية واحدة فقط. باستخدام مكونة Advanced Search Banner القديمة، كان من الممكن تحديد صور خلفية مختلفة لوضع الإضاءة (Light-Mode) ووضع الظلام (Dark-Mode)، وهو أمر مثالي بالتأكيد للتخطيطات والثيمات المختلفة.
سؤالي للمجتمع:
-
هل هناك طريقة لمحاكاة هذه الوظيفة في Welcome Banner؟
-
هل قام أي شخص بتطبيق إضافة أو حل بديل لاستخدام صور خلفية مختلفة لوضعي الإضاءة والظلام؟
-
هل يخطط المطورون لتنفيذ ذلك في المستقبل؟
سأكون سعيدًا بأي إشارات أو نصائح أو أفكار!
شكرًا مقدمًا!