티스토리 블로그에 자동 목차 기능 구현 및 적용하기
글을 쓸 때 목차를 상단에 표시하면 글을 읽는 방문자가 글의 대략적인 내용을 미리 알 수 있고, 원하는 위치로 바로 건너뛸 수도 있어서 편리하고 좋습니다.
특히 강의 같은 순서형으로 나열되는 긴 글은 목차가 필수적으로 있는 것이 좋습니다.
다만 수작업으로 일일히 목차를 만들어 붙이는 것은 손이 굉장히 많이 갑니다.
북마크도 붙여야 하고, 북마크를 모아서 목차도 목록으로 만들어야 합니다.
상당히 번거롭고 시간을 잡아먹는 일입니다.
티스토리 에디터로 글을 작성할 때는 "제목1", "제목2", "제목3" 3개의 제목 스타일을 사용할 수 있고 실제 HTML 태그로 구현될 때는 "<h2>", "<h3>", "<h4>" 3개의 태그를 사용합니다.
자동 목차 생성 기능은 작성 글 안의 제목 스타일이 적용된 텍스트들을 모아서 상단에 자동으로 목차를 생성해서 표시해주는 기능입니다.
기본적으로 "제목1", "제목2", "제목3" 스타일을 제목으로 표시할 내용에 적용해서 구조화 된 글을 작성했을 때 자동 목차 기능이 동작할 수 있으며, 티스토리 에디터의 제목 스타일을 글 내용을 강조하기 위한 다른 용도로 사용하면 정상적으로 구조화 된 목차가 생성되지 않습니다.
1. 자동 목차 파일 업로드 및 링크하기
주요 기능은 자바스크립트와 CSS로 구현되며, 자바스크립트 파일과 CSS 파일을 함께 적용해야 합니다.
먼저 압축파일을 다운로드 받아 압축을 푼 후 "images" 폴더 안에 있는 "toc.js", "toc.css" 파일 2개를 업로드 합니다.
스킨 편집기로 들어가서 HTML 편집기 화면 상단의 헤더 영역 안에 "toc.js", "toc.css" 파일을 링크합니다.
다음 링크 코드를 그대로 복사해서 붙여넣어도 됩니다.
<script type="text/javascript" src="./images/toc.js"></script>
<link rel="stylesheet" href="./images/toc.css">파일 링크를 삽입하는 위치는 스킨 HTML 에서 "style.css"를 찾아서 그 밑이나 윗 줄에 추가해주면 됩니다.
링크를 추가할 때는 반드시 ".images/" 경로를 포함해서 링크를 넣어야 합니다.
"toc.css" 파일은 링크를 하지 않고 스킨 CSS 맨 끝에 "toc.css" 파일의 CSS 내용을 전부 복사해서 붙여 넣어도 됩니다.
2. 자동 목차 옵션 클래스 설정하기
스킨 HTML <html> 태그, 또는 <body> 태그에 CSS 옵션 클래스를 추가합니다.
목차에 자동으로 숫자 번호를 매기도록 하려면 "toc-autonumber" 클래스를 추가합니다.
목차를 <h2> 태그만으로 생성하려면 "toc-level2" 클래스를 추가합니다.
목차를 <h2>, <h3> 태그로 생성하려면 "toc-level3" 클래스를 추가합니다.
목차를 생성할 레벨을 정하지 않으면 <h2>(제목1 스타일) 태그만으로 목차를 생성합니다.
예를 들어 "<body>" 태그에 자동 목차 옵션 클래스를 추가한다면 다음과 같이 클래스를 추가해주면 됩니다.
<body class="toc-enable toc-level4 toc-fold toc-title toc-black toc-autonumber">자동 목차 기능을 티스토리 블로그에 추가하면 다음처럼 글 내용 상단에 자동으로 목차가 만들어져서 붙게 됩니다.
클래스 옵션으로 설정 가능한 기능은 다음과 같습니다.
| 클래스 옵션 | 기능 |
| .toc-enable | 목차 기능을 활성화 합니다. 다른 옵션 클래스가 있어도 이 클래스가 없으면 동작하지 않습니다. |
| .toc-fold | 초기 상태는 하위 목차들이 접혀 있습니다. 화살표 버튼을 눌러 하위 목차를 펼치거나 접을 수 있습니다. 2뎁스, 3뎁스 모두 적용됩니다. |
| .toc-autonumber | 목차 항목 앞에 자동으로 일련 번호를 붙여줍니다. |
| .toc-title | "목차" 문구를 목차 상단에 표시합니다. |
| .toc-level2 .toc-level3 .toc-level4 |
목차를 생성할 뎁스를 제한합니다. level2는 " " 태그만으로 목차를 생성합니다. |
| .toc-black .toc-green .toc-red .toc-blue |
컬러 테마를 적용합니다. 기본 색상은 스킨이나 웹페이지의 텍스트 색상을 그대로 따라갑니다. |
다운로드 받은 압축 파일 안에 있는 toc.html 파일을 웹브라우저에서 열면 자동 목차 생성 기능이 어떻게 동작하는지 알 수 있습니다.
티스토리는 제목 스타일로 최대 3뎁스까지 목차를 사용할 수 있기 때문에, 3뎁스로 된 목차를 만들면 다음과 같은 계층화된 자동 목차를 만들 수 있습니다.
컬러 테마 클래스를 적용하면 다음과 같이 다양한 색상으로 목차를 표시할 수 있습니다.
PS. --------------------------------------------------
향후 업데이트해서 배포할 티스토리 스킨에 스킨 옵션으로 포함되어 제공될 예정입니다. 기능 추가가 어려운 초보자는 업데이트 된 스킨을 적용해서 사용하는 것을 추천합니다.
------------------------------------------------------