정보/블로그 운영팁

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

아미넴 2021. 2. 27.

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

 

목차

     

    기존 목차 기능 적용하기

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

     

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

     

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

    목차를 넣고 싶긴한데 글 쓸 때마다 매번 수작업으로 만든다면 상당히 번거롭겠죠. 그래서 jQuery 플러그인 Table of Contents(TOC)를 이용하여 자동으로 넣는 방법을 소개합니다. 저는 제목1, 제목2로

    sangminem.tistory.com

    위 포스팅에서 목차 서식 등록 전까지 적용하시면 됩니다. 목차 서식까지 다 적용하시면 선택적으로 적용이 가능합니다. 예를 들어 글에 서식을 적용하면 서식을 작성한 위치에 목차가 생성이 되고 서식을 적용하지 않으면 글 맨 위에 목차가 생성되게 됩니다. 목차가 생성 되는 것을 원하지 않으신다면 글에 제목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 스타일을 사용하기만 하면 목차는 자동으로 생성되므로 글 작성이 한결 수월해 지리라 생각합니다. 모두 유용하게 사용하시길 바랍니다.

     

    감사합니다 :)

     

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

     

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

    기본 글머리 기호도 심플하긴 하지만 원하는 모양으로 바꾸면 더 좋을 것 같다는 생각을 했습니다. 기본 글머리 설정 방법 list-style-type - CSS: Cascading Style Sheets | MDN The list-style-type CSS proper..

    sangminem.tistory.com

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

     

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

    목차를 확인하려면 다시 위로 올라가야 하는 불편함을 해소하고자 만들어 보았습니다. 생각보다 깔끔하게 잘 만들어진 것 같아서 공유합니다. 주의) 고급 버전을 먼저 반영하고 초급 버전을 나

    sangminem.tistory.com

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

     

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

    초급 버전에서 좀 더 기능을 강화한 버전을 만들어 보았습니다. 어느 정도 코딩이 가능한 분이어야 수월하게 따라하실 수 있을 겁니다. 이 부분이 어렵게 느껴지시는 분은 다음 초급 버전을 참

    sangminem.tistory.com

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

     

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

    이번에는 플로팅 목차를 드래그 앤 드롭으로 원하는 위치로 이동시키는 기능을 만들건데요. 화면이 좁은 모바일에서 공간을 좀 더 효율적으로 활용하고자 생각하게 되었습니다. 목차가 계속 진

    sangminem.tistory.com

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

     

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

    목차를 클릭하면 해당위치로 바로 가는 기능까지는 지원이 되어 문제가 없는데, 문득 목차 링크를 클릭 한번으로 복사 가능하면 좋을 것 같다는 생각이 들어서 개발하게 되었습니다. 목차 작업

    sangminem.tistory.com

     

    반응형

    댓글61

    • 이전 댓글 더보기
    •  . 2021.06.23 21:24 신고

      선생님 질문있습니다. 목차 앞부분에 동그라미가 표시되는데, 순번으로 표시되게 하려면 어떻게 해야 하나요? 예를 들면
      h2는 1,2,3... h3는 1.1, 1.2, 2.1, 2.2, 2.3 .... 처럼요. h2,h3에 숫자를 직접 입력하면 동그라미와 숫자가 같이 나와서 좀 깔끔해 보이지가 않아서요...
      답글

      • 아미넴 2021.06.23 21:48 신고

        제가 알기로 간단한 숫자 형태는 ul, li 태그의 list-style-type 값을 decimal로 주시면 되구요.
        1.1, 1.2 와 같은 표현 방법은 css에 약간의 코딩이 필요합니다. 다음 링크 참고해 보세요.
        https://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1

    •  . 2021.06.24 23:21 신고

      답변 감사합니다. ㅎㅎ 그런데 번역을 해도 이해를 못하겠내요.. 흠
      답글

    • 익명 2021.06.30 12:57

      비밀댓글입니다
      답글

    • 익명 2021.06.30 13:12

      비밀댓글입니다
      답글

    • 익명 2021.07.01 22:25

      비밀댓글입니다
      답글

    • 꾸우 2021.07.06 02:20

      선생님! 현재 완전자동목차 적용 시 가장 위쪽에 목차가 표시되는데 첫번째 h2 제목 위에 표시되도록 하려면 어떻게 수정하면 될까요? 늘 감사합니다!
      답글

      • 아미넴 2021.07.07 20:12 신고

        jQuery의 insertBefore 메서드를 활용하면 될 것 같습니다.
        예를 들어
        $('목차태그').insertBefore('.content-article h2:first')
        와 같이 하면 될 것 같네요

    • 우와 멋집니다. 제가 해나스킨 사용중인데요 아무리 적용해보려고 해도 잘 안되네요
      해나스킨(https://mochaskin.tistory.com/9) 에서도 사용할수가 있게 좀 도와주세요~ 제발요~ ㅜ.ㅜ
      답글

    • 밈아 2021.08.06 13:58 신고

      안녕하세요! 덕분에 예쁘게 목차 잘 사용하고 있습니다. 감사합니다!
      혹시 해당 기능에서 목차 접기 기능 코드도 추가해주실 수 있을까요? 글이 길어지다보니 목차 부분도 길어져서 보기가 흉(?)하더라구요 ㅜㅜ
      답글

      • 아미넴 2021.08.10 20:20 신고

        안녕하세요~ 시간이 나면 포스팅하도록 해볼게요.
        혹시 바로 해보고 싶으시면 jQuery에 포함되어 있는 slideDown, slideUp 또는 slideToggle 기능을 사용하시면 쉽게 구현이 가능합니다 ㅎㅎ
        링크 하나 남겨드릴테니 참고해 보세요.

        http://www.devkuma.com/books/pages/238

      • 밈아 2021.08.10 20:32 신고

        감사합니다!

      • 빈봉이 2021.08.27 00:32 신고

        혹시 어떤 방법으로 접기 기능 추가하셨나요..?

      • 밈아 2021.08.27 22:31 신고

        ul을 우선 hide()로 숨겨준 다음에 목차를 감싸고 있는 div를 클릭할 때 slideToggle()이 동작되게 해줬습니다!

    • 빈봉이 2021.08.26 23:54 신고

      저는 '목차'라고 적힌 것 아래에 내용들이 목차와 같은 줄에 정렬되지 않고
      '목차'의 '차'가 끝나는 라인에 정렬되게 나오네요...
      왜 이런걸까요
      답글

    • 사랑이네 2021.10.07 10:10

      선생님! 목차 완전 자동으로 맨 앞에 오는게 정말 넘 편하고 좋네요! 그런데 목차가 위에 있는 댓글처럼 첫 h2앞에 오게 하려면
      $('목차태그').insertBefore('.content-article h2:first')
      를 사용하라고 하셨는데, 위 내용을 HTML에 선생님이 이렇게 입력하라고 하신 부분 중 어느곳에 붙여넣어야 할까요?

      HTML에서 이곳저곳에 실험삼아 넣어보고 있는데 혹시 정확한 위치가 있는지 궁금합니다!

      그리고 위 '목차태그' 에는 다른 글자를 넣어야하는지요..?

      늘 감사합니다 ^^
      답글

      • 아미넴 2021.10.07 21:10 신고

        안녕하세요~ 위치는 $toc.toc 메서드 호출 직전이면 될거 같구요.
        목차 태그는 실제 태그를 넣으시면 되는데 '<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>' 이와 같은 태그를 의미합니다 ㅎ

      • 2022.01.20 16:47

        비밀댓글입니다

    • 디노2 2021.10.28 19:23 신고

      감사합니다. 잘 배우고 갑니다 ^^
      답글

    • 노래끄는 버튼은 어디있나요? ㅠㅠ
      답글

    • 익명 2022.01.16 14:47

      비밀댓글입니다
      답글

      • 아미넴 2022.01.16 18:30 신고

        이 게시물은 따로 서식을 작성하지 않고 적용할 수 있는 방법을 설명한 글입니다.
        말씀하신 내용으로는 어떤 부분이 문제인지 알기 어려운데 확인할 수 있는 글 링크 하나 알려 주시면 봐 드릴게요~

    • 익명 2022.01.16 18:35

      비밀댓글입니다
      답글

      • 아미넴 2022.01.16 18:41 신고

        다른 부분에서 에러가 있어서 영향을 미치는 것으로 보이네요.
        arrUserIP 이 변수 작성한 부분 확인해 보시기 바랄게요~ 쉼표 써야 하는 곳에 마침표를 쓴 듯 싶습니다.

      • 2022.01.16 18:55

        비밀댓글입니다

      • 아미넴 2022.01.16 19:24 신고

        아네 필요하시다면 더 도움드릴 수 있긴 할텐데.. 아무튼 도움이 못 되어 유감입니다~

    • 익명 2022.01.16 19:42

      비밀댓글입니다
      답글

    • 익명 2022.01.16 20:11

      비밀댓글입니다
      답글

    • ㅇㅇ 2022.01.17 22:20

      목차 맨 아래에 '~카테고리의 다른 글' 이 붙는데 어떻게 없애나요?
      답글

      • 아미넴 2022.01.18 19:16 신고

        다음 글에서 스크립트 적용 부분의 주의사항 읽어보시면 해당 내용있으니 참고 바랄게요~
        https://sangminem.tistory.com/307

    • 익명 2022.01.18 17:30

      비밀댓글입니다
      답글

      • 아미넴 2022.01.18 19:20 신고

        티스토리는 모바일에서 접속 시 설정한 스킨과 관계없이 모바일 전용 스킨으로 전환하여 보여줍니다. 모바일은 특수한 환경이라 가벼운 스킨으로 통일하고자 하는 의도가 있었을 겁니다. 만약 이 문제라면 URL 주소를 살펴 보시면 경로에 /m이 추가로 들어간 것이 보이실 텐데요. 이 부분은 관리페이지 > 꾸미기 > 모바일 로 이동하셔서 모바일웹 자동 연결을 사용하지 않도록 변경하시면 해결됩니다.

      • 2022.01.18 19:41

        비밀댓글입니다

    • 익명 2022.01.20 16:40

      비밀댓글입니다
      답글

      • Jacob 2022.01.20 17:40 신고

        firstContent.before('<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>');

        $('목차태그').insertBefore('.content-article h2:first')

        이것을 $toc.toc 앞에 어떻게.. 조합을 해서 넣어야 할까요...???

      • 아미넴 2022.01.20 18:59 신고

        안녕하세요~
        1번은 질문이 뭔지 이해를 잘 못했습니다.
        2번은 h2 위에 목차가 나오게 하고싶으시다면 말씀하신대로 insertBefore 메서드를 사용하시면 될 듯 싶습니다. 다음과 같이 적용해 보세요.
        $('목차태그').insertBefore('#content h2:first')

    • 사랑합니다 2022.01.20 19:24

      '<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>'

      위에 있는 이것을

      $('목차태그').insertBefore('#content h2:first')

      목차태그 대신에 넣으란 말씀이신거죠??

      답글

    💲 추천 글