티스토리 자동 목차, tocbot 설정하기

250x250

Notice

Recent Posts

Recent Comments

Link

Github

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

HyunJun 기술 블로그

티스토리 자동 목차, tocbot 설정하기 본문

ETC

티스토리 자동 목차, tocbot 설정하기

공부 좋아 2023. 6. 1. 16:59

728x90

1. toc

toc는 table of contents의 약자로, 목차를 의미합니다. 에디터에 따라 다르지만, 보통은 H1, H2, H3, H4 태그의 경우 목차로 인식하여 자동으로 목차를 만들어 주기도 합니다.

2. 결과 미리 보기

글 작성 시, 아래처럼 제목1, 제목2, 제목3에 따라 목차가 TOC로 자동 생성되게 구현해 보도록 하겠습니다.

3. 스킨 편집

티스토리 스킨 편집 -> HTML 편집으로 들어갑니다.

3-1. HTML 편집

아래처럼 head 사이에 tocbot 라이브러리와 css 파일을 포함시켜 줍니다.

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

보통, 스킨마다 다른데 본문 내용이 나오는 곳을 찾은 후에 (기존 본문 내용) 그 위에 toc 부분을 추가해 줍니다. 참고로 저는 #2 스킨입니다. 본문과 관련된 class 이름이 article-view, content 등 저와 다를 수 있습니다.

<!-- toc -->
<div class='toc toc-fixed'></div>
<!-- toc -->

<!-- 기존 본문 내용 -->
<div class="area_view">
    .....본문
</div>

HTML의 </body> 바로 위에 아래와 같은 코드를 작성해 줍니다. HTML 페이지의 아랫부분에 작성하는 이유는 제목 크기에 따라 h1, h2, h3, h4 등의 데이터를 읽어와서 TOC로 표현해야 하기 때문에, 문서의 데이터들(<body>제목1, 제목2</body>) 등이 먼저 읽혀야 하기 때문입니다.

<!-- toc script start-->
<script> 
    // 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('.area_view').querySelectorAll('h1, h2, h3, h4');
    makeHeading(headings); 
    document.addEventListener("DOMContentLoaded", function() {
        // toc addon
    tocbot.init({ 
        // Where to render the table of contents. 
        tocSelector: '.toc', 
        // Where to grab the headings to build the table of contents.
        contentSelector: '.area_view', 
        // Which headings to grab inside of the contentSelector element. 
        headingSelector: '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);
        } 
    }); 
</script>
<!-- toc script end-->

이때 중요한 점은 저 같은 경우 본문 내용의 class가 area_view이지만, 스킨에 따라 본문 내용의 class가 article-view 이거나 content이거나 저와 다르다면 위의 코드에서 .area_view를 .article-view 등으로 변경해 주시면 됩니다.

3-2. CSS 편집

스킨 css 편집의 맨 아래 부분에 추가하면 됩니다.

/* tocbot */ 
.toc-absolute { 
    position: absolute; 
    margin-top: 165px; 
}

.toc-fixed { 
    position: fixed;
    top: 165px; 
} 

.toc { 
    left: 85%;
    width: 250px;
    padding: 10px;
    box-sizing: border-box; 
    z-index: 0;
} 

.toc-list { 
    font-size: 0.9em; 
} 

.toc > .toc-list li { 
    margin-top: 10px;
} 

.toc > .toc-list li:last-child { 
    margin-bottom: 0; 
} 

.toc > .toc-list li a { 
    text-decoration: none; 
}

이제 제목1, 제목2, 제목3을 포함하여 글을 작성하면 결과 미리 보기와 같이 TOC가 자동 생성됩니다.