Tistory에 TOC 추가하기

2020. 10. 3. 01:11ㆍLIFE/Blog

많은 정보를 효율적으로 보기 위해서는 TOC(Table of Contents)가 필수라고 생각한다.
게다가 마크다운을 즐겨쓰는 나에게는 더더욱 추가하고픈 아이템이다~^^

Tocbot

이것 저것 검색해보니 Tocbot을 추가해보기로 한다.

Tistory 설정

Import 설정

<head></head> 태그 안에 아래 코드 추가

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

div tag

<s_permalink_article_rep> 태그를 찾아서 그 아래에 넣는다

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

example

<s_permalink_article_rep>
    <div class="toc"></div>
    <div class="entry-content">
    ...

function script

</body> 태그 바로 위에 추가

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

css

/* tocbot */
.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;
}

오류 해결

아무리 검색해봐도 다른 사람들의 코드도 같은데, 이상하게 내 블로그에서는 TOC가 작동하지 않았다. 결국 콘솔을 열고 오류를 찾아나섰다.

오류를 보니 querySelector의 결과가 null이어서 테이블 생성이 안되던 것!!
문제는 기존 코드와 달리 내 설정에서 내용이 시작하는 class가 달랐다.

결국 클래스 설정을 바꿔주니 정상적으로 작동한다.

~~var content = document.querySelector('.entry-content')~~

var content = document.querySelector('.article_view')
...
tocbot.init({
tocSelector: '.toc',
contentSelector: '

~~.entry-content~~

',
headingSelector:'h1, h2, h3',
hasInnerContainers: false
});

<script>
  var content = document.querySelector('.article_view')
  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_view',
    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>

이제 블로그에 확인하면 정상적으로 생성되고 있다.
다만, 스크롤에 따라 리스트가 visible/invisible 로 바뀌는 설정이 좀 거슬리지만 이건 나중에 한가할 때 다시 살펴보는 걸로~

[REF] 티스토리 블로그에 TOC 적용
[FILE] Portfolio Skin HTML

저작자표시 비영리

'LIFE > Blog' 카테고리의 다른 글

LaTex 수식 입력 (0)	2020.02.03
특수문자 입력하기 (0)	2020.02.03
GitHub Pages Blog 3 - Jekyll Theme (0)	2020.01.31
GitHub Pages Blog 1 - 설치하기 (0)	2020.01.20

Windy Miky의 이런저런