본문 바로가기
카테고리 없음

티스토리 오디세이 스킨 자동목차 기능 TOC 추가

by 삼세번 2023. 4. 11.

티스토리는 소스 편집을 통해 자동목차 TOC(Table Of Contents) 기능을 넣을 수 있습니다. 자동목차 기능이 있으면 글의 내용이 길 때 글을 읽는 사람이 원하는 목차를 바로 클릭해서 볼 수 있다는 장점이 있습니다. 한번만 설정하면 모든 글에 적용되기 때문에 읽는 사람의 편의성을 위한 기능을 추가하고 싶은 분은 적용해봐도 좋을 것 같습니다. 

참고로 이 기능은 오디세이 스킨에만 적용되므로 다른 스킨을 사용하고 계신분은 구글에 스킨명 + TOC 자동목차를 검색하여 적용하시기 바랍니다. 그럼 TOC 적용방법 살펴보겠습니다. 

 

자동목차 TOC 적용방법

1~5단계 순서대로 따라해보세요.

 

1. 블로그 관리 > 스킨편집 > HTML편집

2. <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 -->

3. <body>와 </body> 사이에 있는 218번 라인 근처, <!-- 에디터 영역 --> 위쪽에 아래코드 복사 붙여넣기

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

 

4. </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('.article-view').querySelectorAll('h1, h2, h3');
	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: '.article-view', 
		// Which headings to grab inside of the contentSelector element. 
		headingSelector: 'h1, h2, h3', 
		// 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()) > 400) { 
					$("div.toc.toc-fixed").show(250);
		} else { 
					$("div.toc.toc-fixed").hide(250);
		} 
	}); 
</script>
<!-- toc script end-->

5. CSS 가장 밑에 아래 코드 복사 붙여넣기

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

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

.toc { 
	left: calc((100% - 720px) / 2 - 300px);
	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; 
}

 TOC 적용 결과

글에서 스크롤을 내리면 좌측에 목차가 생긴 것을 볼 수 있습니다. 

 

자동목차를 적용하기 위해서는 글쓰기할 때 목차로 지정하고 싶은 부분을 제목1 또는 제목2 적용을 해주어야 합니다. 그렇게 글을 작성하고 나면 좌측에 자동목차가 자동으로 생성됩니다. 

 

오늘은 티스토리 자동목차 TOC 기능을 적용해봤는데요. 화면이 넓은 PC 에서는 자동목차가 적용된 것을 확인하였지만, 모바일에서는 보이지 않는 것 같습니다. 아무래도 모바일은 화면이 작아서 그런 것 같네요. 

 

그럼 오늘 글은 여기서 마무리하고 즐거운 티스토리 시간 보내세요!

티스토리툴바