Espero que puedas agregar la función de directorio oculto.
Plugins personalizados
Esto se hace con referencia a tu plugin, principalmente agregando un botón más y luego usando JavaScript para la renderización dinámica.
discourse-----------------------hide-toc (1).zip (3.3 KB)
CSS / JavaScript
css
// Estilos relacionados con el índice que se muestran en el editor
// Define los estilos para mostrar el índice en la vista previa del editor
.edit-title .d-editor-preview [data-theme-toc="false"],
body.toc-for-replies-enabled .d-editor-preview [data-theme-toc="false"] {
// Establece el color de fondo en el tercer color del tema
background: var(--tertiary);
// Establece el color del texto en el segundo color del tema
color: var(--secondary);
// Establece el elemento como posición pegajosa, para que permanezca en la parte superior de la ventana gráfica al desplazarse
position: sticky;
// Establece z-index en 1 para asegurar que este elemento se muestre por encima de otros elementos
z-index: 1;
// Establece la distancia del elemento desde la parte superior de la ventana gráfica en 0
top: 0;
// Establece la altura del elemento en 30 píxeles
height: 30px;
// Establece el modo de visualización del elemento como flexbox, para facilitar la alineación del contenido
display: flex;
// Alinea verticalmente los elementos dentro de flexbox
align-items: center;
// Centra horizontalmente los elementos dentro de flexbox
justify-content: center;
// Usa el pseudo-elemento :before para insertar contenido antes del elemento
&:before {
// Establece el contenido insertado en el valor de la variable $composer_toc_text
// content: "#{$composer_toc_text}";
content: "Este post no mostrará el índice";
}
}
JavaScript
// Define una función para establecer el estilo de un elemento
function setStyle(selector, styles) {
// Busca el elemento con el selector especificado
const element = document.querySelector(selector);
// Si se encuentra el elemento, aplica los estilos
if (element) {
Object.assign(element.style, styles);
}
}
// Define una función para verificar si el contenido de la página contiene una marca TOC específica
function checkForTOCMarkup() {
// Comprueba si el contenido del cuerpo de la página incluye una cadena específica
if (document.body.innerHTML.includes('<div data-theme-toc="false">')) {
// Oculta el elemento de la línea de tiempo
setStyle('.with-timeline', { display: 'none' });
// Modifica el estilo de la columna del contenedor de posts a 100%
setStyle('.container.posts', { gridTemplateColumns: '100%' });
// Establece el ancho del cuerpo del tema al 100%
setStyle('.topic-body', { width: '100%' });
// Establece el ancho máximo y el relleno izquierdo del mapa del tema
setStyle('.topic-map', { maxWidth: '100%', paddingLeft: '0px' });
// Oculta el elemento del avatar del tema
setStyle('.topic-avatar', { display: 'none' });
// Establece el ancho máximo y el relleno izquierdo del elemento de espacio
setStyle('.gap', { maxWidth: '100%', paddingLeft: '0px' });
// Establece el ancho máximo y el relleno izquierdo de los botones del pie de página del tema
setStyle('#topic-footer-buttons', { maxWidth: '100%', paddingLeft: '0px' });
} else {
// ¡Recuerda no usar el código predeterminado antes de la modificación, ya que afectará al lado móvil, deja que el sistema lo maneje automáticamente!
// setStyle('.topic-body', { width: 'calc(var(--topic-body-width) + var(--topic-body-width-padding)*2)' }); // Restaura al ancho predeterminado
setStyle('.with-timeline', { display: '' }); // Restaura el estilo predeterminado
setStyle('.container.posts', { gridTemplateColumns: '' }); // Restaura el estilo de columna predeterminado
setStyle('.topic-body', { width: '' }); // Restaura el ancho predeterminado
setStyle('.topic-map', { maxWidth: '', paddingLeft: '' }); // Restaura el estilo predeterminado
setStyle('.topic-avatar', { display: '' }); // Restaura la visualización predeterminada
setStyle('.gap', { maxWidth: '', paddingLeft: '' }); // Restaura el estilo predeterminado
setStyle('#topic-footer-buttons', { maxWidth: '', paddingLeft: '' }); // Restaura el estilo predeterminado
}
}
// Crea una instancia de observador para monitorear los cambios en el DOM
const observer = new MutationObserver(checkForTOCMarkup);
// Configura las opciones del observador para monitorear cambios en los nodos hijos y todos los nodos descendientes
const config = { childList: true, subtree: true };
// Comienza a observar los cambios en el documento
observer.observe(document.body, config);
// Ejecuta una verificación inmediatamente cuando la página se carga
checkForTOCMarkup();
