Background
Tistory 블로그 스킨을 어떤거를 쓸지 물색하던 중 정상우님이 만드신 hELLO 라는 스킨이 눈에 띄어 사용하게 되었다.
사용해보니 light/dark 모드 모두 예뻐서 너무 마음에 든다.
hELLO 스킨 정보
https://pronist.tistory.com/5
https://github.com/tidory/hello
나는 블로그에 글을 쓸 때 제목1보다 제목2와 제목3을 자주 사용한다.
언제나 그렇듯 제목2와 제목3을 사용하여 글을 썼는데 TOC(Table Of Contents)에 제목3에 해당하는 목차가 없다...
그래서 TOC에 제목3이 나오도록 어떻게 해결할지 구글링을 했는데 현제 스킨에서 뭘 고쳐야할 지 몰라서 직접 뜯어보기로 했다.
왜 제목3이 TOC에 안들어 있는지 개발자 모드로 확인해보니
일단 글을 쓸 때 사용하는 제목1 = h2, 제목2 = h3, 제목3 = h4 로 쓰이고 있었다.
구글링으로 안 사실은 hELLO 스킨은 제목1과 제목2만 TOC에 등록되어 있다고 한다.
그렇다면 h2와 h3만 등록되어 있다는 거니까 제목3에 해당하는 h4 태그를 등록해보자!
TOC 제목3(h4) 태그 등록
Script에 제목3(h4) 태그 추가
hELLO 스킨을 등록할 때 아래와 같은 script 파일들을 등록했을 것이다.
위의 script 파일들 중 빨간 밑줄을 친 script 파일을 수정해야 한다.
이제 이 파일을 열어서 contents_style 을 찾아서 h4 태그를 사용할 수 있게 추가해 주자.
...
// 기존 코드
supportHeadings: '.contents_style > h2, .contents_style > h3',
// h4 태그 추가한 코드
supportHeadings: '.contents_style > h2, .contents_style > h3, .contents_style > h4',
...기존에 등록했던 script 파일은 지우고 h4 태그를 추가한 script 파일을 추가한다.
HTML에 제목3(h4) 태그 추가
이제 스킨편집에서 html 편집에 들어간다.
html에서 heading in $data.headings 을 찾아보면 6개가 찾아지는데 찾은 곳 바로 아래 li 태그에 h4 관련 태그를 6곳 모두에 추가해 주자.
...
// 기존 코드
<li :class='{ "pl-0": heading.tagName === "H2", "pl-4": heading.tagName === "H3" }'> ...
// h4 태그 추가한 코드
<li :class='{ "pl-0": heading.tagName === "H2", "pl-4": heading.tagName === "H3", "pl-4": heading.tagName === "H4" }'> ...
...이제 TOC에 제목3이 나올 것이다.
하지만 새로 추가한 코드에서 padding left가 제목2와 동일하게 쓰여서 들여쓰기가 되어 있지는 않을 것이다.
CSS에 제목3(h4)에 사용할 style 추가
padding left 추가
hELLO 스킨의 CSS에서 padding left는 pl-{number} 로 사용된다.
h2는 pl-0, h3는 pl-4로 사용되니 h4는 pl-8로 사용하고자 하는데 pl-8은 현재 CSS에 없으니 추가하자.
.pl-4 {
padding-left: 1rem;
}
/* TOC에 제목3인 h4에 대한 들여쓰기를 위해 추가하여 사용 */
.pl-8 {
padding-left: 2rem;
}
html에 추가한 pl-8로 적용시켜 보자.
...
// h4 태그 추가한 코드
<li :class='{ "pl-0": heading.tagName === "H2", "pl-4": heading.tagName === "H3", "pl-4": heading.tagName === "H4" }'> ...
// h4 태그에 pl-8 추가한 코드
<li :class='{ "pl-0": heading.tagName === "H2", "pl-4": heading.tagName === "H3", "pl-8": heading.tagName === "H4" }'> ...
...이제 제목3이 제대로 들여쓰기 되었을 것이다.
font-size 추가
나는 아래처럼 기본 font-size가 글을 보기에 좀 작은거 같아서 고쳐놨었다.
.text-sm {
/* 글이 너무 작아보여서 1rem으로 변경 */
/* font-size: 0.875rem; */
font-size: 1rem;
line-height: 1.25rem;
}이렇게 고쳐놓으니 TOC의 글자 크기가 좀 큰 것 같아서, 스타일 클래스 text-xsm을 하나 만들어 주자.
/* TOC에 .text-sm의 1rem 크기는 좀 커서 0.8 크기를 .text-xsm으로 추가하여 사용 */
.text-xsm {
font-size: 0.8rem;
line-height: 1.25rem;
}
.text-sm {
/* 글이 너무 작아보여서 1rem으로 변경 */
/* font-size: 0.875rem; */
font-size: 1rem;
line-height: 1.25rem;
}
이제 html에서 TOC 부분 text-sm을 text-xsm으로 바꿔줘야 한다.
위에서 heading in $data.headings 을 찾았을 때 6개가 나왔었는데, 여기서 2, 4, 6번째 부분에 해당되는데 찾기 헷갈리니
overflow-hidden w-56 text-sm 로 찾으면 3개가 나온다.
이제 찾은 3곳에서 text-sm을 text-xsm으로 바꿔주자.
...
// text-sm에서 text-xsm로 변경전
<div class="... overflow-hidden w-56 text-sm ..." :class='open ? "max-2xl:right-4" : "max-2xl:-right-60"'>
// text-sm에서 text-xsm로 변경후
<div class="... overflow-hidden w-56 text-xsm ..." :class='open ? "max-2xl:right-4" : "max-2xl:-right-60"'>
...이제 TOC 글자 크기가 작아졌을 것이다.
Review
구글링으로 찾아서 해결하려고 했는데 결국 못찾았지만 원인은 알게되어서 혼자 코드를 분석해서 해결해보니 뿌듯했다.
html에서 heading in $data.headings 를 찾은 6곳에서 맨 위에 2곳만 고쳐도 TOC가 잘 적용되었다.
하지만 나머지 4곳도 동일한 코드라 안고치기에는 불안해서 결국 6곳 모두를 고쳤다.
불안해서 고친 나머지 아래 4곳은 어디에 쓰일까?
아시는 분들은 댓글로 알려주세요!!
