sidebarMod
Hier ist mein Skript zum Modifizieren der Seitenleiste (erstmals erwähnt im Thema benutzerdefinierte Seitenleistenabschnitte).
Es verwendet Promises und MutationObserver, um die Seitenleiste auf Änderungen zu überwachen (z. B. durch Erweitern oder Zusammenklappen) und auf performante Weise Elemente hinzuzufügen/zu entfernen.
Ich denke, ich habe es flexibel genug für die meisten Anwendungsfälle gemacht. Sie können Links hinzufügen (positioniert durch Anhängen, Voranstellen oder Einfügen vor/nach vorhandenen Links), Abschnitte entfernen, Links entfernen und sogar ⋮Mehr entfernen.
Es ist sogar möglich, das Verhalten zu ändern, wenn der Betrachter ein Gast oder ein registrierter Benutzer ist. Ich verwende es zum Beispiel, um einen benutzerdefinierten Abschnitt zu entfernen, der für Gäste irrelevant ist.
Es ist eine gute Ergänzung zu den neuen benutzerdefinierten Seitenleistenabschnitten (aktiviert über SiteSetting.enable_custom_sidebar_sections), daher habe ich mir die Mühe gespart, eine Funktion zum Erstellen von Abschnitten hinzuzufügen.
Lassen Sie mich wissen, wenn Sie Fehler finden oder zusätzliche Funktionen benötigen.
Installation
Erstellen Sie eine neue Theme-Komponente und fügen Sie sie in Head ein. Denken Sie daran, sie für Ihr Theme zu aktivieren.
Konfiguration
Sie müssen nur injections und removals am Anfang bearbeiten.
Ich schlage vor, es zunächst so zu belassen, wie es ist, damit Sie sehen können, was es tut. Ich habe versucht, die Beispielkonfiguration anschaulich zu gestalten.
Ich persönlich verwende es wie folgt:
/**
* Link-Positionierer:
* (bool) prepend, append: Link voranstellen/anhängen an Abschnitt
* (str) addBeforeKebab, addAfterKebab: Link vor/nach vorhandenem Link hinzufügen
* Link-Sichtbarkeit:
* (str) injectFor: Link nur für 'anon'-Benutzer, nur für 'registered'-Benutzer oder für 'both' einfügen (Standard: '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 }
]
}
],
/**
* Abschnittsoptionen:
* (str) removeFor: Abschnitt nur für 'anon'-Benutzer, nur für 'registered'-Benutzer oder für 'both' entfernen (Standard: 'none')
* (str) removeMore: '⋮Mehr' nur für 'anon'-Benutzer, nur für 'registered'-Benutzer oder für 'both' entfernen (Standard: 'none')
* nützlich, wenn Sie wissen, dass er aufgrund von Link-Entfernungen leer ist
* Link-Entfernungsoptionen:
* (str) removeFor: Link nur für 'anon'-Benutzer, nur für 'registered'-Benutzer oder für 'both' entfernen (Standard: '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'
}
],
Fragen von mir
Ich habe untersucht, wie dies mit der API gemacht werden kann, aber ich glaube nicht, dass genug implementiert ist.
Wenn ich dies auf “die richtige Weise” tun wollte, anstatt Dinge in das DOM zu hacken, wie würde ich das tun? Müsste ich ein Plugin mit Ruby erstellen? Jeder Hinweis wäre willkommen.