티스토리 뷰



오늘은 그동안 벼르고 별렀던 블로그에 자동 목차 만들기 시간입니다. 요즘 글을 쓰는데 길이가 아주 길어지는 경우가 많아서 스크롤이 길어지는데요. 이럴때 글에 자동으로 목차를 넣어주는 기능을 넣으면 어떨까 해서 알아보니 이미 자동 목차를 만들어주는 라이브러리는 있었고 가져다 쓰기만 하면 된다고 나와있네요. 

 

일단 만들어진 목차를 보시고, 순서를 따라해보면서 알아보겠습니다. 개발적인 요소가 가미되지 않은 한방에 목차만 넣으시겠다는 분은 7번 항목의 전체 스크립트를 자동서식에서 HTML 모드로 변경 한 후 넣으신 다음에 재활용하시면 되겠습니다. 

 

 

 

목차.

     

     

    1. jquery.toc 라이브러리를 다운 받는다.

     

    https://ndabas.github.io/toc/assets/jquery.toc.zip


    2. 압축파일을 해제한다.

     


    3. 티스토리 스킨 편집 --> html 편집 --> 파일업로드 

     

    jquery.toc.min.js 파일을 올려주면 됩니다. 

     


    4. jquery.toc.min.js 임포트!

     

    파일을 업로드 했으니 제 html에서 불러와지게 해줍니다. 용량이 1.1kb 니까 그냥 추가해놔도 상관없을 것 같습니다. </head>를 찾아서 그 위에 아래 내용을 넣어줍시다.

    // 생략...
    <script type="text/javascript" src="https://tistory4.daumcdn.net/tistory/2831812/skin/images/jquery.toc.min.js" ></script>
    </head>
    // 생략...

     

    해당 주소는 jquery.toc.min.js를 업로드 하면 html 편집 화면쪽에서 파일업로드에서 해당 파일을 우클릭해서 링크 복사를 하면 얻어집니다. 

     

    jquery.toc.min.js

     

    아니면 제가 업로드해놓은 주소를 그대로 사용하셔도 무방합니다~.


    5. 아래 목차 코드를 글에 삽입.

     

    <ul id="toc"></ul>
    
    <script type="text/javascript">
      $(function(){
        $("#toc").toc( {content: ".area_view", headings: "h1,h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE'  } )
      });
    </script>

     

    목차

     


      6. jquery.toc 입맛에 맞게 수정

       

      5번에 수정한 버전은 티스토리에서 사용할수 있게 약간 기능을 추가한 버전입니다. 우선 상단에 고정 레이어가 있어서 문단을 가리는 문제를 해결하고, 목차의 컬러를 변경해서 깜빡이게 함으로서 목차에 대해서 인식을 시켜줄수 있는 약간의 기능입니다. 

       

      해당 파일은 원본의 jquery.toc의 깃헙을 포크해서 수정해서 올려두었습니다. 

       

      https://github.com/nhj7/toc

       

      위 경로에서 다운받으시면 top, isBlink, blinkColor의 확장된 기능을 사용할 수 있습니다. 감사합니다. 

       

       


      7. 복잡한 과정 없이 한방에 목차 넣기

      - 모든 티스토리 적용 가능

      <script type="text/javascript" src="https://tistory4.daumcdn.net/tistory/2831812/skin/images/jquery.toc.js"></script>
      <p>목차</p>
      <ul id="toc"></ul>
      <script type="text/javascript">
        $(function(){
          $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h1,h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE'  } )
        });
      </script>
      

       

      - JB 팩토리의 경우

       

      Jquery 로드가 이상하게 되고 있어서 한번 더 위에 로드하는 스크립트를 추가했습니다. 한번 적용해봐주시길 부탁드립니다. 

       

      <script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.2.1.min.js?v=anti_jb"></script>
      <script type="text/javascript" src="https://tistory4.daumcdn.net/tistory/2831812/skin/images/jquery.toc.js"></script>
      <p>목차</p>
      <ul id="toc"></ul>
      <script type="text/javascript">
        $(function(){
          $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h1,h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE'  } )
        });
      </script>
      

       

      JB 팩토리 스킨 같은 경우 jquery 가 정상적으로 로드되고 있지 못한 상황이라서 목차를 넣는 위에다가 한번 더 로드를 한 다음에 시도를 해봐야 할 것 같습니다. 

       

      JB 팩토리 스킨에 적용된 예시, 확인한 모습)

      JB 팩토리 스킨에서 확인했습니다. 

       


      8. 자동 목차(toc)에 CSS를 적용하는 방법

       

      자동목차에 css를 적용하는 방법에 대해서 많은 분들이 관심을 가지고 계신것 같습니다. 

       

      <style>
      	#toc li{color:red;}
      	#toc li a{color:red;}
      </style>

       

      이런식으로 <head></head> 사이에 <style> 태그로 추가를 하면 자동 목록에 대한 css를 추가할 수 있습니다. 

       

       

       

       

      안되는 스킨은 댓글로 제보주시면 시간 되는대로 확인해서 추가해드리겠습니다~ 

       


      댓글
      • 이전 댓글 더보기
      • 프로필사진 Favicon of https://leoish.tistory.com BlogIcon leoish 혹시 transition 기능을 넣고 싶은데 플러그인 개념이라서 좀 어려울까요?ㅜ 2020.07.16 16:05 신고
      • 프로필사진 Favicon of https://nhj12311.tistory.com BlogIcon IT's me 어떤식의 효과를 말씀하시는건지요? 2020.07.16 16:46 신고
      • 프로필사진 Favicon of https://leoish.tistory.com BlogIcon leoish 예를 들어서
        transition: all 1s 1s
        1초 딜레이주고 1초동안 모든 효과 적용
        css에서 이런식으로 애니메이션 효과를 줄 수 있는데 이렇게 효과를 넣을 수 있는지 궁금했어요! 이게 가능하다면 jquery배운지 오래됐지만 딜레이를 주면서 처음에 느리게 갔다가 나중에 빨리가거나 빨리가거나 느리게 가거나 중간에 속도를 조절하는 것도 할 수 있을것 같아서요!
        2020.07.16 17:27 신고
      • 프로필사진 Favicon of https://nhj12311.tistory.com BlogIcon IT's me 불가능하진 않을거같은데요 ㅎㅎㅎ시간날때 해볼게요 2020.07.16 17:55 신고
      • 프로필사진 Favicon of https://leoish.tistory.com BlogIcon leoish 혹시 모바일 버젼에서 안나오는 이슈는 어떻게 해결해야 할까요 ㅜ
        피시에서는 정말 잘 나오는데 모바일만 가면 그냥
        목차 <--까지 나오고 나머지 h1 h2 h3 가져오질 못하네요..ㅜ
        2020.07.16 22:25 신고
      • 프로필사진 Favicon of https://nhj12311.tistory.com BlogIcon IT's me 모바일 버전에서는 제대로 나올수가 없어요. 모바일 버전의 태생적 한계로 봐야 합니다. 2020.07.18 18:18 신고
      • 프로필사진 Favicon of https://bbingse.tistory.com BlogIcon 🆃 𝐵𝐵𝒾𝓃𝑔𝓈𝑒 https://bbingse.tistory.com/835
        이 글보시면 목차라고 나와있는 부분이 있을겁니다.
        2020.07.16 20:37 신고
      • 프로필사진 Favicon of https://nhj12311.tistory.com BlogIcon IT's me 본문에 JB 용 스크립트를 추가했는데 한번 해보시겠어요? 2020.07.18 18:40 신고
      • 프로필사진 Favicon of https://living-tips.tistory.com BlogIcon 5분 정보 jb팩토리 스킨은 잘 안 되네요 ㅜㅜ 2020.07.18 12:58 신고
      • 프로필사진 Favicon of https://nhj12311.tistory.com BlogIcon IT's me 지금 새로운 방법을 소개해드렸는데 그 방법으로 한번 해보시길 바랍니다. 2020.07.18 18:40 신고
      • 프로필사진 Favicon of https://buza.co.kr BlogIcon ◀↗↓↖▶바인 JB 팩토리스킨은 아래 글 참고 하세요.
        https://vine.co.kr/364
        2020.07.18 18:36 신고
      • 프로필사진 Favicon of https://nhj12311.tistory.com BlogIcon IT's me JB 팩토리 스킨 중에서도 되는게 있고 안되는게 있는데 스킨 중에 Jquery 로드가 제대로 안되는게 있는 버전은 잘 안되는것 같습니다ㅣ. 2020.07.18 18:39 신고
      • 프로필사진 Favicon of https://bbingse.tistory.com BlogIcon 🆃 𝐵𝐵𝒾𝓃𝑔𝓈𝑒 오우 제 블로그에 직접 확인해주셨군요. 감사합니다. 바로 적용해보겠습니다. 2020.07.18 19:01 신고
      • 프로필사진 Favicon of https://nhj12311.tistory.com BlogIcon IT's me 사실 JB 팩토리 스킨 제작자분이 jquery 문제를 확인해주면 더 좋았을텐데요. ㅎㅎ 2020.07.18 19:23 신고
      • 프로필사진 Favicon of https://bbingse.tistory.com BlogIcon 🆃 𝐵𝐵𝒾𝓃𝑔𝓈𝑒 와 바로 해결했습니다.
        따로 파일업로드도 안해도 되고 너무나도 간편해서
        정말 편리하게 사용하고 있었는데 갑자기 안되서 걱정했었습니다.

        다시한번 감사의 인사 드리겠습니다. (꾸벅)
        2020.07.18 19:04 신고
      • 프로필사진 Favicon of https://bbingse.tistory.com BlogIcon 🆃 𝐵𝐵𝒾𝓃𝑔𝓈𝑒 흐.. 목차를 h태그로 지정하면 목차마저도 목차 목록에 포함되는군요 ㅠㅠ 너무나도 어렵네요 ㅠ 2020.07.18 19:15 신고
      • 프로필사진 Favicon of https://nhj12311.tistory.com BlogIcon IT's me h 태그를 전부 인식하는 방식이니깐요~ 2020.07.18 19:24 신고
      • 프로필사진 Favicon of https://bbingse.tistory.com BlogIcon 🆃 𝐵𝐵𝒾𝓃𝑔𝓈𝑒 답변 갑사드립니다.
        혹시 질문 하나 더 드려도 될까요?
        따로 목차 글씨를 꾸미고 싶은데
        목차의 링크가 자동으로 css 컬러를 따라가는데
        본문에서 HTML형식으로 삽입할때 따로 컬러만 변경할 수 있는 코드가 있을까요?
        2020.07.18 19:47 신고
      • 프로필사진 Favicon of https://nhj12311.tistory.com BlogIcon IT's me 가능합니다. toc 같은 경우

        <ul id="toc"></ul>

        아래로 들어가게 되니까 toc를 타겟으로 css를 작성하게 되면 적용이 됩니다.

        별도로 본문에 추가를 해놓아야 되겠군요.
        2020.07.19 04:38 신고
      • 프로필사진 Favicon of https://nhj12311.tistory.com BlogIcon IT's me 본문에 css 적용하는 방법에 대해서 적용해두었습니다. 2020.07.19 04:48 신고
      • 프로필사진 Favicon of https://bbingse.tistory.com BlogIcon 🆃 𝐵𝐵𝒾𝓃𝑔𝓈𝑒 감사합니다. 잘 사용하겠습니다. 2020.07.19 15:04 신고
      • 프로필사진 비밀댓글입니다 2020.07.26 15:56
      • 프로필사진 Favicon of https://nhj12311.tistory.com BlogIcon IT's me 1번은 스크립트와 css에 지식이 좀 필요합니다.

        var isBig = true;
        function setResponseWeb(){
        try{
        let window_size=window.getWindowCleintWidth();
        if( window_size > 820 ){
        isBig = true;
        }else{
        isBig = false;
        }
        if( !isBig ){
        $("#tit_navi";).css("padding-top", "0em";);
        $(".area_profile";).append($("#outer_tit_navi";));
        }else{
        $(".btn_menu";).before($("#outer_tit_navi";));
        $("#tit_navi";).css("padding-top", "1.5em";);
        }
        if( window_size > 1200 ){
        $("#area_navi";).addClass("on";);
        }else{
        $("#area_navi";).removeClass("on";);
        }

        }catch(e){
        console.error(e);
        }
        }

        setResponseWeb();
        $(window).resize(() => {
        setResponseWeb();
        });

        이런식으로 지정해야 합니다. 화면 사이즈를 보고 PC의 사이즈임을 판단한 후에 보이게 해야합니다.

        2) 이건 그냥 저도 사용하고 있어서... -_-
        2020.10.10 18:56 신고
      • 프로필사진 비밀댓글입니다 2020.09.20 21:17
      • 프로필사진 비밀댓글입니다 2020.10.08 04:20
      • 프로필사진 Favicon of https://nhj12311.tistory.com BlogIcon IT's me 5번 말고 본문에 한방에 넣기를 따라서 사용하는걸 추천드려요 2020.10.10 18:53 신고
      • 프로필사진 비밀댓글입니다 2020.10.10 14:14
      • 프로필사진 Favicon of https://nhj12311.tistory.com BlogIcon IT's me https://jsfiddle.net/hpwc6ju2/

        이런식으로 css를 지정하면 할수 있습니다~
        2020.10.10 18:52 신고
      • 프로필사진 비밀댓글입니다 2020.10.11 21:47
      • 프로필사진 Favicon of https://nhj12311.tistory.com BlogIcon IT's me 맞아요 조심해서 건드려야해요 2020.10.11 21:50 신고
      • 프로필사진 비밀댓글입니다 2020.10.11 21:52
      • 프로필사진 비밀댓글입니다 2020.10.12 20:49
      • 프로필사진 비밀댓글입니다 2020.10.12 20:51
      • 프로필사진 Favicon of https://kkkapuq.tistory.com BlogIcon 주닝! 안녕하세요 글보고 7번 그대로 따라하려고하는데.. 본문에서 어떻게 써야될지를 잘 모르겠습니다 ㅠㅠ

        <script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.2.1.min.js?v=anti_jb"></script>
        <script type="text/javascript" src="https://tistory4.daumcdn.net/tistory/2831812/skin/images/jquery.toc.js"></script>
        <p>목차</p>
        <h2 data-ke-size="size26">1. 제목1이당</h2>
        <p>할말 블라블라 ~~</p>
        <h3 data-ke-size="size23">1.1 제목1의 1이당</h3>
        <p>블라블라~~</p>
        <h3 data-ke-size="size23">1.2 제목1의 2이당</h3>
        <h2 data-ke-size="size26">2. 제목2다아앋아</h2>
        <h3 data-ke-size="size23">2.1 제목2의 1이다당</h3>
        <ul id="toc"></ul>


        <script type="text/javascript"> $(function(){ $("#toc";).toc( {content: ".tt_article_useless_p_margin", headings: "h1,h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } ) }); </script>


        이렇게 작성했는데, 본문을 적으면 자동으로 위에

        1. 목차1번
        1.1 목차1.1번~
        1.2 목차1.2번
        2. 목차2번
        2.1 목차2번

        이런식으로 h1, h2, h3, h4 따라 자동생성되는걸로아는데..
        어디다 본문을 작성하면 될지를 잘 모르겠습니다 ㅠㅠ 이곳저곳 다 붙여봐도 잘안되네요..
        관련 포스팅 주소는
        https://kkkapuq.tistory.com/95
        입니다.
        2020.11.05 16:47 신고
      • 프로필사진 Favicon of https://miggustory.tistory.com BlogIcon ◁◀▲△☆★ 안녕하세요
        항상 좋은 정보 보고 있습니다

        현재 jb스킨 사용중인데 7번에 한번에 넣으려고 하니 복사도 안되고 1번부터 파일 다운받아서 사용해도 도저히 모르겠네요
        컴맹이라 그런지 다시 한번 설명 부탁 드려도 될까요?
        2020.11.24 09:45 신고
      • 프로필사진 Favicon of https://lunacellstone.tistory.com BlogIcon LunaCell 소중한 정보 감사합니다. ^^ 2020.12.17 17:19 신고
      댓글쓰기 폼