Я столкнулся с проблемой при использовании компонента DiscoTOC:
Заголовки четвёртого уровня в правой полосе прокрутки, похоже, имеют на один уровень отступа меньше, чем заголовки третьего уровня.
Я уже проверил исходный текст и не нашёл никаких синтаксических ошибок.
Не могли бы вы объяснить возможную причину этого? Кроме того, я хочу узнать, существует ли решение для этой проблемы?
Я думаю, что это сделано намеренно: заголовки в оглавлении не должны слишком сильно сжиматься, когда уровень вложенности слишком велик.
Самый простой способ реализовать постепенное увеличение отступа — применить padding-left к тегу <li> или <a> внутри (используя их классы, так как они связаны с уровнем заголовка).
Спасибо за ваш ответ!
Однако не потребует ли реализация этого решения изменения HTML-кода? Не могли бы вы предоставить более конкретные рекомендации по решению этой проблемы?
Во-первых, заголовки от <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;
}
}
