티스토리 자동목차(TOC) 만들기

728x90

이번 시간은 지난 시간에 소개한 소제목 꾸미기에 이어,

'티스토리 자동목차(TOC) 만들기' 설정 방법을 소개해드리려고 합니다.

여러 고수분들의 내용을 서칭해보고

가장 간단하고 티스토리 최신 버전 스킨에 맞는 설정을

공유해드리니, 한번 따라해보세요~!

티스토리 TOC 자동목차 설정

목차 스크립트 파일 다운로드 및 업로드

바이러스 안심하셔도 되세요. 티스토리에 자동으로 글 목차 만들어주는 공개 소스 입니다.

아래 링크에서 'jquery.toc.min.js' 파일을 다운로드 하세요.

jquery.toc.min.js

0.00MB

다운로드하셨으면 'jquery.toc.min.js' 을 업로드해줍니다.

관리자 페이지 > 스킨 편집 > html 편집 > 파일 업로드> 추가 를 눌러줍니다.

방금 전 다운로드 한 jquery.toc.min.js 파일을 업로드 해줍니다.

HTML 스크립트 삽입

스킨 편집의 'HTML' 을 선택 후 아래의 코드를 </head> 바로 위에 추가해줍니다.

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

추가 후 적용을 해줍니다.

CSS코드 추가하기

관리자 페이지 > 스킨 편집 > html 편집 > CSS탭으로 들어갑니다.

아래 코드 중 자신의 스킨 버전에 맞는 코드를 복사한 뒤 CSS 의 맨 아래쪽에 넣어줍니다.

북클럽스킨 기본코드

/* 티스토리 자동목차(TOC)#2 */ 
#toc * {
    font-size:16px;
    color:#444 !important; /* 글색 */
    text-decoration: none !important; 
}

#toc {
    padding:0 10px 0 20px !important; /* padding:0 10px 0 0px */ 
}

#toc a:hover {
    font-weight:bold; /* 마우스 오버시 폰트 굵게 */
    color: #f24285 !important; /* 마우스오버 글색 */
    text-decoration: none !important; /* 마우스 오버 밑줄제거 */
}

#toc ul,
#toc ol {
    margin-top: 5px;
    margin-bottom: 0px;
    padding:0 10px 0 20px !important; /* padding:0 10px 0 0px */
}

#toc > li {
    padding-left:0;
    text-indent:0;
    margin-bottom:0;
    margin-top:7px;
    position:relative;
}

#toc > li > a {
    text-decoration:none;
    font-weight:bold;
    border-bottom:1px dotted #bbb;
    transition:color .3s ease;
}

#toc > li > ul,
#toc > li > ol {
    padding-left:10px;
}

#toc > li > ul > li,
#toc > li > ol > li {
    font-size:.95em;
}

#toc > li > ul > li > a,
#toc > li > ol > li > a {
    font-size:1em;
    text-decoration:none;
}

#toc > li > ul > li > ul,
#toc > li > ol > li > ol {
    padding-left:10px;
}

#toc > li > ul > li > ul > li,
#toc > li > ol > li > ol > li {
    font-size:.95em;
}

#toc > li > ul > li > ul > li > a,
#toc > li > ol > li > ol > li > a {
    font-size:.975em;
    text-decoration:none;
}
/* 티스토리 자동목차(TOC)#2 끝 */

'기본 목차' 서식 등록하기

자동 목차에서 서식을 사용하는 이유는 미리 목차 코드를 만들어 놓은 뒤 글을 쓸때마다 편하게 불러워 원하는 위치에

목차를 넣어주기 위함입니다.

아래 코드 중 원하는 스타일 코드를 복사 후 서식 쓰기로 이동합니다.

목차 서식

숫자 리스트(1. 2. 3.)

<p data-ke-size="size18"><b>목차</b></p>
<ol id="toc" style="list-style-type: decimal;"></ol>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>

점 리스트(．．．)

<p data-ke-size="size18"><b>목차</b></p>
<ul id="toc" style="list-style-type: decimal;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>

표시 없음(none)

<ol id="toc" style="list-style-type: none;" data-ke-list-type="none"></ol>
<ul id="toc" style="list-style-type: none;" data-ke-list-type="none"></ul>

서식쓰기에 들어가서 소스를 붙여넣기 후 저장을 해줍니다.

headings 옵션 설명

headings : "h2" > 제목 1만 포함
headings : "h2,h3" > 제목 1,제목2 포함
headings : "h2,h3,h4" > 제목 1,제목2, 제목3 포함

자동목차가 적용되지 않을 때

스킨에 따라 소스가 틀릴 수 있습니다.

스킨 이름	파라미터
Book Club	.tt_article_useless_p_margin
Odyssey	.article-view
Magazine	.inner_content
#1 스킨	.area_view

<p data-ke-size="size18"><b>목차</b></p>

<ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc" ></ul>

<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h3"}); });</script>

서식 사용방법

더보기 > 서식 > 만들어준 서식을 불러오면 됩니다.

글쓰는 동안에는 아래와 같이 스크립트 형식으로 보입니다.

다음 포스팅에는 목차 커스터마이징 방법을 다뤄보겠습니다.

이러다가 웹 개발자로 업종을 바꾸게 되는건 아니겠죠..?