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

2020. 5. 18. 10:33 | 댓글 23

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

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

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

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으로 변경

작년 8월 말부터 공식 티스토리 스킨 중 하나인 북클럽 스킨을 사용하다 며칠 전에 티스토리 무료 스킨인 고래 스킨으로 변경했습니다. 이 스킨은 네이버, 구글 검색 엔진에 최적화되어 있고 구�

avada.tistory.com

참고

 

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

티스토리 블로그에 목차를 표시하려는 경우 목차 스크립트 파일을 이용하여 목차를 추가할 수 있습니다. 보통의 경우 목차를 표시할 자리에 수동으로 HTML 코드를 추가해야 하는데, 그러면 번거�

avada.tistory.com

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    귀차니즘 리뷰

    꿀팁 잘 보고 갑니다!

  2. thumbnail
    열매맺는나무

    오! 발빠른(손빠름 인가요?^^) 글 작성 감사합니다.
    정말 유용한 글입니다. 많은 분들께 도움 될 거에요. ^^

  3. thumbnail
    ʕ

    다른 스킨에서 적용시 <목차>는 나오는데 하위 목차가 안나오네요.. 왜이럴까요?

    https://issuebf.tistory.com/16 입니다.

  4. thumbnail
    ʕ

    아 그럼 해결방법은 없나요?...ㅜ 다른 스킨을 써야 하나요?

  5. thumbnail
    ʕ

    다른스킨으로 사용시 이상없이 작동하네요...

  6. thumbnail
    ʕ

    고래스킨에는 잘 적용되는데 타 스킨에는 잘 안되는군요.. 이유를 못 찾겠습니다.;;ㅠ

  7. thumbnail
    2020.05.31 00:06

    비밀댓글입니다

  8. thumbnail
    ʕ

    https://issuebf.tistory.com/21
    감사합니다. 우클릭 해제해 놓았습니다.

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.05.31 04:39 신고

      스킨이 유료 스킨인가요?

      콘텐츠가 자바스크립트로 로드되어 추가한 코드가 먹히질 않네요.

      무료 스킨이라면 다운로드할 수 있는 주소를 알려주시면 테스트해보겠습니다.

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.05.31 05:42 신고

      콘텐츠가 로드된 후에 목차가 로드되어야 정상적으로 목차가 표시될 것입니다.

      다음 코드를...

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

      다음과 같이 한 번 바꾸어 보시겠어요?

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

      그래도 안 되면 숫자를 1000을 조금 높여보면서 테스트해보시기 바랍니다(예: 1500).

  9. thumbnail
    2020.05.31 14:22

    비밀댓글입니다

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.05.31 17:01 신고

      살펴보니 두 가지 에러가 발생하고 있네요.

      -"Uncaught TypeError: Cannot read property 'fn' of undefined"

      이 문제는 다음 글에서 다루고 있는데요. js 파일 로딩 순서와 관련이 있는 것 같습니다.

      https://stackoverflow.com/questions/20606209/bootstrap-uncaught-typeerror-cannot-read-property-fn-of-undefined/20607939

      또 하나는 Uncaught TypeError: $(...).toc is not a function...와 같은 오류인데요... https://stackoverflow.com/questions/36526080/jquery-uncaught-typeerror-is-not-a-function 등과 같은 글을 참고해보았지만 시정이 되지는 않네요.ㅠ

  10. thumbnail
    ʕ

    아.. 아쉽군요.. 스킨이 깔끔해서 마음에 들었는데 어쩔수 없네요!! 너무 감사했습니다.
    그리고 워드프레스를 시작해 보려고 하는데 자주 들리겠습니다.!!^^

  11. thumbnail
    MHSW

    고래스킨 4.0 쓰는데 왜 안되는 걸까요?ㅠㅠ 1번부터 차례대로 시행한 것 같은데...ㅠㅠ