티스토리 hELLO 스킨에서 목차에 h4 태그 활성화하는 법

Blog

티스토리 hELLO 스킨에서 목차에 h4 태그 활성화하는 법

REVI1337 2023. 12. 27. 03:45

정상우 님이 만든 티스토리 hELLO 스킨을 사용하면 h2, h3 태그만 목차(Table of Contents) 를 제공한다. 하지만 문서를 작성하다보면 h4 를 사용해야할 때가 은근 많다. 해당 포스팅에서는 이 hELLO 스킨에 목차에 h4 태그를 활성화시키는 방법에 대해 알아본다.

기존 스킨을 초기화했다가 새로 등록해야하기 때문에 백업이 필수로 요구된다.

현재 나는 2023-12-27 기준 제일 최신 버전인 v4.2.2 버전을 사용하고 있다.

🔥 h4 목차 활성화 전 상태 확인

목차에 h4 태그를 활성화화기전의 상태를 보면 아래와같이 h2,h3,h4 태그를 사용해 글을 작성해도

h2,h3 태그만 목차에 인식되는 것을 확인할 수 있다.

물론 오른쪽에 나오는 sticky 엘리먼트도 h2,h3 태그만 인식한다.

🔥 기존의 상태 백업

우선 기존의 스킨 상태를 백업해두어야한다. 현재 상태를 백업하는 방법은 두가지가 있다.

✔️ 방법 1 - 개별 백업

백업할 수 있는 첫번째 방법은 스킨에 사용된 파일들을 하나씩 다운받아 로컬에 백업해두는 것이다. 아래 사진은 현재 내 파일업로드 상태 인데 atom-one-dark, highlight, mobileRedirection, robots, github 를 포함한 모든 파일을 다운받는 방법이다.

파일을 다운받는 방법은 파일에 포커스를 맞추고 링크 복사 를 누른다음, curl 로 다운 받을 수 있다.

$ curl 복사한링크 -o 파일이름

하지만, 이 방법은 티스토리 스킨 등록에 필요한 skin.html, style.css, index.xml 파일을 볼 수 없기 때문에 이 세개의 파일은 티스토리 html 편집기 에 들어가 복붙하여 백업할 수 있다.

skin.html 의 head 태그에는 기존에 사용한 스크립트가 들어있기 때문에 html 편집기에서 꼭 백업해두어야 한다.

✔️ 방법 2 - 한꺼번에 백업

백업할 수 있는 두번째 방법은 티스토리 스킨 변경 탭에서 사용중인 다운로드하면 한꺼번에 백업하는 것이다. 필자는 개별백업을 한 뒤에 알게된 방법이다 ㅠ

🔥 커스텀해야할 것 확인

이제 목차에 h4 를 활성화 하기전에 커스텀해야 할 것을 분석해보자.

✔️ 목차 확인

아래 사진에서처럼 개발자 도구로 목차 의 element 를 확인해보면 h2 태그는 pl-0 이라는 클래스가 있고, h3 태그는 pl-4 클래스가 적용된 것을 알 수 있다.

목차에서 태그에 따라 왼쪽 간격. 즉, padding 이 생기는 이유가 접두사가 pl 인 class 가 적용되었기 때문이다. 태그마다 pl 에 주어진 숫자에 따라 간격이 발생가는 것을 유추할 수 있다.

직접 hELLO 스킨의 style.css 파일을 확인해보면 padding-left 가 적용된 것을 확인할 수 있다.

✔️ Sticky 엘리먼트 확인

아래 사진은 hELLO 스킨 오른쪽 상단에 활성화되는 sticky 엘리먼트이다. 해당 엘리먼트도 헤딩 태그에 따라 pl 클래스로 왼쪽 패딩을 조절하고 있음을 알 수 있다.

✔️ 커스텀해야할 것

커스텀해야할 것을 정리해보면 아래와 같이 나오게 된다.

제일 급선무는 h4 태그를 사용했을 때 목차와 sticky element 에 나오게 해야한다.
노출이되면 분명 li 로 감싸질 것인데 그 li 태그에 ql-8 클래스를 적용시켜야 한다.

ql-8 클래스로 결정한 이유는 현재 h2 태그가 ql-0, h3 태그가 ql-4 클래스를 사용중이기 때문에 간격을 맞춰주기 위해 ql-8 을 결정했다.

🔥 커스터마이징

✔️ script.js 커스터마이징

제일 급선무는 h4 태그를 사용했을 때 목차 와 sticky element 에 노출이 되어야한다는 것이다. 그래서 hELLO 스킨을 압축풀었을때 나오는 script*****.js 파일을 분석해보니 아래의 사진처럼 supportHeadings 에 css 선택자가 있는것을 확인할 수 있었다. 해당부분에 , > .contents_style > h4 를 추가해주면 목차와 sticky element 에 h4 태그가 노출되게 된다.

, .contents_style > h4

✔️ skin.html 커스터마이징

목차에 h4 태그가 노출이 되면 pl-8 클래스를 적용시켜야한다. 그래야 h4 태그를 적용했을 때 padding 이 적용될 것이다. 결론부터 말하자면 skin.html 파일을 수정해야 한다. skin.html 을 잠깐보면 Vue.js 로 만들어졌다는 알 수 있다. skin.html 파일에서 h2 태그에서 사용중인 ql-4 클래스를 검색해보면 6개가 나온다. 이 6 개의 부분 모두 Vue.js 의 클래스 바인딩으로 h 태그에 따른 클래스를 지정하고 있는 것을 확인할 수 있다. 따라서 이 6개의 코드에 아래 사진처럼 , "pl-8": heading.tagName === "H4" 를 추가해주면 해결된다.

, "pl-8": heading.tagName === "H4"

✔️ style.css 커스터마이징

h4 태그가 노출되게 만들었고, pl-8 클래스를 적용시켜주었으니 pl-8 클래스가 있는 element 에게 padding 이 주어지게끔 style.css 파일에 아래의 css 를 적용시켜 주면된다.

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

pl-0 클래스가 0rem 을 사용중이고 pl-4 클래스가 1rem 을 사용중이기때문에 pl-8 클래스는 2rem 을 사용하는 것이 정답이다.

🔥 스킨 초기화 및 등록

커스터마이징해야할 것을 모두 해결했으니, 이제 스킨을 초기화해주고 아래와 같이 hELLO 스킨을 다시 등록해주고 적용해주어야 한다. 이때 skin.html, style.css, script****.js 파일은 앞서 커스터마이징한 파일을 올려주고 나머지는 백업한 파일들을 올려주면 된다.

🔥 스킨 적용 및 정상작동 확인

이제 스킨을 적용하고 확인해주면 아래와 같이 목차에 h4 태그가 잘 인식됨과 동시에 padding 이 잘 동작하는것을 확인할 수 있고

페이지 오른쪽 상단에 보이는 sticky element 도 잘 적용되는것을 확인할 수 있다.

👍적용되었을라나?

잘 동작하는군..