네 번째 수준 제목에 들여쓰기 한 단계 누락

제품 지원
1

DiscoTOC 컴포넌트를使用过程中에 문제가 발생했습니다.
오른쪽 스크롤바의 4단계 제목이 3단계 제목에 비해 들여쓰기 수준이 한 단계 부족한 것으로 보입니다.

image
image302×171 3.02 KB

원본 텍스트를 이미 검토했으나 문법 오류를 발견하지 못했습니다.
image

image
image446×130 5.47 KB

이러한 현상의 가능한 원인에 대해 설명해 주실 수 있을까요? 또한, 이 문제를 해결할 수 있는 방법이 있는지 궁금합니다.

2

목차에 들여쓰기가 너무 많을 때 제목을 너무 많이 축소하지 않는 것이 의도된 것 같다고 생각합니다.

단계적 패딩을 구현하는 가장 쉬운 방법은 내부의 <li> 또는 <a> 요소를 대상으로 하는 것입니다(제목 수준과 관련된 클래스가 있으므로 해당 클래스를 사용할 수 있습니다). 그리고 padding-left를 추가하면 됩니다.

3

답변 주셔서 감사합니다!

다만, 이 해결책을 구현하려면 HTML 코드를 수정해야 하지 않을까요? 이 문제를 해결하는 방법에 대해 좀 더 구체적인 안내를 주실 수 있을까요?

4

먼저, <h3>에서 <h5>까지의 제목은 목차에서 접을 수 없습니다. 이러한 동작을 허용하려면 컴포넌트에 변경 사항이 필요합니다. <h6>은 컴포넌트에서 무시됩니다.

하지만 네스팅(nesting)에 대해서만 말씀하고 계시기 때문에, 원하는 결과를 얻기 위해 다음 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