四级标题缺少一个缩进级别

支持
1

在使用 DiscoTOC 组件时，我遇到了一个问题：
右侧滚动条中的四级标题似乎比三级标题少了一个缩进级别。

image
image302×171 3.02 KB

我已经检查了原始文本，没有发现任何语法错误。
image

image
image446×130 5.47 KB

有人能解释一下可能的原因吗？另外，我想知道这个问题是否有解决方案？

2

我认为这是故意的，以免在目录中缩进过多时标题缩小太多。
实现增量填充的最简单方法是定位 <li> 或 <a> 元素（使用它们的类，因为它们具有与标题级别相关的类）并添加左填充。

3

感谢您的回复！

但是，实施此解决方案是否需要修改 HTML 代码？您能否提供更具体的指导来解决此问题？

4

首先，<h3> 到 <h5> 标题无法在目录中折叠。需要更改组件以允许此行为。<h6> 被组件忽略。

但是，既然您只讨论嵌套，那么这段 SCSS 应该足以满足您的需求：

.d-toc-main #d-toc li.d-toc-item {
    .d-toc-h4 {
        padding-left: 1.25em;
    }
    .d-toc-h5 {        
        padding-left: 2em;
    }
}

image
image105×148 899 Bytes