티스토리 블로그 고래 스킨에 목차 자동 생성하는 방법

하루일기 님이 티스토리 스킨 중 하나인 고래 3.4에서 목차가 생성되지 않는 문제가 발생한다고 하여 고래 3.4 스킨에서 목차를 적용하는 방법에 대해 간단히 정리해보았습니다. 이 방법은 고래 스킨 4.0에서도 동일하게 적용이 가능합니다.

티스토리 블로그 고래 스킨에 목차 자동 생성하기

티스토리 블로그의 스킨에 목차를 자동 생성하는 기본적인 방법은 티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법에 자세히 설명되어 있습니다. 고래 스킨에도 마찬가지로 방법으로 적용할 수 있습니다. 다만, 약간의 수정이 필요합니다. 

1. 자바스크립트 파일 및 js 파일을 로드하는 코드 추가하기

위의 글에 설명된 대로 Js 파일을 업로드하여 티스토리 블로그에서 로드하도록 </head> 바로 앞에 아래 라인을 추가합니다. (꾸미기 > 스킨 편집 > HTML 편집 > HTML 탭.)

<script src="./images/jquery.toc.min.js"></script>

2. CSS 코드 추가하기

다음과 같은 CSS 코드를 추가합니다. (꾸미기 > 스킨 편집 > HTML 편집 > CSS 탭)

/* 티스토리 목차 스타일 - TOC */

.book-toc {
border: 1px solid #ccc;
padding: 10px 10px 0px 15px;
background-color: #f5f5f5;
}

.book-toc ul {
list-style-type: decimal;
}

.book-toc p {
font-weight: 550;
margin-bottom: 7px;
}

#toc * {
font-size: 17px;
color: #676767;
}

#toc a:hover {
color: #f00;
}

#toc ul {
margin-bottom: 0px;
margin-top: 5px;
}

#toc > li {
margin-bottom: 15px;
}

#toc {
margin-left: 10px;
}

#toc > li > ul li {
margin-bottom: 5px !important;
}

코드는 적절히 수정하여 사용하세요.

3. 목차 자동 생성 스크립트 추가

마지막으로 목차를 자동으로 생성하는 스크립트를 추가합니다. 고래 스킨에서는 앞서 설명한 글과는 CSS 엘리먼트가 조금 다릅니다. 다음과 같은 코드를 </body> 바로 앞에 추가합니다.

<script>
const table = '<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>';

if ( $( ".e-content h2" ).length > 1 || $( ".e-content h3" ).length > 1 )
 {

$('.e-content h2:first-of-type').before(table);
}
</script>

<script>
$(function(){
$("#toc").toc( {content: ".e-content", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
});
</script>

위와 같은 스크립트 코드를 추가하면 H2가 두 개 이상이거나 H3가 두 개 이상인 경우 첫 번째 H2 헤딩 태그 앞에 목차를 표시합니다. 만약 H2가 한 개도 없으면 목차가 표시되지 않습니다. H3 이상부터 있는 경우에는 코드를 조금 수정해야 합니다. 다음과 비슷하게 하면 잘 작동합니다.

		<script>
const table = '<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>';

if ( $( ".e-content h2" ).length > 1) {

$('.e-content h2:first-of-type').before(table);
}
			else if ( $( ".e-content h2" ).length == 1 && $( ".e-content h3" ).length > 1 ) {
				
				jQuery('.e-content h2:first-of-type').before(table);
				
			}
			
			else if ( $( ".e-content h3" ).length > 1 ) {
				
				jQuery('.e-content h3:first-of-type').before(table);
				
			}
</script>

위와 같은 코드를 추가하면 ...

• h2가 2개 이상이면 첫 번째 h2 헤딩 태그 앞에 목차가 표시됩니다.
• h2가 1개이고 h3가 두 개이면 첫 번째 h2 앞에 표시됩니다.
• h3가 2개 이상이면 첫 번째 h3 태그 앞에 표시됩니다.

그러면 다음과 같이 목차가 표시됩니다.

목차가 자동으로 잘 생성되지만 '... 카테고리의 다른 글'이 두 개가 추가로 표시됩니다. 이 문제는 티스토리에서 제공하는 카테고리 글 더 보기 플러그인 때문에 h4 헤딩 태그가 추가되었기 때문입니다. 

 

이 문제를 해결하는 방법으로 두 가지를 생각해볼 수 있습니다.

1. h2. h3 태그만 표시되도록 스크립트 변경
2. CSS를 사용하여 '... 카테고리의 다른 글' 항목 숨기기

먼저 h2, h3 태그만 표시되도록 하려면 다음 코드

$("#toc").toc( {content: ".e-content", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } ) 
});

부분에서 h4를 삭제하면 됩니다.

CSS로 숨기고 싶다면 다음 CSS 코드를 적용하면 됩니다.

#toc ul:nth-last-child(-n+2) {
    display: none;
}

저는 테스트해보니 잘 작동했습니다. 혹시 안 되면 h2와 h3 헤딩만 표시되도록 하는 방법을 고려해보시기 바랍니다.

---

추가: 티스토리 스킨을 북클럽(Book Club)에서 고래 스킨 4.0으로 변경했습니다.

티스토리 스킨 고래 스킨 4.0으로 변경

참고

티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법