Espero que você possa adicionar a função de diretório oculto.
Plugins personalizados
Isso é feito com referência ao seu plugin, principalmente adicionando mais um botão e, em seguida, usando JavaScript para renderização dinâmica.
discourse-----------------------hide-toc (1).zip (3,3 KB)
CSS / JavaScript
css
// Estilos relacionados ao índice exibido no editor
// Define os estilos para exibir o índice na visualização do editor
.edit-title .d-editor-preview [data-theme-toc="false"],
body.toc-for-replies-enabled .d-editor-preview [data-theme-toc="false"] {
// Define a cor de fundo como a terceira cor do tema
background: var(--tertiary);
// Define a cor do texto como a segunda cor do tema
color: var(--secondary);
// Define o elemento como posição fixa, para que permaneça no topo da janela de visualização durante a rolagem
position: sticky;
// Define z-index como 1 para garantir que este elemento seja exibido acima de outros elementos
z-index: 1;
// Define a distância do elemento do topo da janela de visualização como 0
top: 0;
// Define a altura do elemento como 30 pixels
height: 30px;
// Define o modo de exibição do elemento como flexbox para facilitar o alinhamento do conteúdo
display: flex;
// Centraliza verticalmente os itens no flexbox
align-items: center;
// Centraliza horizontalmente os itens no flexbox
justify-content: center;
// Usa o pseudo-elemento :before para inserir conteúdo antes do elemento
&:before {
// Define o conteúdo inserido como o valor da variável $composer_toc_text
// content: "#{$composer_toc_text}";
content: "Este post não exibirá o índice";
}
}
JavaScript
// Define uma função para definir o estilo de um elemento
function setStyle(selector, styles) {
// Encontra o elemento pelo seletor especificado
const element = document.querySelector(selector);
// Se o elemento for encontrado, aplica os estilos
if (element) {
Object.assign(element.style, styles);
}
}
// Define uma função para verificar se o conteúdo da página contém uma marcação específica do TOC
function checkForTOCMarkup() {
// Verifica se o conteúdo do corpo da página inclui uma string específica
if (document.body.innerHTML.includes('<div data-theme-toc="false">')) {
// Oculta o elemento da linha do tempo
setStyle('.with-timeline', { display: 'none' });
// Modifica o estilo da coluna do contêiner de posts para 100%
setStyle('.container.posts', { gridTemplateColumns: '100%' });
// Define a largura do corpo do tópico para 100%
setStyle('.topic-body', { width: '100%' });
// Define a largura máxima e o preenchimento esquerdo do mapa do tópico
setStyle('.topic-map', { maxWidth: '100%', paddingLeft: '0px' });
// Oculta o elemento do avatar do tópico
setStyle('.topic-avatar', { display: 'none' });
// Define a largura máxima e o preenchimento esquerdo do elemento de espaço
setStyle('.gap', { maxWidth: '100%', paddingLeft: '0px' });
// Define a largura máxima e o preenchimento esquerdo dos botões do rodapé do tópico
setStyle('#topic-footer-buttons', { maxWidth: '100%', paddingLeft: '0px' });
} else {
// Lembre-se de não usar o código padrão antes da modificação, pois afetará o lado móvel, deixe o sistema lidar automaticamente
// setStyle('.topic-body', { width: 'calc(var(--topic-body-width) + var(--topic-body-width-padding)*2)' }); // Restaura a largura padrão
setStyle('.with-timeline', { display: '' }); // Restaura o estilo padrão
setStyle('.container.posts', { gridTemplateColumns: '' }); // Restaura o estilo de coluna padrão
setStyle('.topic-body', { width: '' }); // Restaura a largura padrão
setStyle('.topic-map', { maxWidth: '', paddingLeft: '' }); // Restaura o estilo padrão
setStyle('.topic-avatar', { display: '' }); // Restaura a exibição padrão
setStyle('.gap', { maxWidth: '', paddingLeft: '' }); // Restaura o estilo padrão
setStyle('#topic-footer-buttons', { maxWidth: '', paddingLeft: '' }); // Restaura o estilo padrão
}
}
// Cria uma instância do observador para monitorar as mudanças no DOM
const observer = new MutationObserver(checkForTOCMarkup);
// Configura as opções do observador para monitorar mudanças nos nós filhos e em todos os nós descendentes
const config = { childList: true, subtree: true };
// Começa a observar as mudanças no documento
observer.observe(document.body, config);
// Executa uma verificação imediatamente quando a página é carregada
checkForTOCMarkup();
