[IT Knowledge] hELLO 스킨 자동목차에 제목3 포함하기

들어가기 전에

자동목차에 제목3을 포함시킨 예시

저는 보통 제목1은 사용하지 않고, 제목2부터 사용하고 있어 제목3에 대한 목차가 필요했습니다. 구글링해보니, 기본적으로 제가 사용하는 hELLO 티스토리 스킨은 자동목차에 제목3을 포함하지 않는다고 적혀있었습니다.

다행히도, hELLO 제작자가 git 레포지토리에 자동목차에 제목3을 직접 추가할 수 있는 방법을 가이드 주신 부분이 있어 해당 내용을 적용해본 내용을 담아보고자 글을 작성하였습니다.  

사용하고 계시는 hELLO 버전에 따라 아래 내용을 적용하지 못할 수 있는 점 참고 부탁드립니다.

• 적용 시 사용한 hELLO 버전: 4.5.3

자동목차에 제목3 포함하기

자동목차 내 제목3 포함 요청 및 가이드

위 사진에서 볼 수 있듯이 script.js와 skin.html을 수정하면 손쉽게 자동목차에 제목3을 포함할 수 있습니다. 제가 기존에 사용하던 hELLO 스킨은 2021년 버전이었던터라, 앞서 제작자님이 말씀주신 내용이 소스에 없어서 최신 hELLO 버전을 다운받아 진행했습니다.

script.js에 supportHeadings 추가하기

script에 supportHeadings 추가하기

먼저 hELLO 스킨 파일 중 script.****.js 파일을 찾아 위와 같이 열어 수정합니다.

• script 위치는 hELLO 소스 패키지 내 images 폴더 하위에 존재합니다.

// AS - IS
supportHeadings: '.contents_style > h2, .contents_style > h3',

// TO - BE
supportHeadings: '.contents_style > h2, .contents_style > h3, .contents_style > h4',

• 지원하는 Heading 스타일에 h2, h3만 있던 것을 h4도 포함하여 제목3 또한 자동목차에 포함될 수 있도록 합니다.

script.js 파일을 수정한 후, 티스토리 스킨 편집을 통해 기존 script 파일 제거 및 신규 파일 추가를 진행해야 합니다.

기존 script 제거 및 신규 script 추가

skin.html에 제목3 목차 스타일 지정하기

HTML에 제목3 목차 스타일 지정하기(티스토리 스킨 편집 사용 시)

script.js만 수정하게 되면, 제목1과 같은 선상에 제목3 목차가 생성됩니다. 아무래도 제목3은 제목2 하위에 있는 목차이기 때문에 좀 더 들여쓰기가 될 수 있도록 설정을 진행합니다.

• 아래 설정에서 pl이란 의미는 padding left를 의미하며, 각 제목별로 padding을 서로 다르게 지정하기 위해 설정합니다.
• 각 pl-XX에 대한 padding을 얼만큼 줄 지는 css 파일에서 확인이 가능합니다.

// AS - IS
:class='{ "pl-0": heading.tagName === "H2", "pl-4": heading.tagName === "H3" }'

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

만약, hELLO 스킨 소스를 PC에 저장하고 계신다면, 위처럼 티스토리의 스킨 편집을 통해 진행하지 않고 직접 파일에 접근하여 수정하여도 무방합니다. 직접 파일에 접근할 경우 skin.html을 수정하시면 됩니다. html이나 css의 경우, js와 달리 파일로 수정할 경우 새로 스킨을 등록해야 적용이 가능합니다.

HTML에 제목3 목차 스타일 지정하기(직접 파일에서 수정하는 경우)

pl-8에 대한 스타일 추가하기

CSS에 pl-8 스타일 지정하기

script.js와 skin.html만 수정했을 때, 자동목차에 제목3이 표시가 되긴 했습니다. 다만, 제목3이 제목1과 동일한 선상에 위치하여, skin.html에서 설정한 pl-8 설정이 제대로 먹히지 않는다고 판단하였습니다. 그래서, style.css 파일에서 pl-8 내용이 있는지 확인했고, pl-8이 없어서 pl-4 아래에 pl-8을 추가해주었습니다.

// AS - IS
.pl-4 {
  padding-left: 1rem;
}

// TO - BE
.pl-4 {
  padding-left: 1rem;
}

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

css 파일 수정 역시, 티스토리 스킨 편집에서 진행할 수도 있지만 직접 파일 수정도 가능합니다. 파일 수정 시, style.css를 수정하시면 됩니다.

참고 자료

• 자동목차에 제목3 포함할 수 있는 옵션 요청 Discussions