군만두의 IT 개발 일지

[티스토리] 블로그 자동 목차 만들기 - jquery.toc.js로 목차 자동 생성 본문

문서/티스토리

[티스토리] 블로그 자동 목차 만들기 - jquery.toc.js로 목차 자동 생성

mandus 2023. 8. 1. 17:05

목차

    📌 요약

    티스토리 블로그에 자동 목차를 추가하는 방법을 정리한다. jquery.toc.js 라이브러리를 활용하여, 글에 삽입한 코드 한 줄이 해당 포스트의 제목 태그(h1~h4)를 자동으로 인식해 목차를 생성한다.

     

    이 글은 [한설날] 티스토리 자동목차 만들기를 참고하여 작성했습니다.

     

    📌 사전 준비

    적용 전 아래 두 가지를 확인한다.

    • 티스토리 블로그의 스킨 편집 권한이 있어야 한다.
    • jquery.toc.js 라이브러리 파일이 필요하다. 아래 1단계에서 다운로드한다.

    📌 적용 방법

    1단계: 파일 다운로드

    이 링크에서 압축 파일을 다운로드한 뒤 압축을 해제한다.

    압축을 해제하면 아래 두 개의 파일이 생성된다.

    • jquery.toc.js
    • jquery.toc.min.js

    2단계: 티스토리에 파일 업로드

    아래 순서대로 파일을 업로드한다.

    1. 블로그 관리 페이지로 이동한다.
    2. 왼쪽 메뉴에서 [스킨 편집]을 클릭한다.
    3. 스킨 편집 창이 열리면 오른쪽의 [html 편집] 버튼을 클릭한다.
    4. 오른쪽 위 메뉴에서 [파일업로드] 탭을 클릭한다.
    5. 오른쪽 아래의 [추가] 버튼을 눌러 다운로드한 두 개의 파일을 선택하여 업로드한다.

    3단계: HTML 수정

    <head> 태그 안에 아래 코드를 붙여넣는다.

    <script type="text/javascript" src="./images/jquery.toc.min.js"></script>
    업로드한 파일의 실제 경로는 [파일업로드] 탭에서 파일 우클릭 → [링크 복사]로 확인할 수 있다.
    확인한 경로로 위 코드의 src 값을 교체하면 된다.

    4단계: 목차 코드를 서식으로 저장

    글마다 목차 코드를 매번 새로 입력하지 않도록 서식으로 저장해두면 편리하다.

    아래 코드를 복사하여 티스토리 [서식 관리]에 저장한다.

    <div class="TOC-table" style="border: 2px solid #fbb; font-weight: bold; padding: 10px; border-radius: 10px;">
<script type="text/javascript" src="여기에_jquery.toc.js_링크_입력"></script>
<p style="text-align: center;">목차</p>
<ul id="toc" style="font-weight: bold; color: #fff;"></ul>
<script type="text/javascript">
$(function(){
  $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h1,h2,h3,h4", top: -90, isBlink: true, blinkColor: '#21B9DE' } );
});
</script>
</div>
    여기에_jquery.toc.js_링크_입력 부분을 2단계에서 업로드한 jquery.toc.js 파일의 실제 링크 주소로 교체해야 한다.
    링크 주소는 [파일업로드] 탭에서 해당 파일을 우클릭 → [링크 복사]로 확인한다.

    5단계: 포스트에서 제목 태그 설정

    목차는 글 안의 제목 태그(h1~h4)를 자동으로 인식하여 생성된다. 따라서 목차에 표시할 문장을 제목 태그로 지정해야 한다.

     

    방법 1: 에디터 버튼 활용

    • 제목으로 설정할 문장에 커서를 두고, 에디터 상단의 [제목1] 버튼을 클릭한다.
    • 단, 이 방법은 태그에 인라인 스타일이 추가되어 블로그 CSS가 적용되지 않을 수 있다.

     

    방법 2: HTML 직접 수정 (권장)

    • 에디터를 [HTML] 모드로 전환한다.
    • 제목으로 설정할 부분의 <p> 태그를 <h2>, <h3>, <h4> 중 원하는 태그로 변경한다.

    6단계: 목차 삽입

    아래 순서대로 글에 목차를 삽입한다.

    1. 포스트에서 목차를 넣을 위치에 커서를 둔다.
    2. 에디터 더보기 버튼(…)을 클릭하고 [서식]을 선택한다.
    3. 4단계에서 저장한 목차 서식을 선택한다.
    4. 글을 발행하면 제목 태그로 설정한 문장들이 자동으로 목차에 반영된다.

    📌 참고사이트

    1) 한설날, "[티스토리] 티스토리 자동목차 만들기", 2021.04.13, https://seollal.tistory.com/306

    2) 남은 인생은 부자, "티스토리 목차 만들기", https://buza.co.kr/30

    3) IT's me, "티스토리 목차 플러그인", https://nhj12311.tistory.com/296

    저작자표시 비영리 변경금지 (새창열림)

    '문서 > 티스토리' 카테고리의 다른 글

    [티스토리] 블로그 구독 버튼 설정 및 구독 피드 확인하기  (0) 2024.01.17
    블로그 본문 스크랩 버튼 만들기 - 제목, URL 복사 기능  (0) 2023.08.01
    '문서/티스토리' Related Articles more
    Comments