티스토리 목차 편하게 자동 생성 하기 (인용구, 구분선 활용)

이번 포스팅은 아래 글의 2번까지 진행 후, 적용 가능합니다.
(2. jquery.toc.min 파일 티스토리에 업로드 하기)

티스토리 목차 자동 생성 설정 방법 (기본 설정)

티스토리 목차 자동 생성 설정 방법 (기본 설정)

1. 목차 적용 기준 설명

목차 문구 인식 방식

티스토리 글쓰기

티스토리 글쓰기에서 제공하는 '인용구' 중, 위의 이미지에 표시된 인용구를 추가합니다.
글의 본문에서 해당 인용구의 순서대로 목차를 생성합니다.

목차 위치 설정 방법

티스토리 글쓰기

티스토리 글쓰기에서 제공하는 '구분선' 중, 위의 이미지에 표시된 구분선을 추가합니다.
글의 본문에서 해당 구분선이 첫 번째로 추가된 위치에 목차를 생성합니다.

2. 스크립트 추가

'티스토리 관리 > 꾸미기 > 스킨 편집 > html 편집'으로 이동합니다.

티스토리 관리

티스토리 관리 스킨편집

HTML 탭

HTML탭에서 '</body>'항목 바로 위(빨간 네모 박스)에 아래의 스크립트를 복사해서 붙여 넣어 줍니다.

<script type="text/javascript">
	$(function() {
		(function(){
			const $locToc = $('div.content-wrap hr[data-ke-style="style8"]').first();
		if ($locToc.length === 1) {
			$locToc.after('<div id="divToc"><p id="eTitList">목차 <span>&#8659;</span></p><ul id="toc" style="display:none;"></ul></div>').remove();
			$('#eTitList').click(function(e){
				const $this = $(this);
				$('#divToc ul').slideToggle(400, function(){
					$(this).is(':visible') ? $this.find('span').html('&#8657;') : $this.find('span').html('&#8659;');
				});
			})
			$('#toc').toc({content: 'div.entry-content', headings: 'blockquote[data-ke-style="style2"]'});
		}
		})();
	});
</script>

3. CSS 추가

2번을 참고하여 '티스토리 관리 > 꾸미기 > 스킨 편집 > HTML 편집 > CSS탭'으로 이동합니다.

#divToc {
	border-style: dashed !important;
 	border: 2px #000000;
 	padding: 5px 20px 5px 20px;
	background-color: #808000;
}
#divToc p {
	font-weight: bold;
	font-size: 1.2em !important;
	margin-bottom: 5px !important;
	cursor: pointer;
}
#divToc ul {
	list-style: none;
}
#divToc ul li {
	padding-left: 0;
}
#divToc ul li a{
	color: #5eb8db;
	font-size: 1.1em;
}

CSS탭의 내용 맨 밑에 위의 코드를 복사 붙여 넣기 해줍니다.
#000000는 색상값이므로 수정하셔서 사용하시면 됩니다.

4. 목차 생성 확인

위의 1, 2, 3번을 적용하신 후, 티스토리 글쓰기에서 미리 보기 또는 글을 발행하시면 아래와 같이 구분선이 위치한 곳에 목차가 생성된 것을 확인하실 수 있습니다.

티스토리 목차 클릭 전

티스토리 목차 클릭 후