티스토리 목차는 아래의 순서를 따라해 보시면 어렵지 않게 만들 수 있습니다. HTML, CSS 코드, 스크립트 파일도 공유해 드리니 차근차근 따라해 보시길 바랍니다.
목차 플러그인 파일 업로드
티스토리 관리자 화면 > 스킨 편집 > html 편집 > 파일 업로드 > +추가 > jquery.toc, jquery.toc.min 파일을 업로드
jquery.toc, jquery.toc.min 파일은 글 본문에 있는 제목(h2, h3)을 자동으로 감지해서 자동 목차(Table of Contents, TOC)를 생성해 주는 스크립트 파일로 오픈소스에서 무료로 배포되고 있습니다.
스크립트 파일은 아래에서 다운로드 받으실 수 있습니다.
HTML 목차 코드 삽입
티스토리 관리자 화면 > 스킨 편집 > html 편집 > html > 아래 세 가지 코드를 안내드리는 위치에 삽입합니다. 스킨은 북클럽 스킨을 기준으로 하였습니다.
✅ html 화면에서 아무 곳에나 마우스 왼쪽으로 클릭한 후 ctrl+F를 누르면 검색창이 나타납니다. 여기에 </head>를 검색합니다.
</head> 바로 윗줄에 아래 코드를 삽입합니다.
✅ <body id 로 시작하는 코드를 검색하여 바로 아랫줄에 아래 코드를 입력합니다.
✅ _article_rep_desc_를 검색하면 두 군데에 이 코드가 나옵니다. 두 군데 모두 해당 코드의 바로 윗줄에 아래 코드를 삽입합니다.
html 코드를 직접 타이핑해야하나 걱정하지 마세요. 아래에서 메모장 파일로 다운로드 받으실 수 있습니다. 복사 붙여넣기로 쉽게 활용하시기 바랍니다.
.png)
CSS 코드 추가
✅ CSS 화면에서 맨 아랫줄에 아래 코드를 삽입합니다. 여기에서 목차 박스와 글자 등을 조정할 수 있습니다.
CSS 코드도 아래에서 메모장 파일로 다운로드 받으실 수 있습니다.
.png)
목차 반영 확인
파일을 업로드하고 코드를 삽입하셨으면 적용을 누릅니다. 다시 관리자 화면으로 돌아와서 글을 작성해 봅니다. 이때 본문 내용에 제목1 (소제목, h2)를 적용하셔야 목차가 생깁니다. 목차가 잘 적용되는지는 글쓰기 화면에서 보이지 않으며 미리 보기를 누르시면 글 발행 전에 확인하실 수 있습니다.
마치며
이상 티스토리 블로그에 목차를 만드는 방법을 안내해 드렸습니다. 순서대로
적용하셔서 잘 활용해 보시기 바랍니다.
