티스토리 블로그에 TOC 적용

TOC

목차(Table Of Contents).
내가 등록한 목록/글 외에 글 내부 내용에 대해서 알아서 목차를 생성해주는 기능이 있다니..
당연히 바로 추가해줘야지 라는 마음으로 서치 시작.

html 코드 수정

난 늘 수정할 위치 찾는 게 제일 어렵더라..

글을 html로 작성하면서 각 글마다 이 귀찮은 소스 추가를 해줘야 하나?라는 생각을 하면서 적용시키려던 찰나, 다행히 마크다운으로 작성된 모든 글에 적용되는 부작용(?)을 얻었다는 글을 참조해서 진행할 수 있었다.

1. 블로그 관리 -> 스킨 편집 -> html 편집 이동

위의 경로를 따라, 스킨의 html 코드가 있는 페이지로 이동한다.

2. script, css 적용

</head> 바로 위에 아래 코드를 붙여 넣는다.
사실 기본 tocbot 사이트에는 body 태그가 닫히기 전 아무 곳에나 넣어도 된다고 했지만..
일단 나도 웹 언어는 잘 모르다 보니 다른 블로그에서 하는 대로 하는 게 마음이 편하니까.

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

3. toc가 표시 될 div 추가

나는 ctrl-f 를 이용해서, <s_permalink_article_rep>를 찾아 그 아래에 붙여 넣었다. (두 번째 태그 아래)
어디든 목차가 들어갔으면 하는 위치에 아래 div code 작성.

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

4. script 작성

</body> 바로 위에 아래 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>

5. CSS 수정

CSS버튼을 눌러서 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;
}

 

적용 후 새로고침 하면 마크다운뿐만 아니라 제목 tag를 쓰는 모든 경우에서 적용된 것을 확인할 수 있다.

 

---

참고 사이트

• API : Tocbot
• 블로그 참조 : 흠시 님, pwnbit 님