[Tistory] 목차(TOC) 적용하기

목차 스타일1 

HTML 변경하기

</head> 바로 전 부분에 코드를 추가해줍니다.

<!-- TOC Start -->
<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">
<!-- TOC End -->

자신의 스킨에서 본문 내용이 시작되는 부분을 찾아 추가해줍니다.

<!-- TOC Start -->
<div class='toc'></div>
<!-- TOC End -->

</body> 바로 전 부분에 추가해줍니다.

<!-- TOC Script Start--> 
<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>
<!-- TOC Script End-->

 

CSS 변경하기

자신의 스킨에 맞게 변경이 필요할 수 있습니다.

/* TOC CSS Start */
.toc-absolute {
  position: absolute;
}
.toc-fixed {
  position: fixed;
  top: 130px;
}
.toc {
  right: calc((100% - 840px) / 2 - 300px);
  width: 180px;
  padding: 0 10px 0 10px;
  box-sizing: border-box;
}

.toc-list {
  margin-top: 10px !important;
  font-size: 12px;
}
.toc > .toc-list li {
  margin-bottom: 10px;
}
.toc > .toc-list li:last-child {
  margin-bottom: 0;
}
.toc > .toc-list li a {
  text-decoration: none;
}

@media screen and (max-width: 950px) {
    .toc {
        display: none;
    }
}
/* TOC CSS End */

 

적용 모습

필자는 티스토리 BookClub 테마 사용했습니다.

 

 

목차 스타일2

파일 업로드

toc.js

0.01MB

toc.css

0.00MB

 

HTML 변경

</head> 앞 부분에 추가해줍니다.

<!--============= TOC =============-->
<script src="./images/toc.js"></script>
<link rel="stylesheet" href="./images/toc.css">

자신의 스킨에서 본문 내용이 시작되는 부분을 찾아 추가해줍니다.

<!-- TOC Start -->
<div class='toc hidden-xs hidden-sm'></div>
<!-- TOC End -->

</body> 앞 부분에 추가해줍니다.

<!-- TOC Script Start--> 
<script>
  var content = document.querySelector('.tt_article_useless_p_margin')
  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: '.tt_article_useless_p_margin',
    headingSelector:'h1, h2, h3',
    hasInnerContainers: false
  });
 
  $(document).ready(function(){
    $('.toc').addClass('toc-absolute');
 
    var toc_top = $('.toc').offset().top - 10;
    $(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 Script End-->

 

CSS 변경

자신의 스킨에 맞게 변경이 필요할 수 있습니다.

/* TOC CSS Start */
.toc {
  position: fixed;
  top: 12%;
  right: 1.0%;
  width: 250px;
  padding: 10px 0px 15px 5px;
  border-radius: var(--default-radius);
  box-sizing: border-box;
  box-shadow: 0px 3px 10px rgb(0 0 0 / 30%);
  background: #59595981;
  }
.toc-list {
  margin-top: 10px !important;
  font-size: 13px;
  padding-right: 8px;
  color:#fff;
  text-overflow:ellipsis;
}
.toc > .toc-list li {
  margin-bottom: 10px;
}
.toc > .toc-list li:last-child {
  margin-bottom: 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.toc > .toc-list li a {
  text-decoration: none;
}
/* TOC CSS End */

 

---

Reference

[티스토리 블로그] 자동 목차 넣기 (TOC)

[Blog] Tistory 자동 목차(TOC) 적용하기 (odyssey 오디세이 스킨)

(티스토리) 본문에 TOC 목차 넣기