Надеюсь, вы сможете добавить функцию скрытия директорий.
Пользовательские плагины
Это решение разработано с参考 к вашему плагину, в основном добавлена одна дополнительная кнопка, а затем используется JavaScript для динамического рендеринга.
discourse-----------------------hide-toc (1).zip (3.3 KB)
CSS / JavaScript
CSS
// Стили для отображения оглавления в редакторе
// Определение стилей для отображения оглавления в предпросмотре редактора
.edit-title .d-editor-preview [data-theme-toc="false"],
body.toc-for-replies-enabled .d-editor-preview [data-theme-toc="false"] {
// Установка цвета фона на третий цвет темы
background: var(--tertiary);
// Установка цвета текста на второй цвет темы
color: var(--secondary);
// Установка позиционирования элемента как sticky, чтобы он оставался в верхней части видимой области при прокрутке
position: sticky;
// Установка z-index равным 1, чтобы гарантировать отображение элемента поверх других элементов
z-index: 1;
// Установка расстояния элемента от верхней части видимой области равным 0
top: 0;
// Установка высоты элемента равной 30 пикселей
height: 30px;
// Установка способа отображения элемента как flexbox для удобства выравнивания содержимого
display: flex;
// Вертикальное центрирование элементов внутри flexbox
align-items: center;
// Горизонтальное центрирование элементов внутри flexbox
justify-content: center;
// Использование псевдоэлемента :before для вставки содержимого перед элементом
&:before {
// Установка вставляемого содержимого равным значению переменной $composer_toc_text
// content: "#{$composer_toc_text}";
content: "В этом посте оглавление не будет отображаться";
}
}
JavaScript
<script>
// Определение функции для установки стилей элемента
function setStyle(selector, styles) {
// Поиск элемента по указанному селектору
const element = document.querySelector(selector);
// Если элемент найден, применить стили
if (element) {
Object.assign(element.style, styles);
}
}
// Определение функции для проверки наличия в содержимом страницы специфичной метки TOC
function checkForTOCMarkup() {
// Проверка наличия в содержимом страницы специфичной строки
if (document.body.innerHTML.includes('<div data-theme-toc="false">')) {
// Скрытие элемента временной шкалы
setStyle('.with-timeline', { display: 'none' });
// Изменение стиля столбцов контейнера постов на 100%
setStyle('.container.posts', { gridTemplateColumns: '100%' });
// Установка ширины тела темы на 100%
setStyle('.topic-body', { width: '100%' });
// Установка максимальной ширины и левого внутреннего отступа карты темы
setStyle('.topic-map', { maxWidth: '100%', paddingLeft: '0px' });
// Скрытие элемента аватара темы
setStyle('.topic-avatar', { display: 'none' });
// Установка максимальной ширины и левого внутреннего отступа элемента разрыва
setStyle('.gap', { maxWidth: '100%', paddingLeft: '0px' });
// Установка максимальной ширины и левого внутреннего отступа кнопок подвала темы
setStyle('#topic-footer-buttons', { maxWidth: '100%', paddingLeft: '0px' });
} else {
// Помните, не используйте измененный исходный код по умолчанию, так как это повлияет на мобильные устройства; пусть система обрабатывает это автоматически
// setStyle('.topic-body', { width: 'calc(var(--topic-body-width) + var(--topic-body-width-padding)*2)' }); // Восстановить ширину по умолчанию
setStyle('.with-timeline', { display: '' }); // Восстановить стили по умолчанию
setStyle('.container.posts', { gridTemplateColumns: '' }); // Восстановить стиль столбцов по умолчанию
setStyle('.topic-body', { width: '' }); // Восстановить ширину по умолчанию
setStyle('.topic-map', { maxWidth: '', paddingLeft: '' }); // Восстановить стили по умолчанию
setStyle('.topic-avatar', { display: '' }); // Восстановить отображение по умолчанию
setStyle('.gap', { maxWidth: '', paddingLeft: '' }); // Восстановить стили по умолчанию
setStyle('#topic-footer-buttons', { maxWidth: '', paddingLeft: '' }); // Восстановить стили по умолчанию
}
}
// Создание экземпляра наблюдателя для отслеживания изменений в DOM
const observer = new MutationObserver(checkForTOCMarkup);
// Настройка параметров наблюдателя для отслеживания изменений дочерних узлов и всех потомков
const config = { childList: true, subtree: true };
// Начало наблюдения за изменениями в документе
observer.observe(document.body, config);
// Немедленное выполнение проверки при загрузке страницы
checkForTOCMarkup();
</script>
