Spero che tu possa aggiungere la funzione della directory nascosta.
Plugin personalizzati
Questo è realizzato con riferimento al tuo plugin, aggiungendo principalmente un altro pulsante e quindi utilizzando JavaScript per il rendering dinamico.
discourse-----------------------hide-toc (1).zip (3,3 KB)
CSS / JavaScript
css
// Stili relativi alla directory visualizzati nell'editor
// Definisce gli stili per visualizzare la directory nell'anteprima dell'editor
.edit-title .d-editor-preview [data-theme-toc="false"],
body.toc-for-replies-enabled .d-editor-preview [data-theme-toc="false"] {
// Imposta il colore di sfondo sul terzo colore del tema
background: var(--tertiary);
// Imposta il colore del testo sul secondo colore del tema
color: var(--secondary);
// Imposta l'elemento su posizione sticky, in modo che rimanga in cima alla viewport durante lo scorrimento
position: sticky;
// Imposta z-index a 1, per garantire che questo elemento venga visualizzato sopra altri elementi
z-index: 1;
// Imposta la distanza dell'elemento dalla parte superiore della viewport a 0
top: 0;
// Imposta l'altezza dell'elemento a 30 pixel
height: 30px;
// Imposta il display dell'elemento come flexbox, per facilitare l'allineamento del contenuto
display: flex;
// Allinea verticalmente al centro gli elementi nel flexbox
align-items: center;
// Allinea orizzontalmente al centro gli elementi nel flexbox
justify-content: center;
// Utilizza il pseudo-elemento :before per inserire contenuto prima dell'elemento
&:before {
// Imposta il contenuto inserito sul valore della variabile $composer_toc_text
// content: "#{$composer_toc_text}";
content: "Questa discussione non visualizzerà la directory";
}
}
JavaScript
// Definisce una funzione per impostare lo stile di un elemento
function setStyle(selector, styles) {
// Trova l'elemento corrispondente al selettore specificato
const element = document.querySelector(selector);
// Se l'elemento viene trovato, applica gli stili
if (element) {
Object.assign(element.style, styles);
}
}
// Definisce una funzione per verificare se il contenuto della pagina contiene un markup TOC specifico
function checkForTOCMarkup() {
// Verifica se il contenuto della pagina include una stringa specifica
if (document.body.innerHTML.includes('<div data-theme-toc="false">')) {
// Nasconde l'elemento della timeline
setStyle('.with-timeline', { display: 'none' });
// Modifica lo stile delle colonne del contenitore dei post in 100%
setStyle('.container.posts', { gridTemplateColumns: '100%' });
// Imposta la larghezza del corpo del topic al 100%
setStyle('.topic-body', { width: '100%' });
// Imposta la larghezza massima e il padding sinistro della mappa del topic
setStyle('.topic-map', { maxWidth: '100%', paddingLeft: '0px' });
// Nasconde l'elemento dell'avatar del topic
setStyle('.topic-avatar', { display: 'none' });
// Imposta la larghezza massima e il padding sinistro dell'elemento gap
setStyle('.gap', { maxWidth: '100%', paddingLeft: '0px' });
// Imposta la larghezza massima e il padding sinistro dei pulsanti del footer del topic
setStyle('#topic-footer-buttons', { maxWidth: '100%', paddingLeft: '0px' });
} else {
// Ricorda di non utilizzare il codice predefinito modificato, poiché influenzerà il mobile, lascia che sia il sistema a gestirlo automaticamente
// setStyle('.topic-body', { width: 'calc(var(--topic-body-width) + var(--topic-body-width-padding)*2)' }); // Ripristina la larghezza predefinita
setStyle('.with-timeline', { display: '' }); // Ripristina lo stile predefinito
setStyle('.container.posts', { gridTemplateColumns: '' }); // Ripristina lo stile delle colonne predefinito
setStyle('.topic-body', { width: '' }); // Ripristina la larghezza predefinita
setStyle('.topic-map', { maxWidth: '', paddingLeft: '' }); // Ripristina lo stile predefinito
setStyle('.topic-avatar', { display: '' }); // Ripristina la visualizzazione predefinita
setStyle('.gap', { maxWidth: '', paddingLeft: '' }); // Ripristina lo stile predefinito
setStyle('#topic-footer-buttons', { maxWidth: '', paddingLeft: '' }); // Ripristina lo stile predefinito
}
}
// Crea un'istanza di MutationObserver per monitorare le modifiche al DOM
const observer = new MutationObserver(checkForTOCMarkup);
// Configura le opzioni dell'observer per monitorare le modifiche ai nodi figli e a tutti i discendenti
const config = { childList: true, subtree: true };
// Inizia a osservare le modifiche al documento
observer.observe(document.body, config);
// Esegue immediatamente un controllo al caricamento della pagina
checkForTOCMarkup();
