J’espère que vous pourrez ajouter la fonction de répertoire caché.
Plugins personnalisés
Ceci est fait en référence à votre plugin, ajoutant principalement un bouton supplémentaire, puis en utilisant JavaScript pour le rendu dynamique.
discourse-----------------------hide-toc (1).zip (3.3 KB)
CSS / JavaScript
css
// Styles liés au répertoire affiché dans l'éditeur
// Définit les styles pour afficher le répertoire dans l'aperçu de l'éditeur
.edit-title .d-editor-preview [data-theme-toc="false"],
body.toc-for-replies-enabled .d-editor-preview [data-theme-toc="false"] {
// Définit la couleur d'arrière-plan sur la troisième couleur du thème
background: var(--tertiary);
// Définit la couleur du texte sur la deuxième couleur du thème
color: var(--secondary);
// Définit l'élément comme positionné de manière fixe, le maintenant en haut de la fenêtre d'affichage lors du défilement
position: sticky;
// Définit z-index sur 1 pour s'assurer que cet élément s'affiche au-dessus des autres éléments
z-index: 1;
// Définit la distance de l'élément par rapport au haut de la fenêtre d'affichage à 0
top: 0;
// Définit la hauteur de l'élément à 30 pixels
height: 30px;
// Définit la manière dont l'élément est affiché comme flexbox, afin de faciliter l'alignement du contenu
display: flex;
// Centre verticalement les éléments dans la flexbox
align-items: center;
// Centre horizontalement les éléments dans la flexbox
justify-content: center;
// Utilise le pseudo-élément :before pour insérer du contenu avant l'élément
&:before {
// Définit le contenu inséré sur la valeur de la variable $composer_toc_text
// content: "#{$composer_toc_text}";
content: "Ce message n'affichera pas de répertoire";
}
}
JavaScript
// Définit une fonction pour définir le style d'un élément
function setStyle(selector, styles) {
// Recherche l'élément correspondant au sélecteur spécifié
const element = document.querySelector(selector);
// Si l'élément est trouvé, applique le style
if (element) {
Object.assign(element.style, styles);
}
}
// Définit une fonction pour vérifier si le contenu de la page contient des balises TOC spécifiques
function checkForTOCMarkup() {
// Vérifie si le contenu de la page contient une chaîne de caractères spécifique
if (document.body.innerHTML.includes('<div data-theme-toc="false">')) {
// Masque l'élément de chronologie
setStyle('.with-timeline', { display: 'none' });
// Modifie le style de colonne du conteneur de message pour qu'il soit de 100%
setStyle('.container.posts', { gridTemplateColumns: '100%' });
// Définit la largeur du corps du sujet à 100%
setStyle('.topic-body', { width: '100%' });
// Définit la largeur maximale et le padding gauche de la carte du sujet
setStyle('.topic-map', { maxWidth: '100%', paddingLeft: '0px' });
// Masque l'élément d'avatar du sujet
setStyle('.topic-avatar', { display: 'none' });
// Définit la largeur maximale et le padding gauche de l'élément d'espacement
setStyle('.gap', { maxWidth: '100%', paddingLeft: '0px' });
// Définit la largeur maximale et le padding gauche des boutons du pied de page du sujet
setStyle('#topic-footer-buttons', { maxWidth: '100%', paddingLeft: '0px' });
} else {
// N'oubliez pas de ne pas utiliser le code par défaut avant la modification, car il affectera le mobile, laissez le système le gérer automatiquement
// setStyle('.topic-body', { width: 'calc(var(--topic-body-width) + var(--topic-body-width-padding)*2)' }); // Restaure la largeur par défaut
setStyle('.with-timeline', { display: '' }); // Restaure le style par défaut
setStyle('.container.posts', { gridTemplateColumns: '' }); // Restaure le style de colonne par défaut
setStyle('.topic-body', { width: '' }); // Restaure la largeur par défaut
setStyle('.topic-map', { maxWidth: '', paddingLeft: '' }); // Restaure le style par défaut
setStyle('.topic-avatar', { display: '' }); // Restaure l'affichage par défaut
setStyle('.gap', { maxWidth: '', paddingLeft: '' }); // Restaure le style par défaut
setStyle('#topic-footer-buttons', { maxWidth: '', paddingLeft: '' }); // Restaure le style par défaut
}
}
// Crée une instance d'observateur pour surveiller les changements dans le DOM
const observer = new MutationObserver(checkForTOCMarkup);
// Configure les options de l'observateur pour surveiller les changements dans les nœuds enfants et tous les descendants
const config = { childList: true, subtree: true };
// Commence à observer les changements dans le document
observer.observe(document.body, config);
// Exécute une vérification immédiatement au chargement de la page
checkForTOCMarkup();
