본문 바로가기

블로그/티스토리

티스토리 사이드 목차 TOC(Table of Contents) 설정 방법 / Letter 스킨

반응형

TOC란?

Table Of Contents 즉, 목차입니다!

내가 작성한 `마크다운` 형식의 파일에서 헤더 태그를 목차로 엮어 보기 쉽게 제공합니다!

출처 : https://tscanlin.github.io/tocbot/

 

적용 방법

1. 블로그 수정 - 꾸미기 - 스킨 편집 - html 편집

 

 

2. <head></head> 안에 코드 넣기

`<head></head>` 태그 안에 `tocbot.css`, `tocbot.min.js`를 붙여 넣기 해줍니다!

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

 

 

3. <s_permalink_article_rep> 바로 밑에 붙여넣기

html 탭에서 ctrl+f를 눌러서 <s_permalink_article_rep> 태그 바로 밑에 아래 코드를 붙여 넣기 해줍니다!

<div class="toc toc-fixed" ></div>

 

 

4. </body>  태그 위에 script 적용

html 탭으로 이동해 `</body>` 태그 바로 위에 아래 코드를 붙여 넣기 해줍니다!

 

여기서 포인트!

querySelector, contentSelector를 `.article_view`로 해주셔야 합니다! Poster 스킨을 적용할 땐 `.entry-content`을 해주시면 됩니다!

 

 

Poster 스킨을 적용하고 싶으시면 아래 글을 확인해주세요!

 

티스토리 사이드 목차 TOC(Table of Contents) 설정 방법 / Poster 스킨

TOC란?Table Of Contents 즉, 목차입니다!내가 작성한 `마크다운` 형식의 파일에서 헤더 태그를 목차로 엮어 보기 쉽게 제공합니다!출처 : https://tscanlin.github.io/tocbot/ 적용 방법1. 블로그 수정 - 꾸미기 -

mingos-habitat.tistory.com

 

var content = document.querySelector('.article_view')
    
contentSelector: '.article_view',

 

<script>
    var content = document.querySelector('.article_view')
    var startContent = document.createElement("h7");
    startContent.classList.add('toc-default-header');
    content.insertBefore(startContent, content.firstChild)
    var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
    var headingMap = {}

    Array.prototype.forEach.call(headings, function (heading) {
        if (heading.parentElement.classList.contains('another_category')) {
          heading.classList.add('another_category_header')
        }
        else {
          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: '.article_view',
      headingSelector:'h1, h2, h3, h4, h7',
      hasInnerContainers: false,
      ignoreSelector: '.another_category_header'
    });

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

      var toc_top = toc.parent().offset().top;
      $(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>

 

 

5. CSS 수정

css 탭으로 가서 제일 밑으로 이동 후 아래 코드를 붙여넣기 해주시면 됩니다!

/* custom */
/*tocbot*/
.toc-absolute {
  display: flex;
  position: absolute;
  margin-top:165px;
}
.toc-fixed {
  position: fixed;
  top: 165px;
}

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

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

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

.toc > .toc-list .toc-link::before {
  margin-top: -0.45em;
  align-items: center;
  align-content: center;
}

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

.toc > .toc-list .node-name--H7 {
  display: none;
}

.toc-default-header {
  display: none;
}

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

.toc-list-item .is-collapsed{
  max-height: 3000px;
}

 

6. 결과 확인하기!

아래 보시는 것처럼 사이드 목차가 생기는 걸 확인하실 수 있습니다! 

 

근데 `제목 2`, `제목 3` 만 적용할 수 있어서 적절히 활용하시기 바랍니다!

반응형