# Add button to TOC theme component

**URL:** <https://meta.discourse.org/t/add-button-to-toc-theme-component/335200>\
**Category:** Development\
**Tags:** disco-toc\
**Created:** [November 8, 2024, 12:36pm UTC](https://meta.discourse.org/t/add-button-to-toc-theme-component/335200 "2024-11-08T12:36:16Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![qianping\_chen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/qianping_chen/32/448819_2.png) [@qianping\_chen](https://meta.discourse.org/u/qianping_chen)\
**Post date:** [November 8, 2024, 12:36pm UTC](https://meta.discourse.org/t/add-button-to-toc-theme-component/335200/1 "2024-11-08T12:36:16Z")

</div>

I hope you can add the hidden directory function.

 ![rouin_2024-11-08_14-28-22](https://global.discourse-cdn.com/meta/original/4X/d/4/7/d472deb0a86c441de24ca325ae28cb156e113805.png)

 ![rouin_2024-11-08_14-28-46](https://global.discourse-cdn.com/meta/original/4X/d/2/9/d29313e88008bc7e0ce5fc723588b6e0335e4175.jpeg)

# 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](https://meta.discourse.org/uploads/short-url/lDpzfgfB2Rjb2pZTXvJUfEhIXfG.zip) (3.3 KB)

 ![rouin_2024-11-08_14-33-06](https://global.discourse-cdn.com/meta/original/4X/d/e/d/ded5846669f8aa4ddddef2f42c7ba88f5cd6d952.png)

# CSS / JavaScript

## css

```plaintext
// 显示在编辑器中的目录相关样式

// 定义在编辑器预览中显示目录的样式
.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](https://global.discourse-cdn.com/meta/original/4X/5/1/e/51e5d89cb3580ec3146d705acbbfa12e0c69072e.png)

```plaintext
<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>

```

---

_[View the full topic](https://meta.discourse.org/t/add-button-to-toc-theme-component/335200)._