第4レベルの見出しでインデントが1レベル不足しています

サポート
1

DiscoTOC コンポーネントの使用中に問題が発生しました。
右側のスクロールバーにある第 4 レベルの見出しは、第 3 レベルの見出しと比較して、インデントが 1 レベル不足しているようです。

image
image302×171 3.02 KB

元のテキストを確認しましたが、構文エラーは見つかりませんでした。
image

image
image446×130 5.47 KB

この原因について説明していただけますでしょうか？また、この問題に対する解決策はありますでしょうか？

2

インデントが多すぎる場合に目次内のタイトルが縮小されないように意図的に行われているのだと思います。

インクリメンタルパディングを実現する最も簡単な方法は、<li> または <a> のいずれか（見出しレベルに関連するクラスがあるため、それらのクラスを使用）をターゲットにして、padding-left を追加することです。

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