I hope you can add the hidden directory function.
Custom plugins
This is made with reference to your plugin, mainly adding one more button, and then using JavaScript for dynamic rendering.
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);
// 设置元素为粘性定位，使其在滚动时保持在视口顶部
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>
