티스토리 블로그에 TOC 추가하기

마크다운으로 글을 작성하다보면 글이 계층화되어진다. 제목의 크기로 계층을 확인할 수 있지만, 좀 더 가시적으로 보여줄 무언가가 필요했고, TOC를 적용하기로 결정했다.

TOC란?

TOC는 목차(Table Of Content)라는 뜻으로 웹 문서에서는 헤더 태그들을 모아서 계증화하여 보여주고, 클릭 시 해당 헤더 태그로 자동으로 이동해주는 역할을 하는 부분을 뜻한다. TOC를 아주 잘 사용한 사이트로는 나무위키가 있겠다. 나무위키는 설명하고자하는 내용이 계층화되어 있어서 이를 자동으로 목차화해준다. 그리고 위에 언급한 것처럼 클릭시 해당 헤더 태그로 이동하게 된다.

쿠키런: 킹덤 나무위키 목차

TOC 적용하기

아래 소개할 적용 방식은 프라치노 공간 스킨으로 진행한 내용으로, 본인의 스킨에 따라 다르게 적용해야할 수 있습니다.

Tocbot

TOC 관련 스크립트를 모두 짜는 건 어렵기 때문에 Tocbot이라는 npm 라이브러리를 이용한다.

Tocbot 스크립트, CSS 가져오기

우선 Tocbot의 라이브러리 스크립트와 CSS를 가져오는 코드를 head 태그 안에 넣어준다.

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

TOC가 들어갈 위치 정하기

CSS에서 상대위치를 사용하기 때문에 티스토리 글의 본문이 시작하는 부분에 TOC가 들어가는 것이 제일 좋다. 본문이 시작하는 부분은 티스토리 스킨마다 다른데 s_permalink_article_rep 라는 태그를 모두 찾아서 해당 태그 안의 첫번째 위치에 다음 태그를 넣었다. 제대로 안된다면 넣은 태그를 하나씩 지워가면서 확인해보자.

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

TOC의 위치

태그는 꼭 여는 태그와 닫는 태그 둘 다 작성해야한다. 다음과 같이 썼을 때는 원하는 대로 나오지 않는 오류가 발생했다.

<div class='toc'/>

TOC 스크립트

body 태그 안의 마지막에 들어가는 Tocbot 스크립트이다. 코드에서 #article 에 해당하는 부분은 article 태그의 class 혹은 id에 따라 달라지기 때문에 티스토리 스킨의 article 태그에 맞게 수정해서 사용해야한다.

<script>
  var content = document.querySelector('#article')
  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: '#article',
    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>

TOC 스타일링

Tocbot의 스타일링을 위해 CSS도 추가해주자. 다른 스킨과 달리 프라치노 공간은 전체 화면을 덮는 커버를 가지고 있어서 .toc-absolute 부분을 수정해야했다. TOC의 가로 위치는 .toc의 right 값을 수정하면 된다.

/* tocbot */
.toc-absolute {
  position: absolute;
  margin-top: calc(100vh + 165px);
}

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

.toc {
  right: calc((100% - 850px) / 2 - 500px);
  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;
}

참고자료

• https://dailyheumsi.tistory.com/135?category=800540
• https://pwnbit.kr/89