Ich hoffe, Sie können die Funktion für versteckte Verzeichnisse hinzufügen.
Benutzerdefinierte Plugins
Dies wurde unter Bezugnahme auf Ihr Plugin erstellt, hauptsächlich wurde ein weiterer Button hinzugefügt und dann JavaScript für das dynamische Rendering verwendet.
discourse-----------------------hide-toc (1).zip (3,3 KB)
CSS / JavaScript
css
// Stile für das Verzeichnis, das im Editor angezeigt wird
// Definiert die Stile für die Anzeige des Verzeichnisses in der Editor-Vorschau
.edit-title .d-editor-preview [data-theme-toc="false"],
body.toc-for-replies-enabled .d-editor-preview [data-theme-toc="false"] {
// Setzt die Hintergrundfarbe auf die dritte Farbe des Themas
background: var(--tertiary);
// Setzt die Textfarbe auf die zweite Farbe des Themas
color: var(--secondary);
// Setzt das Element auf "sticky" Positionierung, damit es beim Scrollen am oberen Rand des Ansichtsfensters bleibt
position: sticky;
// Setzt z-index auf 1, um sicherzustellen, dass dieses Element über anderen Elementen angezeigt wird
z-index: 1;
// Setzt den Abstand des Elements vom oberen Rand des Ansichtsfensters auf 0
top: 0;
// Setzt die Höhe des Elements auf 30 Pixel
height: 30px;
// Setzt die Anzeige des Elements auf Flexbox, um den Inhalt einfach auszurichten
display: flex;
// Zentriert die Elemente vertikal in der Flexbox
align-items: center;
// Zentriert die Elemente horizontal in der Flexbox
justify-content: center;
// Fügt mit dem Pseudo-Element :before Inhalt vor dem Element ein
&:before {
// Setzt den eingefügten Inhalt auf den Wert der Variablen $composer_toc_text
// content: "#{$composer_toc_text}";
content: "Dieses Thema wird kein Verzeichnis anzeigen";
}
}
JavaScript
<script>
// Definiert eine Funktion zum Festlegen des Stils eines Elements
function setStyle(selector, styles) {
// Sucht das Element mit dem angegebenen Selektor
const element = document.querySelector(selector);
// Wenn das Element gefunden wird, werden die Stile angewendet
if (element) {
Object.assign(element.style, styles);
}
}
// Definiert eine Funktion, die prüft, ob der Seiteninhalt ein bestimmtes TOC-Markup enthält
function checkForTOCMarkup() {
// Prüft, ob der Seiteninhalt eine bestimmte Zeichenkette enthält
if (document.body.innerHTML.includes('<div data-theme-toc="false">')) {
// Versteckt das Zeitleistenelement
setStyle('.with-timeline', { display: 'none' });
// Ändert die Spaltenstile des Beitragscontainers auf 100%
setStyle('.container.posts', { gridTemplateColumns: '100%' });
// Setzt die Breite des Thema-Inhalts auf 100%
setStyle('.topic-body', { width: '100%' });
// Setzt die maximale Breite und den linken Innenabstand der Thema-Karte
setStyle('.topic-map', { maxWidth: '100%', paddingLeft: '0px' });
// Versteckt das Thema-Avatar-Element
setStyle('.topic-avatar', { display: 'none' });
// Setzt die maximale Breite und den linken Innenabstand des Lücken-Elements
setStyle('.gap', { maxWidth: '100%', paddingLeft: '0px' });
// Setzt die maximale Breite und den linken Innenabstand der Thema-Fußzeilen-Schaltflächen
setStyle('#topic-footer-buttons', { maxWidth: '100%', paddingLeft: '0px' });
} else {
// Denken Sie daran, nicht den Standardcode vor der Änderung zu verwenden, da dies die mobile Ansicht beeinträchtigt. Lassen Sie das System die automatische Verarbeitung durchführen.
// setStyle('.topic-body', { width: 'calc(var(--topic-body-width) + var(--topic-body-width-padding)*2)' }); // Wiederherstellung der Standardbreite
setStyle('.with-timeline', { display: '' }); // Standardstil wiederherstellen
setStyle('.container.posts', { gridTemplateColumns: '' }); // Standard-Spaltenstil wiederherstellen
setStyle('.topic-body', { width: '' }); // Standardbreite wiederherstellen
setStyle('.topic-map', { maxWidth: '', paddingLeft: '' }); // Standardstil wiederherstellen
setStyle('.topic-avatar', { display: '' }); // Standardanzeige wiederherstellen
setStyle('.gap', { maxWidth: '', paddingLeft: '' }); // Standardstil wiederherstellen
setStyle('#topic-footer-buttons', { maxWidth: '', paddingLeft: '' }); // Standardstil wiederherstellen
}
}
// Erstellt eine Beobachterinstanz, um DOM-Änderungen zu überwachen
const observer = new MutationObserver(checkForTOCMarkup);
// Konfiguriert die Beobachteroptionen, um Änderungen an untergeordneten und allen nachfolgenden Knoten zu überwachen
const config = { childList: true, subtree: true };
// Beginnt die Beobachtung von Änderungen im Dokument
observer.observe(document.body, config);
// Führt sofort eine Prüfung durch, wenn die Seite geladen wird
checkForTOCMarkup();
</script>
