希望你能添加隐藏目录的功能。
自定义插件
这是参考你的插件做的，主要是多加了一个按钮，然后用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);
// 设置元素为粘性定位，使其在滚动时保持在视口顶部
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
// 定义一个函数，用于设置元素的样式
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();
