목차 기능 추가하기

아래 링크 글을 보고 추가했습니다.

https://maroenispace.tistory.com/250

티스토리 프라치노 공간 스킨에 TOC(목차) 추가하는 방법

라이브러리를 최신 버전으로 변경했습니다.

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

스크립트에 오류가 있어 내용을 일부 수정했습니다.

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