티스토리 자동 목차 적용 방법

목차는 항상 글 맨 상단에 위치하도록 하는 제약이 있습니다. 필요에 따라 글 시작 후 중간부터 목차를 넣는 것도 가능합니다.

 

기존 목차 기능 적용하기

필요한 라이브러리 및 자바스크립트, CSS는 아래 글에서 다루었으므로 링크를 참고해주세요.

 

위의 포스팅에서 목차 서식 등록 전까지 적용하면 됩니다. 목차 서식까지 다 적용하면 선택적으로 적용이 가능합니다. 예를 들어 글에 서식을 적용하면 서식을 작성한 위치에 목차가 생성되고 서식을 적용하지 않으면 글 맨 위에 목차가 생성됩니다. 목차가 생성 되는 것을 원하지 않으면 글에 제목1, 제목2, 제목3 스타일을 안쓰면 됩니다.

 

기존 글 내용 중 제목이 아닌 내용에 제목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 스타일을 사용하기만 하면 목차는 자동으로 생성되므로 글 작성이 수월해 집니다.