[Tistory] 티스토리 블로그 포스트에 목차 넣는 방법

이번 포스트에서는 티스토리 블로그 포스트에 목차를 자동으로 넣는 방법에 대해 알아보겠습니다.

블로그 포스트의 길이가 길어지면 글의 전체 구조를 한눈에 파악하기 힘들어질 수 있습니다. 이럴 때 포스트 상단에 목차(TOC, Table Of Contents)를 넣어주면 글의 구조를 한눈에 파악할 수 있고, 원하는 정보를 바로 찾아갈 수 있어 편합니다. 특히 목차를 포함하고 있는 글은 검색엔진 최적화에도 도움이 된다고합니다. 검색 랭킹 상위에 자주 랭크되는 위키 문서의 경우 문서의 앞쪽에 목차를 포함하고 있는 것을 볼 수 있습니다.

티스토리에서는 목차를 자동으로 생성하는 기능을 제공하지 않습니다. 하지만 파일 업로드와 스킨 편집 그리고 서식을 이용해서 손쉽게 자동 목차 기능을 구현할 수 있습니다.

목차

파일 업로드

자동으로 목차를 생성해주는 기능은 자바 스크립트 함수로 구현되어 있습니다. 다음 파일을 다운로드해줍니다.

jquery.toc.min.js

0.00MB

 

그리고 티스토리 스킨에 업로드해줍니다.

티스토리 관리페이지에서 '꾸미기' > '스킨편집' 항목으로 들어간 다음, '파일 업로드' 탭에서 '+ 추가' 버튼을 눌러 업로드해주면 됩니다. 업로드가 되면 images/jquery.toc.min.js 파일이 추가됩니다.

본문에 있는 제목들을 찾아서 목차로 만들어주는 기능이 이 파일에 구현되어 있는데요. 이 기능을 가져다 쓸 수 있게 업로드해줬습니다.

스킨 편집 - HTML

자동 목차 생성 동작이 정의된 파일을 업로드한 다음 파일의 내용을 로드하도록 스킨을 수정합니다. '꾸미기' > '스킨편집' 메뉴에서 'HTML' 탭을 선택하면 티스토리 스킨의 HTML을 수정할 수 있습니다.

이 곳에서 </head> 태그 바로 앞에 다음 내용을 추가해줍니다.

  <!-- 목차 -->
  <script type="text/javascript" src="./images/jquery.toc.min.js"></script>

앞에서 업로드했던 js 파일을 사용할 수 있게 불러오겠다는 의미입니다.

그리고 </body> 태그 바로 앞에 다음 내용을 추가해줍니다.

<!-- 목차 -->
<script>
 $(document).ready(function() {
	 var $toc = $("#toc");
     $toc.toc({content: ".entry-content", headings: "h2,h3,h4"});

     if($('.another_category').length > 0) {
       $toc.find('li:last').remove();
     }
 });

</script>

스킨 종류에 따라 다를 수도 있는데요. '.entry-content' 대신 '.tt_article_useless_p_margin'을 써야하는 경우도 있습니다. 둘 다 해보시고 되는걸로 선택하면 됩니다.

if 구문에 있는 내용은 카테고리 더보기 항목이 목차로 잡히는 부분이 있어서 빼주는 동작입니다.

스킨 편집 - CSS

여기까지 적용해도 목차가 자동으로 생성됩니다만 조금 더 보기 좋게 스타일을 바꿔주면 좋습니다. '꾸미기' > '스킨편집' 메뉴에서 'CSS' 탭을 선택하면 티스토리 스킨의 CSS를 수정할 수 있습니다.

 /* 목차 스타일 */
.index_toc {
    position: relative;
    width: fit-content;
    border: 1px solid #b0d197;
    padding: 10px 20px 10px 15px;
    z-index: 1;
}

.index_toc:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #b0d197;
    z-index: -1;
    opacity: 0.1;
}

이 내용을 CSS 항목 맨 아래쪽에 추가하면 됩니다. 이걸 기반으로 마음에 드는 색으로 변경하는 등 커스터마이징을 하면됩니다.

자동 목차 추가

블로그 포스트를 작성할 때 목차가 추가될 곳에 다음 HTML 코드를 추가하면 됩니다.

<div class="index_toc">
  <p data-ke-size="size16">목차</p>
  <ul id="toc" style="list-style-type: disc;" data-ke-list-type="none;"></ul>
</div>

 

이 HTML 코드를 서식으로 추가해서 글 작성할 때마다 사용하면 편합니다.

적용된 모습

직접 링크를 걸어 목차를 생성하지 않아도 자동으로 목차가 생성된 것을 확인할 수 있습니다.