티스토리 목차 자동 생성 설정 방법 (기본 설정)

1. 목차 생성 플러그인 파일 다운로드

아래의 경로에서 파일을 다운로드 후, 압축을 풀어줍니다. (jquery.toc.zip)

https://ndabas.github.io/toc/

Table of Contents jQuery Plugin — jquery.toc

 

다운로드된 jquery.toc.zip 파일의 압축을 풀면 jquery.toc와 jquery.toc.min두개의 파일이 보입니다.

jquery.toc.zip 압축 해제 후 폴더

2. jquery.toc.min 파일 티스토리에 업로드 하기

티스토리 관리 페이지로 이동하여 아래와 같이 클릭하여 줍니다.
'꾸미기 > 스킨 편집 > html 편집 > 파일 업로드'

티스토리 관리 페이지

티스토리 스킨편집

티스토리 스킨편집 파일업로드

하단의 '추가'버튼을 클릭 후, 다운로드하여서 압축을 풀었던 파일 중 jquery.toc.min파일을 선택하여 추가해줍니다.

티스토리 스킨편집 파일업로드

티스토리 스킨편집 파일업로드

위와 같이 jquery.toc.min.js 파일이 추가된 것을 확인할 수 있습니다.
우측 상단의 '적용'버튼을 클릭하여 적용해줍니다.

3. 목차 생성 스크립트 추가

'스킨 편집 > HTML'로 이동 후, </body>를 찾아줍니다.

티스토리 스킨편집 HTML

</body> 위에 아래의 코드를 복사해 붙여 넣고, '적용'버튼을 클릭해줍니다.

<script type="text/javascript">
    $("#toc").toc({content: "div.entry-content", headings: "h2,h3,h4"});
</script>

티스토리 스킨편집 HTML 스크립트 추가

위와 같이 추가하면 글 작성 시, 콘텐츠 내에 있는 제목 1(h2), 제목 2(h3), 제목 3(h4)의 태그를 찾아서 목록으로 나타내게 됩니다. 

4. 글에서 목차가 노출될 위치 추가

글 작성 시, 목차를 노출하고 싶은 위치에 아래의 태그를 추가해줍니다.

티스토리 글쓰기

<ul id="toc"></ul>

티스토리 글쓰기 HTML 모드

위와 같이 추가한 후, 미리 보기 버튼을 누르면 아래의 녹색과 같이 목차로 표시되는 것을 확인할 수 있습니다. (제목 1(h2), 제목 2(h3), 제목 3(h4)의 텍스트가 녹색 글씨의 목차로 표시됨)

목차 표시 결과

- 티스토리 목차 편하게 자동 생성 하기 (인용구, 구분선 활용)

티스토리 목차 편하게 자동 생성 하기 (인용구, 구분선 활용)