본문 바로가기
도움되는 정보

티스토리 자동 목차 만들기 초간단 버전

by PraoB 2023. 4. 28.
반응형

티스토리 자동 목차 만들기 초간단 버전으로 설명해 드리겠습니다. 순서대로 따라 하세요. 자동 목차 만들기를 찾아오셨다면 티스토리 메뉴는 설명을 안 해도 다 아실 거라 생각하고 부연설명이나 캡처사진은 생략, 핵심내용만 다루었습니다.

 

목차

     

    1. 파일 다운로드

    jquery.toc.min.js
    0.00MB

    2. 티스토리에 파일 업로드

    • 꾸미기 - 스킨편집 - html 편집 - 파일업로드 - +추가 - 1번에서 다운로드한 파일선택 - 적용

    3. html 코드삽입

    • <body> </body> 사이에 다음코드를 복사하여 삽입 하세요. 저는 북클럽스킨 입니다.
    <script src="./images/jquery.toc.min.js"></script>
    <script>
        // 목차 생성
        $(document).ready(function() {
            $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});
        });
    </script>

    티스토리 목차생성 html 코드삽입
    목차생성 코드삽입 위치

    4. 서식 만들기

    • 콘텐츠 - 서식관리 - 서식 쓰기 -> 글쓰기 모드를 기본모드 -> html에서 다음코드를 복사해 붙여 넣기

    <div class="book-toc">
    <p data-ke-size="size16">목차</p>
    <ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul>
    </div>

     

    5. 글쓰기에서 목차 서식 붙여 넣기

    • 이제 글쓰기에서 적당한 위치에 보통 첫 설명글 밑에다가 커서 위치시키고
    • 더보기 - 서식  클릭하면 '목차'가 나타나는데 이걸 클릭하면 목차가 생깁니다.
    • 제목1, 제목2 가 자동 목차로 생깁니다.

    목차 샘플
    목차 샘플

    댓글