정보/블로그 운영팁

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

아미넴 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

     

    반응형
    그리드형(광고전용)

    댓글71

    • 이전 댓글 더보기
    • 익명 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 22:31 신고

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

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

    • 사랑이네 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

        비밀댓글입니다

    • 애드센드 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')

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

      답글

    • 익명 2022.03.05 01:06

      비밀댓글입니다
      답글

      • 아미넴 2022.03.05 19:50 신고

        처음 말씀하신 목적을 달성하시려면 약간 복잡한 자바스크립트 로직이 필요해 보입니다. 간단히 말씀드리긴 어렵네요.

        두번째 말씀하신건 이해가 잘 안 되는데 도움을 원하시면 확인할 수 있는 글 하나 알려주시면 봐드릴게요.

      • 익명 2022.03.05 20:00

        비밀댓글입니다

      • 아미넴 2022.03.05 20:09 신고

        목차 태그 서식은 따로 떨어져 지정되어 있어야 합니다.
        현재 작성된 글을 보면 목차 태그 안에 제목 태그까지 포함되어 잘못 표시되고 있는 걸로 보이는데 제목은 바깥으로 빼시기 바랄게요.

        좀 더 자세히 말씀드리면 에디터에서 HTML 모드로 바꾼 다음 다음과 같이 되어 있는 부분을
        <div class="book-toc">
        <p>목차</p>
        <h3 data-ke-size="size23">d</h3>
        <h3 data-ke-size="size23">d</h3>
        <h3 data-ke-size="size23">d</h3>
        <ul id="toc"></ul>
        </div>

        아래와 같이 수정해 보시면 됩니다.
        <div class="book-toc">
        <p>목차</p>
        <ul id="toc"></ul>
        </div>
        <h3 data-ke-size="size23">d</h3>
        <h3 data-ke-size="size23">d</h3>
        <h3 data-ke-size="size23">d</h3>

      • 익명 2022.03.05 20:19

        비밀댓글입니다

      • 아미넴 2022.03.05 20:23 신고

        글 에디터 HTML 모드로 봤을 때 다음 태그가 하나만 존재해야 합니다.

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

        확인해 보세요~

      • 익명 2022.03.05 20:38

        비밀댓글입니다

      • 아미넴 2022.03.05 20:45 신고

        말씀하시는 것만 들으면 별 문제 없어 보입니다. 참고로 글 중간 목차 배치는 전부 수작업으로 진행한 거라 이 게시물과는 상관이 없습니다.

        추가 확인을 원하시면 html 모드에서 보이는 코드를 그대로 복사해서 댓글 남겨주세요.

    • 익명 2022.05.05 02:49

      비밀댓글입니다
      답글

    💲 추천 글