I hope you can add the hidden directory function. [rouin_2024-11-08_14-28-22] [rouin_2024-11-08_14-28-46] 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) [rouin_2024-11-08_14-33-06] 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 [rouin_2024-11-08_14-35-50] // 定义一个函数，用于设置元素的样式 function setStyle(selector, styles) { // 查找指定选择器的元素 const element = document.querySelector(selector); // 如果找到该元素，则应用样式 if (element) { Object.assign(element.style, styles); } } // 定义一个函数，用于检查页面内容是否包含特定的 TOC 标记 function checkForTOCMarkup() { // 检查页面内容是否包含特定的字符串 if (document.body.innerHTML.includes(' ')) { // 隐藏时间线元素 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();

[image] rouin: hidden directory function if you mean hide the TOC, you can already do this by clicking on the timeline button on the lower right. [The image shows a screenshot of a webpage with a dark gray background, featuring various text boxes and a red arrow pointing to a "Timeline" button. (Captioned by AI)] Then you will get the usual timeline with a “Contents” button that will allow you to re-enable the table of contents. [This image depicts a screenshot of a webpage titled "Table of Contents" with a prominent red arrow pointing downwards to a button labeled "Contents". (Captioned by AI)]

No, it is to hide the entire sidebar and make the content area large enough, because your plugin will have better compatibility if you do this on this basis, and you can add it as you wish.

@Lilly can you suggest what I might be missing, as I can’t seem to find that Timeline button on my sites, i.e. [image] Features Plugins and Tools Site Development Site Features this-site ux-design [Not all of these still work - in progress…] ▶ Table of contents --> This post is a quick reference tool for authors on this site. All of the features, plugins, tools, code snippets and online services used in the Post Composer/Editor on this...

I think it’s because the topic has no replies. I cannot see that button at Customizing your site with existing theme components. But it’s visible at Understanding stats for 'topic views', 'posts read', and 'reading time', which has a reply.

Thanks @Moin that was it! I added a test reply to that Topic and now the Timeline / TOC switcher button does indeed appear! [image]

[image] Lilly: Then you will get the usual timeline with a “Contents” button that will allow you to re-enable the table of contents. why i don’t have that button?

Does your topic have a reply? [image] Add button to TOC theme component Development I think it’s because the topic has no replies. I cannot see that button at Customizing your site with existing theme components. But it’s visible at Understanding stats for 'topic views', 'posts read', and 'reading time', which has a reply.

[image] Moin: Does your topic have a reply? ahha you are right! incredible but i thin this is a bug, because without this button we don’t have access to notifications and the topic options (and reader mode)

Also it is not intuitive. I told my colleague who is new to Discourse to pin a topic. He said there was no button. So I walked to him to show and well, no button, just a TOC. I was scrolling up and down and the wrench showed up briefly and then disappeared. So I was again scrolling randomly until I hit the first reply and we realized how it worked. It was not at all obvious. Especially on longer topics (which are exactly those to have TOC) it might be a challenge.

Add button to TOC theme component

Development

denvergeeks November 9, 2024, 5:20pm 4

@Lilly can you suggest what I might be missing, as I can’t seem to find that Timeline button on my sites, i.e.

Topic		Replies	Views
Hidden Timeline button Product Support disco-toc	5	235	June 15, 2025
DiscoTOC - automatic table of contents Theme component official , disco-toc	147	65554	October 21, 2026
DiscoTOC style is broken if there is no reply on mobile UX mobile , disco-toc , fixed	4	333	September 23, 2025
Topic list on the right side Product Support	2	1356	April 3, 2021
Hide Topic Navigation With Timeline Theme component	16	1668	October 17, 2024

Add button to TOC theme component

Related topics