ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 티스토리 자동 목차 적용 방법
    IT-Information/Blog-operation 2024. 4. 26. 23:12

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

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

     

    기존 목차 기능 적용하기

    필요한 라이브러리 및 자바스크립트, 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 스타일을 사용하기만 하면 목차는 자동으로 생성되므로 글 작성이 수월해 집니다.

     

Copyright 2024