[개발블로그] hELLO 스킨 목차에 제목3 추가하기

(핵심만 보고 싶다면 목차에서 바로 1번으로 이동하면 된다)

 

내가 지금 사용하고 있는 스킨은 티도리님의 hELLO 스킨으로 

다크모드와 라이트모드가 모두 제공되는데 스킨을 조금 수정해서 라이트모드로만 설정했다

이에 관련된 건 다른 포스팅에서 다루기로 하고

 

요즘 업로드를 자주 하다보니 

제목1, 제목2, 제목3을 다양하게 사용하는 경우가 생기는데

스킨에서는 제목2까지만 제공한다는 것을 알게 되었다

 

그래서 수정해보기로 했다

일단 티도리님의 스킨을 소개하는 글 링크는 아래를 참고하면 된다!

https://pronist.tistory.com/5

hELLO 티스토리 스킨을 소개합니다.

 

해당 글에서 깃허브 디스커션을 남길 수 있다는 것을 보고 

나와 같은 궁금증을 가진 사람이 있을지 확인해봤다

 

예상대로 다행히 있었다

https://github.com/tidory/hello/discussions/178

자동목차에 제목3도 포함할 수 있는 옵션 부탁드려요. · tidory hello · Discussion #178

 

남겨주신 답변을 참고하여 직접 시도해본 방식을 소개하고자 한다

 

1. 본격적인 시작 - script.js 파일 편집

스킨 압축 폴더에 포함된 자바스크립트 파일인 script.js 에서 

ctrl f 를 이용해 supportHeadings를 찾는다

 

supportHeadings: '.contents_style > h2, .contents_style > h3', 로 된 부분을

supportHeadings: '.contents_style > h2, .contents_style > h3, .contents_style > h4',

으로 변경한다

 

수정한 script.js 파일을 저장하여 다시 파일 업로드에서 추가해주고

HTML 편집기로 이동한다

 

2. html 파일 편집

skin.html, style.css, index.html 파일은 티스토리의 편집기를 이용해야 편집할 수 있다

 

id="TOC" 태그 아래 있는 class='{ "pl-0": heading.tagName === "H2", "pl-4": heading.tagName === "H3" }' 를

class='{ "pl-0": heading.tagName === "H2", "pl-4": heading.tagName === "H3" , "pl-8": heading.tagName === "H4" }'

로 변경한다

 

3. style.css 파일 편집

여기까지만 해도 h4 태그인 제목3을 목차에 추가할 수 있지만

새로 고침해서 확인해보면 들여쓰기가 잘못되어 있다

목차에서 제목1, 제목2, 제목3을 정확하게 구분할 수 있도록 하려면

추가적인 커스텀이 필요하다

 

해당 스킨의 코드가 복잡하여 이해하기 어렵기 때문에

개발자도구를 이용해 목차의 요소를 확인했을 때 

h2 태그는 pl-0 클래스가 적용되었고

h3 태그는 pl-4 클래스가 적용되었다

 

해당 클래스 코드를 확인해보니

태그에 따라 padding을 다르게 설정하는 pl 클래스를 적용한 것임을 알 수 있었다

 

padding은 padding-left로 적용했기 때문에 

h4 태그에도 pl-8 클래스로 padding을 적용시켜야한다

 

style.css 파일에서 

.pl-8 {
    padding-left: 2rem;
}

 

를 입력하면 된다

 

pl-0클래스가 0, pl-4클래스가 1rem이므로

pl-8클래스는 2를 사용한 것이고

 

적용한 후 확인해보면 원하는 대로

들여쓰기가 정확하게 되어있다

 

끝!!!!!!!!