티스토리 목차 완전 자동으로 생성하기 (서식 저장 불필요)

이번에는 서식에서 목차 태그를 끼워 넣는 것 조차 귀찮은 분들에게 추천드리는 방법입니다. 다만 목차는 항상 글 맨 상단에 위치하도록 해야한다는 제약이 있습니다. 필요에 따라 글 시작 후 중간부터 목차를 넣어야 하는 분이 아니라면 큰 문제는 아니라고 봅니다.

 

목차

 

기존 목차 기능 적용하기

필요한 라이브러리 및 자바스크립트, CSS 코드는 아래 글에서 이미 다루었으니 새로 작성하지 않고 링크로 대체 하겠습니다.

 

티스토리 글에 자동으로 목차 넣기

티스토리 글에 자동으로 목차 넣기

위 포스팅에서 목차 서식 등록 전까지 적용하시면 됩니다. 목차 서식까지 다 적용하시면 선택적으로 적용이 가능합니다. 예를 들어 글에 서식을 적용하면 서식을 작성한 위치에 목차가 생성이 되고 서식을 적용하지 않으면 글 맨 위에 목차가 생성되게 됩니다. 목차가 생성 되는 것을 원하지 않으신다면 글에 제목1, 제목2, 제목3(h2, h3, h4 태그) 스타일을 쓰지 말아야 합니다.

 

기존 글 내용 중 제목이 아닌 내용에 제목1, 제목2, 제목3 스타일을 사용한 적이 있다면 필히 체크하여 수정하시거나 수정해야 할 내용이 부담될 정도로 많다면 이 기능을 적용하지 않는 편이 낫습니다.

 

스크립트 수정하기

티스토리 글에 자동으로 목차 넣기 - 스크립트 적용 에서 적용한 스크립트를 조금 손 보면 됩니다.

<script>
    // 목차 생성
    $(document).ready(function() {
        var $toc = $("#toc");
        if($toc.length == 0) {
            var firstContent = $('.tt_article_useless_p_margin').children().eq(0);
            var titleLength = $('.tt_article_useless_p_margin h2,h3,h4').length - $('.another_category h4').length - $('h3.tit_list_type').length;
            if(titleLength > 0 && firstContent.length > 0) {
                firstContent.before('<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>');
                $toc = $("#toc");
            }
        }
        if($toc.length > 0) {
            $toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});
            if($('.another_category').length > 0) {
                $toc.find('li:last').remove();
            }
        }
    });
</script>

글 내에 목차 태그가 있는지 검사해서 없으면 글 맨 위에 넣어 주도록 수정한 코드 입니다. titleLength 구하는 부분은 스킨마다 다를 수 있습니다. 글 전체 h2, h3, h4 태그 개수에서 스킨에서 자체적으로 h2, h3, h4 태그를 쓰는 경우 또는 카테고리 다른 글 보기 플러그인을 적용하면 생성되는 h4 태그를 빼고 계산해 주기 위한 부분이므로 적용하실 때 유의해 주세요. 개념 자체는 어렵지 않습니다. 기존에 목차 생성 기능 적용한 적이 있으신 분은 위 코드로 대체해 주시면 됩니다. 기존 코드는 제거하셔야 합니다.

잘 안 되거나 더 궁금하신 점은 댓글 남겨 주세요.

 

 

결과 확인

기존 글 중에 제목3(h4) 스타일을 적용하여 작성한 글이 있는데 이와 같이 제목으로 인식하여 목차가 생성되었습니다. 의도치 않게 이런 케이스가 발생할 수 있으니 주의해 주세요.

 

제목 스타일을 제거하고 다른 스타일을 적절히 적용하였더니 목차가 다시 사라진 것을 확인할 수 있습니다.

 

앞으로 글에서 제목1, 제목2, 제목3 스타일을 사용하기만 하면 목차는 자동으로 생성되므로 글 작성이 한결 수월해 지리라 생각합니다. 모두 유용하게 사용하시길 바랍니다.

 

감사합니다 :)

 

티스토리 목차 글머리 서식 변경하기

티스토리 목차 글머리 서식 변경하기

티스토리 떠 다니는 플로팅 목차 만드는 방법 (초급 버전)

티스토리 떠 다니는 플로팅 목차 만드는 방법 (초급 버전)

티스토리 떠 다니는 플로팅 목차 만드는 방법 (고급 버전)

티스토리 떠 다니는 플로팅 목차 만드는 방법 (고급 버전)

티스토리 모바일에서 유용한 떠 있는 플로팅 목차 위치 이동 방법

티스토리 모바일에서 유용한 떠 있는 플로팅 목차 위치 이동 방법

티스토리 목차 링크 클립보드 복사하기

티스토리 목차 링크 클립보드 복사하기