Lined Notebook

3-7-1. 자동 목차 생성(TOC) 톺아보기

by 프라치노

티스토리 스킨, 프라치노 공책은 자동 목차 생성(Table of Contents) 기능이 제공됩니다.
해당 기능을 켜면 작성된 글에 포함된 머리말 레벨 태그, h1부터 h6까지를 찾아 단계를 분석하고, 글의 오른쪽 위나 사이드바에 글의 목차를 표시합니다. 목차의 항목을 누르면 해당 항목이 있는 지점으로 빠르게 스크롤됩니다.

스킨 옵션의 글 페이지 항목

자동 목차 생성 기능을 사용하려면 블로그 관리 페이지에서 ‘꾸미기’ 항목의 ‘스킨 편집’으로 이동하세요. 그리고 ‘글 페이지’ 항목에서 ‘자동 목차 생성’ 옵션을 켜면 됩니다.


1. 하위 항목 구분하기

이 기능을 켜면, 프라치노 공책은 글의 머리말 레벨 태그를 자동으로 분석합니다. 첫 번째 머리말 레벨을 기준으로 다음 머리말 레벨이 첫 번째보다 높으면 하위 항목으로, 같거나 낮으면 같은 수준의 항목으로 구분됩니다. 예를 들어 첫 번째 머리말 레벨이 h2이고 그다음 머리말 레벨이 h3라면, h3 태그는 h2 태그의 하위 항목으로 표시됩니다.

2. 머리말 레벨 태그의 ID

자동 목차 생성 기능은 머리말 레벨 태그의 ID를 사용합니다. 만약 머리말 레벨 태그에 ID가 존재하지 않다면, 이 기능에 의해 해당 태그의 ID는 자동으로 생성됩니다. 반대로 머리말 레벨 태그에 ID가 존재한다면, 해당 태그의 ID를 그대로 사용합니다. 만약 이에 관한 내용이 어렵게 느껴진다면 참고만 하고 신경 쓰지 않아도 됩니다.

3. 머리말 레벨 태그 제외시키기

원하지 않는 머리말 레벨 태그가 있다면 excluded 클래스를 추가하여 해당 태그를 제외시킬 수 있습니다.

4. 글에서 기능 설정하기

스킨 옵션에서 해당 기능이 켜져 있거나 꺼져 있는 상태에서도 글 내에서 이 기능을 켜거나 끌 수 있습니다. 글쓰기 페이지에서 모드를 ‘HTML’로 변경한 후, 아래의 코드 중 하나를 추가하세요:

<div class="fraccino-enable-toc" hidden></div>

자동 목차 생성 기능을 사용하고 싶다면 위의 코드를 추가하세요.

<div class="fraccino-disable-toc" hidden></div>

반대로 기능을 끄려면 위의 코드를 추가하세요.

반응형

블로그의 정보

프라치노 공책

프라치노

활동하기