본문 바로가기
Cute Bow Tie Hearts Blinking Blue Pointer
티스토리꾸미기

티스토리 움직이는 자동목차 TOC 생성하는 법 블로그 꾸미기

by 들기름메밀국수 2025. 2. 21.
반응형

 

블로그 글을 작성하다 보면 내용이 길어지기 마련인데, 목차를 보면 한번에 내용을 바로 찾을 수 있기때문에 또 검색 갈기다가 가져온 HTML 이용해서 티스토리꾸미기(티꾸) 

 

 

 

 

티스토리 자동목차 생성하는 법

티스토리 게시물 작성시 본문의 문단을 자동으로 설정하는 방법인 TOC(Table Of Contents) 자동목차 생성해보기

 

 

 

※먼저 본격적으로 시작하기 전에 알아두면 좋을 정보 중 하나

위 사진처럼 제목1 / 제목2 / 제목3 글자 크기 조정을 자동으로 인식하는 코드를 생성해서 자동목차가 만들어지는 원리로

티스토리 글쓰기에서 [기본모드] 를 [마크다운] 변환해보면

제목1 - h1

제목2 - h2

제목3 - h4에 해당되는것을 볼 수 있다.

 

그렇기때문에 TOC 스크립트에 코드를 적용해서 목차가 보여진다.

 

*본문글 크기로 작성한 글은 나타나지 않음!

 

1. 티스토리 관리-스킨편집

늘 그렇듯이 티스토리 관리 홈으로 들어간 후 [스킨편집] - [html 편집] 창으로 들어가준다.

 

 

2. HTML코드 추가하기

✔ 첫번째 head 코드 추가

윗부분에 있는 <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 -->

 

 

✔ 두번째 코드 추가

 

ctrl + F(윈도우) 혹은 커맨드+F(맥) 찾기를 통해

content-wrap을 검색해주고

바로 밑에 두번째 코드를 넣어준다.

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

본문이 시작되는곳에 넣어주는것으로 볼 수 있다고 한다.

 

 

✔ body 최하단 코드 추가

역시나 같은 방법으로 <body>와 </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, h4',
            hasInnerContainers: false
        });

        $(document).ready(function(){
            $('.toc').addClass('toc-absolute');

            var toc_top = $('.toc').offset().top - 400; /*165~200~400*/
            $(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-->

 

 

3. CSS 추가하기

마지막으로 CSS 최하단에 코드를 추가해주면 완료된다.

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

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

.toc { 
	/* 우측 -right, whkcmr - left */
  left: calc((100% - 720px) / 2 - 500px);
	width: 250px;
	padding: 10px;
	box-sizing: border-box; 
	z-index: 0;
} 

.toc-list { 
	margin-top: 10px !important; 
	font-size: 0.9em; 
} 

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

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

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

 

 

4. 목차 적용 모습

적용하기 버튼까지 눌러준 후 글쓰기를 통해 제목1 / 제목2 / 제목3 글자 크기 조정을 통해 글을 발행해주면 위와같이 스크롤에 따가서 함께 움직이는 자동목차가 생성된것을 볼 수 있다.

 

네이버블로그의 경우에는 스킨 편집이나 글쓰기 등에 대해서는 모든 사람이 쉽고 편하게 시작할 수 있어서 좋긴 한데, 티스토리도 시작해보니 나름 꾸미는 맛이 있고 다양한 코드를 넣어가면서 나만의 블로그로 만드는 재미가 있는 느낌,, 일단 두개 다 각자의 매력이 있기때문에 둘 다 운영해보는걸루,,

 

 

 

자동목차 생성으로 한층 더 편해진 티스토리 블로그

들기름메밀국수 블로그도 나날이 발전해간다구요

 

optd.tistory.com

들기름메밀국수 블로그

많관부,,

 

 

 

-REF-

https://jstar0525.tistory.com/256

 

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

Tistory 자동 목차(TOC) 적용하기 0. 개요 1) TOC 이번에는 아래의 그림과 같이 본문 옆에 위치하여 소제목 목차를 누르면 자동으로 이동하는 기능을 블로그에 적용하겠습니다. 이를 Table of Contents (TOC)

jstar0525.tistory.com

 

https://moneymole.tistory.com/entry/

 

티스토리 블로그_왼쪽 사이드 스크롤 반응형 자동 목차 만들기

티스토리에 자동 목차를 넣는 방법은 여러 가지가 있습니다. 그중에서 저는 본문 내에 넣는 목차와, 본문 바깥 사이드에 넣는 목차를 적용해 보았습니다. 이번 글은 본문 바깥 사이드에 넣는 목

moneymole.tistory.com

 

 

 

반응형
저작자표시 비영리 변경금지

'티스토리꾸미기' 카테고리의 다른 글

티스토리 마우스 커서 효과 적용 색상 변경하는법  (3) 2025.02.28
티스토리 블로그 마우스 커서 꾸미는법 사이트 코드  (0) 2025.02.27
블로그 폰트 바꾸는 법 CSS html 티스토리 꾸미기  (0) 2025.02.20
티스토리 블로그 형광펜 밑줄 효과 넣는법 코드 공유  (0) 2025.02.19
파비콘 만들고 적용하는 법 정리 티스토리 꾸미기  (2) 2025.02.18

관련글

티스토리툴바