[티스토리] 블로그에 TOC( table of contents) 적용하기 (반응형 포함)

// 참고
1. tocbot

https://www.npmjs.com/package/tocbot 
1. https://depast.tistory.com/40#1-html-%EC%88%98%EC%A0%95
// header
<!-- toc -->
<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 -->

// body 
<div class="toc-wrap">
            <div class="toc__btn-area">
              <span class="toc__btn">TOC</span>
            </div>
<div class="toc"></div>
</div>

// script
<script>
    // toc
    $(document).ready(function(){
      var content = document.querySelector('.entry-content')
     
      if(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,
extraLinkClasses: 'toc-add-isActive',
      });
        $('.toc-wrap').addClass('toc-wrap-absolute');
          
          var toc_top = $('.toc-wrap').offset().top;
          $(window).scroll(function() {
            if ($(this).scrollTop() >= toc_top) {
              $('.toc-wrap').addClass('toc-wrap-fixed');
              $('.toc-wrap').removeClass('toc-wrap-absolute');
          } else {
            $('.toc-wrap').addClass('toc-wrap-absolute');
            $('.toc-wrap').removeClass('toc-wrap-fixed');
          }
        });

        $( ".toc__btn" ).click(function() {
          $('.toc__btn').addClass('toc__btn-active');
          $('.toc').addClass('toc-show');
        });
        window.onclick = function(event) {
          if (!event.target.matches('.toc__btn')) {
            $('.toc__btn').removeClass('toc__btn-active');
            $('.toc').removeClass('toc-show');
          }
        }
      }else{
        $('.toc-wrap').addClass('toc-wrap-noneActive');
      }
    });
  </script>

// css
.toc-wrap{
  z-index: 100;
}
.toc-wrap-absolute{
  position: absolute;
  right: 1.5rem;
}
.toc-wrap-noneActive{
  display: none;
}
.toc-wrap-fixed {
  position: fixed;
  right: 1.5rem;
  top: 0.5rem;
}
.toc__btn-area{
  text-align: right;
} 
.toc__btn{
  background: white;
  border: 1px solid #eee;
  display: inline-block;
  font-size: 11px;
  text-align: center;
  line-height: 32px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.toc__btn-active{
  background: #eee;
  font-weight: bold;
}
.toc__btn:hover{
  cursor: pointer;
}
.toc{
  background: white;
  border: 1px solid #eee;
  border-radius: 5px;
  margin-top: 5px;
padding: 5px;
  width: 190px !important;
  display: none;
}
.toc-show{
  display: block;
}
.toc-list {
  margin-top: 10px !important;
  font-size: 0.9em;
}
.toc > .toc-list li {
  margin-bottom: 10px;
  width: 100%; 
  overflow:hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap;
}
.toc > .toc-list li:last-child {
  margin-bottom: 0;
}
.toc > .toc-list li a {
  text-decoration: none;
}
.toc-add-isActive.is-active-link{
  color: dodgerblue;
}
.toc-add-isActive.is-active-link::before {
  background-color: dodgerblue;
}
.toc-link.node-name--H1{
  font-size: 20px;
}
.toc-link.node-name--H2{
  font-size: 18px;
}
.toc-link.node-name--H3{
  font-size: 14px;
}

티스토리｜스킨 수정｜긴 글에 목차넣기｜차례｜TOC｜Table of Contents｜제목 1,2｜+ 복사 안되는 블