Hello 스킨 TOC(컨텐츠 목록) 수정하기

구글에 개발자 티스토리 스킨을 검색하니 가장 위에 Hello 스킨이란 것이 떴다.

그래서 적용해보았다.

• 티스토리에 개시된 스킨 소개
• Hello 스킨 Github

해당 스킨에서 Html 태그 h2, h3 로만 컨텐츠 목록(TOC)를 구성하는데, h1은 목록에서 보이지 않았다.
html과 css는 젬병이기 때문에 어떻게 해야하지 고민하다 GitHub 이슈에서 힌트를 얻었다. (https://github.com/tidory/hello/issues/40)

---

1. 일단 컨텐츠 목록에 h1을 추가한다.
2. h1이 추가되면, h1, h2, h3에 맞게 depth가 들어가게 노출한다.

컨텐츠 목록에 h1을 추가

• script.js 파일에서 supportHeading에 _contents_style > h 추가

h1에 맞는 depth를 추가

• 스킨 편집 > HTML에서 들어가서 <s_if_var_toc>부분을 검색한다.
• <li>부분에 H1을 끼어넣는다.

before

<li :class='{ "pl-0": heading.tagName === "H2", "pl-4": heading.tagName === "H3" }'>

after

<li :class='{ "pl-0": heading.tagName === "H1", "pl-4": heading.tagName === "H2", "pl-8": heading.tagName === "H3" }'>

• 위와 같이 수정했을 때, H3의 depth는 생기지 않는데 css에 pl-8이 없어서 그렇다.
• 스킨 편집 > CSS에서 pl-8을 추가해주자.

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

---

다 설치하고 보니, 마크다운을 지원하지 않는다 한다,,

https://github.com/tidory/hello/issues/52