티스토리 블로그 Tocbot 자동목차넣기

티스토리 블로그 글 작성시 목차를 추가하는것은 매우 번거로운 작업입니다. 거기에 링크까지 추가한다면 HTML 코드를 수정하면서 적지 않은 시간을 글 하나에 매달려야 합니다. 이럴때 목차를 자동으로 생성해주는 Tocbot 라이브러리를 사용하면 매우 간단한 방법으로 목차를 추가할 수 있습니다.

❏ Tocbot 사용 준비하기

1. 티스토리 관리페이지 열기

블로그 주소 뒤에 /manage 를 입력하면 블로그 관리자 페이지가 열립니다.

https:// [ 블로그주소 ] /manage

2. 스킨편집 → HTML 편집

티스토리 블로그 관리페이지로 돌아와서 스킨편집 → html 편집 페이지에 들어가 주세요

3. HTML 코드 수정

아래 코드는 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">

HTML 탭에서 <head> 와 </head> 사이에 아래 이미지와 같이 복사한 코드를 붙혀넣기 합니다.

아래 코드는 불러온 Tocbot 라이브러리를 적용시켜주는 코드입니다.
아래 코드를 복사해주세요.

<script>
document.addEventListener("DOMContentLoaded", () => {
	if (!location.pathname.startsWith("/entry/")) {
		return
	}
	var content = document.querySelector(".entry-content");
	var inner = document.querySelector(".inner .inner");
	var headings = [...content.querySelectorAll("h1, h2, h3, h4")].filter( e => !e.parentElement.classList.contains('another_category'));
	var headingMap = {};
	if (headings.length <= 1) {
		return
	}

	headings.forEach(function (heading) {
    	var id = heading.id ? heading.id : heading.textContent
        				.trim().toLowerCase().split(" ").join("-")
        				.replace(/[\!\@\#\$\%\^\&\*\(\):]/gi, "");
		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, 
		activeLinkClass: 'toc-active-link',
		disableTocScrollSync: false,
		collapseDepth: 60,
		ignoreSelector: '.another_category h4, .no-toc',
	});
});
</script>

HTML 탭에서 </body> 태그 위로 아래 이미지와 같이 복사한 코드를 붙혀넣기 합니다.

4. CSS 수정

아래 코드는 Tocbot 으로 생성한 목차의 스타일을 정하는 코드입니다.

아래 코드를 복사해주세요.

(기본 스타일을 그대로 사용한다면 이단계는 넘어가 주세요)

.toc-link {
	text-decoration: none;
}
.toc-link:hover {
	text-decoration: underline;
}
.toc-link:before {
	background-color: transparent !important;
}
.toc-list-item {
	font-size: 1.0375em !important;
	color: #222 !important;
}

CSS 탭에 아래 이미지와 같이 복사한 코드를 붙혀넣기 합니다.
(붙혀넣는 위치는 아무곳이나 상관 없습니다^^)

저는 기본스타일에서 크게 수정하지 않았습니다. 원하는대로 CSS 코드를 수정하면서 디자인을 꾸며보세요 😄

❏ Tocbot 자동목차 사용방법 1

글을 작성시 자동으로 목차를 최 상단에 추가해주는 방법입니다.

아래 코드는 글 최상단에 <div class="toc"> 를 추가해주는 코드입니다.
아래 코드를 복사해주세요.

var inner = document.querySelector(".entry-content div");
let toc = document.createElement('div');
toc.className = 'toc';
inner.prepend(toc);

아래 이미지와 같이 tocbot.init({ 상단에 코드를 붙혀넣기 해주세요.

블로그 글을 작성하면 아래 이미지와 같이 자동으로 목차가 추가됩니다.

❏ TOC 자동목차 사용방법 2

사용방법 1 과 달리 자동으로 목차가 생성되지 않고 글 작성시 코드를 추가해줘야 자동목차가 생성됩니다.

아래와 같이 티스토리 블로그 글 작성할때 목차를 추가할 부분에 HTML 블럭을 추가해줍니다.

HTML 블럭에 <div class="toc"></div> 코드를 입력하고 확인 버튼을 누릅니다.

블로그글을 작성완료하면 아래와 같이 추가된 목차를 확인할 수 있습니다.

처음에 HTML, CSS 코드 한번 추가하면 자동으로 목차가 추가되는 기능을 누릴 수 있습니다. 목차를 원하는 부분에 추가하고 싶은것은 선택이구요. 복잡해보이지만 그냥 붙혀넣기만 하면 끝입니다. 이상으로 Tocbot 으로 자동목차넣기 작업을 마치겠습니다 😀

Tocbot 문서참고
https://tscanlin.github.io/tocbot/

저작자표시 비영리 변경금지 (새창열림)

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

티스토리 블로그 폰트설정 3가지 방법 (0)	2022.10.12
티스토리 블로그 PrismJS 코드 하이라이트 (1)	2022.10.06
티스토리 블로그 설정하기 (0)	2022.09.30
코딩으로 레벨업 시작합니다. (0)	2022.09.29