[tistory] 티스토리 목차 자동으로 만드는 방법(+Tocbot)

티스토리 블로그를 하다보니 목차를 가지고
글이 어떤 내용을 가지는지 알 수 있으면 좋겠다는 생각을 했습니다.
목차를 게시글마다 추가하려니 이제까지 작성한 게시글을 모두하기에는 시간과 노력이 많이 듭니다.

스킨에 공통적으로 적용해서 수정하는 방법으로 스킨과 script, css를 조금 수정해서 적용해보도록 하겠습니다.

tscanlin.github.io/tocbot/

---

1. 스킨 설정

1-1. js와 css 추가

스킨 편집 ->

태그 안에 아래 소스를 추가합니다.

<!-- tocbot --> 
<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"> 
<!-- tocbot -->

1-2. toc 태그 추가

ctrl-f 검색으로 's_permalink_article_rep' 태그를 찾아서 바로 아래에 넣었습니다.

목차가 들어갔으면 하는 위치에 추가합니다.

참고로 보호글 부분이 아닌 hgroup 태그 위입니다.

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

1-3. javascript 추가

태그 바로 위에 작성해줍니다.

<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>

1-4. css 작성 페이지에서 추가

.toc-absolute {
  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;
  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;

2. 결과 확인

어떤 페이지를 들어가도 목차가 나타납니다