sidebarMod
هذا هو البرنامج النصي الخاص بي لتعديل الشريط الجانبي (تم ذكره لأول مرة في موضوع أقسام الشريط الجانبي المخصصة).
يستخدم الوعود و MutationObserver لمراقبة الشريط الجانبي بحثًا عن التغييرات (مثل التوسيع أو الانهيار) وإضافة/إزالة العناصر بطريقة فعالة.
أعتقد أنني جعلته مرنًا بما يكفي لمعظم حالات الاستخدام. يمكنك إضافة روابط (يتم تحديد موقعها عن طريق الإلحاق، أو الإضافة، أو الإدراج قبل/بعد الروابط الموجودة)، وإزالة الأقسام، وإزالة الروابط، وحتى إزالة ⋮More.
حتى أنه من الممكن تغيير السلوك إذا كان المشاهد ضيفًا أو مستخدمًا مسجلاً. على سبيل المثال، أستخدمه لإزالة قسم مخصص غير ذي صلة بالضيوف.
إنه مكمل جيد لميزة أقسام الشريط الجانبي المخصصة الجديدة (الممكّنة عبر SiteSetting.enable_custom_sidebar_sections)، لذلك لم أزعج نفسي بإضافة ميزة لإنشاء أقسام.
أخبرني إذا وجدت أخطاء أو احتجت إلى ميزات إضافية.
التثبيت
قم بإنشاء مكون سمة جديد والصقه في Head. تذكر تمكينه لسمتك.
التكوين
تحتاج فقط إلى تعديل injections و removals بالقرب من الأعلى.
أقترح تركه كما هو في البداية حتى ترى ما يفعله. حاولت جعل التكوين المثال توضيحيًا.
أنا شخصياً أستخدمه كالتالي:
/**
* محددات موقع الروابط:
* (boolean) prepend, append: إضافة رابط في البداية/النهاية للقسم
* (string) addBeforeKebab, addAfterKebab: إضافة رابط قبل/بعد الرابط الموجود
* رؤية الرابط:
* (string) injectFor: حقن الرابط فقط للمستخدمين 'anon'، أو للمستخدمين 'registered' فقط، أو لكليهما (الافتراضي: 'both')
*/
injections: [
{ sectionSelector: '.sidebar-section[data-section-name="community"]',
links: [
{ text: 'Guidelines', kebab: 'guidelines', title: 'Guidelines for using this site', href: '/guidelines', icon: 'gavel', addBeforeKebab: 'faq', injectFor: 'registered' }
]
},
{ sectionSelector: '.sidebar-section[data-section-name="categories"]',
links: [
{ text: 'Site Map', kebab: 'site-map', title: 'Site Map', href: '/t/32', icon: 'map-marker-alt', prepend: true }
]
}
],
/**
* خيارات القسم:
* (string) removeFor: إزالة القسم فقط للمستخدمين 'anon'، أو للمستخدمين 'registered' فقط، أو لكليهما (الافتراضي: 'none')
* (string) removeMore: إزالة '⋮More' فقط للمستخدمين 'anon'، أو للمستخدمين 'registered' فقط، أو لكليهما (الافتراضي: 'none')
* مفيد إذا كنت تعرف أنه فارغ بسبب إزالة الروابط
* خيارات إزالة الروابط:
* (string) removeFor: إزالة الرابط فقط للمستخدمين 'anon'، أو للمستخدمين 'registered' فقط، أو لكليهما (الافتراضي: 'both')
*/
removals: [
{ sectionSelector: '.sidebar-section[data-section-name="community"]',
links: [{ kebab: 'badges', removeFor: 'anon' }]
},
{ sectionSelector: '.sidebar-custom-sections .sidebar-section[data-section-name="my-topics"]',
removeFor: 'anon'
}
],
أسئلة مني
لقد حققت في القيام بذلك باستخدام واجهة برمجة التطبيقات، ولكنني لا أعتقد أن ما يكفي من الأشياء تم تنفيذه.
إذا كنت أرغب في القيام بذلك “بالطريقة الصحيحة” بدلاً من اختراق DOM، فكيف أفعل ذلك؟ هل سأحتاج إلى إنشاء مكون إضافي باستخدام Ruby؟ أي تلميحات ستكون موضع تقدير.