얼거스 개발 일지

js 라이브러리를 이용하는 방법

• https://jstar0525.tistory.com/256#tistory-자동-목차toc-적용하기
• https://github.com/wbluke/tistory-table-of-contents
• https://seons-dev.tistory.com/entry/티스토리-본문에-TOC-목차-넣기

직접 구현하는 방법

• Gatsby 블로그 만들기 7 - sticky 목차 | techblog - https://ricale.kr/blog/posts/230206-gatsby-7-sticky-toc/

tocbot custom ( 원본 코드 : https://jstar0525.tistory.com/256#tistory-자동-목차toc-적용하기 )

js

// set heading id 
function makeHeading(headings){ 
    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; 
        } 
    }); 
} 

var headingMap = {}; 
var headings = document.querySelector('.article_content').querySelectorAll('.info_post > a.link_title, h1, h2, h3, h4');
makeHeading(headings); 
document.addEventListener("DOMContentLoaded", function() {
    // toc addon
    tocbot.init({ 
        // Where to render the table of contents. 
        tocSelector: '.toc', 
        // 본문 class 태그 이름
        contentSelector: '.article_content', 
        // 목차 접히는 레벨 설정 - 5로 하면 h4까진 안접힘
        collapseDepth: 5,
        // 목차에 띄울 태그 목록
        headingSelector: '.info_post > a.link_title, h1, h2, h3, h4', 
        // For headings inside relative or absolute positioned containers within content. 
        hasInnerContainers: false
    }); 
});


/* 
// 목차 항상 떠있도록 아래 코드 주석처리
$("div.toc.toc-fixed").hide(0);
$(window).scroll(function() { 
    if (Math.round( $(window).scrollTop()) > 0) { 
                $("div.toc.toc-fixed").show(250);
    } else { 
                $("div.toc.toc-fixed").hide(250);
    } 
});
*/

css

/* contents 오른쪽에 붙어있도록 설정 */ 
.toc {
    right: calc((100% - 400px) / 2 - 500px); 
} 

😆