TISTORY에 Toc 적용하기

Toc (Table of Content)가 있다면 전체 포스트의 내용을 한눈에 볼 수 있을 뿐만 아니라, 클릭 한번으로 해당 위치로 이동할 수 있습니다.

자동으로 Toc를 생성해 줄 수 없을까? 라는 생각으로 조사를 해보니, 여러가지 오픈소스 라이브러리가 검색됩니다.

오늘은 Toc 라이브러리중 Tocify를 Tistory에 적용하는 방법을 소개합니다.

Prepare

http://gregfranko.com/jquery.tocify.js/에 방문하여 Download as zip을 눌러 다운받습니다.

jQuery 1.7.2+가 필요하지만, Tistory에는 이미 jQuery를 사용하므로 넘어갑니다.

Bootstrap이 옵션으로 필요하지만 현재 블로그 테마와 맞지 않으므로 사용하지 않습니다.

Tocify 설정하기

다운받은 파일중 2개를 스킨 편집에서 업로드합니다.

HTML 편집에서 아래 내용을 아래 위치에 붙여넣기 합니다.

<script type="text/javascript" src="./images/jquery-ui-1.9.1.custom.min.js"></script>
<script type="text/javascript" src="./images/jquery.tocify.js"></script>
<script>
	$(function() {
		var toc = $("#toc").tocify({ selectors: "h2, h3", context: ".entry-content" });
	});
</script>

스킨편집의 CSS 에서 아래 내용을 맨 마지막에 추가합니다.

Active, Border 색상은 #e7e7e7로 되어있습니다.

Tistory의 특수한 상황때문에 일부 CSS를 변경하고 컬러 몇가지 변경하였습니다.
사용자의 테마가 달라 적용이 힘든 경우 jquery.tocify.css 기반으로 변경해주세요.
2단계까지만 적용된 상태입니다. 3단계는 고려하지 않았습니다.

/*
 * jquery.tocify.css 1.9.0
 * Author: @gregfranko
 */

/* The Table of Contents container element */
#toc {
    top: 70px;
    left: calc(((100% - 960px) / 2) - 220px);
    width: 220px;
    max-height: 90%;
    overflow: auto;
    position: fixed;
    border: 1px solid #e7efe7;
}

/* The Table of Contents is composed of multiple nested unordered lists.  These styles remove the default styling of an unordered list because it is ugly. */
#toc ul, #toc li {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    line-height: 30px;
    text-indent: 10px;
    font-size: 13px;
}

/* Top level header elements */
#toc .tocify-header {
    text-indent: 10px;
}

/* Top level subheader elements.  These are the first nested items underneath a header element. */
#toc .tocify-subheader {
    text-indent: 20px;
    display: none;
}

.tocify-item.active {
    background: #e7e7e7;
}
    
#toc .tocify-subheader li {
    text-indent: 20px;
    font-size: 12px;
}

/* Further indents second level subheader elements. */
.tocify-subheader .tocify-subheader {
    text-indent: 30px;
}

/* Further indents third level subheader elements. You can continue this pattern if you have more nested elements. */
.tocify-subheader .tocify-subheader .tocify-subheader {
    text-indent: 40px;
}

/* Twitter Bootstrap Override Style */
.nav-list > li > a, .nav-list .nav-header {
    margin: 0px;
}

/* Twitter Bootstrap Override Style */
.nav-list > li > a {
    padding: 5px;
}

포스트 작성하기

태그 삽입하기

첫 시작에 아래 태그를 HTML 모드에서 추가합니다.

Tistory 에디터가 div사이에  를 추가하는 경우가 있는데 수동으로 삭제해야 합니다.

<div id="toc"></div>

제목1, 제목2 사용

지금까지 방법은 2 단계의 Toc만 생성합니다.

h2, h3만 사용하고 있으므로 Tistory의 제목1, 제목2만 이용해주세요.

포스트의 내용을 담당하는 class="article-content"에 h4를 tistory가 사용하고 있는 관계로 제목3을 사용하는 경우 원하지 않는 toc가 생성됩니다.

결과

이제, 글 작성을 완료하면 아래처럼 TOC가 추가되었습니다.

이정도면 긴 포스트 작성에도 문제가 없을 것 같습니다.

개인적으로 CSS를 잘 못 다루는편이라, Tistory의 CSS와 충돌때문에 진행에 문제가 있었습니다.

(CSS는 너무 힘드네요.)

goax