لقد أضفت قوائم الرأس في Discourse باستخدام مكونات واجهة برمجة التطبيقات (API) الخاصة بإضافات Discourse. لكنني لا أعرف كيفية إضافة قائمة منسدلة مع هذه الرؤوس.
هل يمكننا إضافة قوائم منسدلة مع رؤوس Discourse باستخدام إضافة واجهة برمجة التطبيقات الخاصة بـ Discourse أو أي طرق أخرى؟
نتوقع مخرجات مثل ما يلي:
قد ترغب في إلقاء نظرة على مكون القالب هذا: Header Submenus. يتيح لك بناء قائمة رأسية تحتوي على قوائم فرعية. يمكنك إما استخدام هذا المكون مباشرة، أو الاطلاع عليه ككود مثال لكيفية إنشاء مكون خاص بك.
تم حل هذه المشكلة باستخدام إدراج HTML مخصص عبر أحداث واجهة برمجة التطبيقات (API) الخاصة بإضافة Discourse.
في البداية، قمت بتثبيت مكون “Custom Header Links” وقمت بتكوين الرؤوس بالطريقة المعتادة. ثم استخدمت أحداث واجهة برمجة التطبيقات الخاصة بـ Discourse لإدراج HTML مخصص في الرأس بمجرد تحميل عناصر DOM الخاصة بالرأس، كما هو موضح أدناه:
api.onPageChange(url => {
if ($('.header-buttons').length != 0 && i == 0) {
$('.custom-header-links .services-custom-header-links a').append('إدراج الأيقونات');
$('.header-buttons').prepend('إضافة عناصر وسم ul');
$('.resource-dropdown-menu').after('إضافة عنصر ul التالي باستخدام اسم فئة عنصر ul الأول المضاف');
i++;
}
});
هنا يمكنك إضافة القوائم الفرعية إلى عناصر DOM الخاصة بالرأس. لكن هذا يتسبب في مشكلة محاذاة. يجب علينا نقل المحاذاة عبر CSS. أيضًا، يتعين علينا كتابة دالة للنقر لفتح القائمة الفرعية وتغيير لون خلفية الرأس وما إلى ذلك. شكرًا 