[TISTORY] tocbot 활용한 티스토리 목차 만들기

일상

유달잇 2021. 5. 21. 23:49

728x90

기분전환 겸 블로그를 바꿔보기로 했다!

20일 21일 이틀을 투자해서 스킨을 전체적으로 커스텀하고 본문 왼쪽에 목차를 추가했다!

티스토리는 HTML 편집이 가능해서 블로그를 마음대로 꾸밀 수 있어서 좋은 것 같다

간단하게 목차 만드는 방법을 알려드리겠습니다!

0. 참고 블로그

https://depast.tistory.com/40#%EC%84%9C%EB%A1%A0

1. 블로그 설정 -> 스킨 편집 -> Html 편집 이동

2. Html의 <head> </head> 태그 안에 아래 코드를 넣어준다.

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">

-> <head></head>코드 안에 편한 곳에 넣어주시면 됩니다.

tocbot의 script(동작 코드)와 css(기본적인 디자인)를 불러오는 과정입니다!

3. TOC(목차) 기능을 Html의 <body></body>태그 안에 넣어준다.

  
  <div class='toc'></div>

-> 저는 <body> 안의 <s_permalink_article_rep>의 <div class="skin_view">안에 넣었습니다.

목차의 껍데기 생성해주는 과정입니다!

4. Html에 Script 작성

  
  <script>
    var content = document.querySelector('.entry-content')  <!--여기 -->
    var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
    var headingMap = {}

    Array.prototype.forEach.call(headings, function (heading) {
        var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
                   .split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '')
        headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
        if (headingMap[id]) {
          heading.id = id + '-' + headingMap[id]
        } else {
          heading.id = id
        }
      })

    tocbot.init({
      tocSelector: '.toc',
      contentSelector: '.entry-content',  <!--여기 -->
      headingSelector:'h1, h2, h3',
      hasInnerContainers: false
    });

    $(document).ready(function(){
      $('.toc').addClass('toc-absolute');

      var toc_top = $('.toc').offset().top - 165;
      $(window).scroll(function() {
        if ($(this).scrollTop() >= toc_top) {
          $('.toc').addClass('toc-fixed');
          $('.toc').removeClass('toc-absolute');
        } else {
          $('.toc').addClass('toc-absolute');
          $('.toc').removeClass('toc-fixed');
        }
      });
    });

  </script>

-> </body> 바로 앞에 넣어주었으며 목차 안에 들어갈 것(h1,h2), 위치, 동작 등을 설정하는 겁니다!

위에 보시면  라고 표시한 부분(querySelector / contentSelector)은 각 스킨마다

이름이 달라서 확인하시고 변경해야 합니다.

querySelector / contentSelector 이 곳이 목차가 올라갈 곳으로,

목차가 그려질 종이의 이름을 연결해주는 거라고 보시면 됩니다.

* querySelector / contentSelector 확인하기!

1. 본인 티스토리의 글을 클릭합니다.

2. 컨트롤(Ctrl) + 알트(Alt) + C 를 누르고 글의 본문을 클릭합니다.

3. 위와 같이 뜨면 오른쪽에 마우스를 가져가면 해당 영역이 색칠됩니다. 색칠되는 부분이 목차가 올라갈 곳입니다!!

4. 확인한 후 오른쪽 코드를 보면 아래와 같이 나옵니다.

class의 경우에는 class="article_skin" --> .article_skin을 ' ' 따옴표 안에 변경해주시면 됩니다.

id의 경우에는 id="mArticle" --> #mArticle을 ' ' 따옴표 안에 이름을 변경하시면 됩니다.

저는 class name을 .article_skin으로 변경하였습니다!

5. CSS 추가하기

  
  .toc-absolute {
    position: absolute;
    margin-top:165px;
  }
  .toc-fixed {
    position: fixed;
    top: 165px;
  }

  .toc {
    left: calc((100% - 850px) / 2 - 300px);
    width: 250px;
    padding: 10px;
    box-sizing: border-box;
  }

  .toc-list {
    margin-top: 10px !important;
    font-size: 0.9em;
  }

  .toc > .toc-list li {
    margin-bottom: 10px;
  }

  .toc > .toc-list li:last-child {
    margin-bottom: 0;
  }

  .toc > .toc-list li a {
    text-decoration: none;
  }

-> css에 위의 코드를 추가합니다. 대충 설명드리자면 아래와 같습니다.

.toc-absolute는 목차의 고정 위치이며 magin을 조정하여 여백을 바꿀 수 있습니다.
.toc은 목차 전체의 크기입니다.
.toc-list는 목차의 리스트입니다.
.toc > .toc-list li a 는 목차리스트(.toc-list)의 목록(li)의 하이퍼링크(a)가 있는 경우입니다.

위에서 div class='toc' 설정했던 것 기억나시나요?

html에서 class로 이름을 준 경우 css에서는 .을 붙여서 설정합니다.

ex) class='toc' -> .toc { }

마무리

저는 html, css, js 코드를 알아서 목차의 색깔을 조금 수정했습니다!

script에서 h1, h2, h3까지 자동으로 목차에 올라가게 설정해 둔 상태입니다.

참고로 글쓰기에서 제목 1 은 h2, 제목 2는 h3, 제목 3은 h4로 작성되기에 제목3은 목차에 자동으로 포함되지 않습니다.

코드를 아시는 분들은 편한데로 수정하셔서 쓰시면 됩니다!

728x90

저작자표시 비영리 변경금지

250x250

최근에 올라온 글

TAG more

« 2024/10 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Total

Today

Yesterday

Warm Developer