티스토리 자동 목차 만들기

목차

 

티스토리 자동목차 만드는 방법

 

1. 파일을 업로드

jquery.toc.min.js

0.00MB

 

파일을 내 티스토리에 올린다.

어디에? 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > 파일업로드로 이동합니다.

 

 

2. 스킨 html 에 추가, </body> 바로 위

 

<script src="./images/jquery.toc.min.js"></script> <script> // 목차 생성 $(document).ready(function() { $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"}); }); </script>

 

3. css 수정

 

그냥 스킨일 경우

<script src="./images/jquery.toc.min.js"></script> <script> // 목차 생성 $(document).ready(function() { $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"}); }); </script>

 

 

북클럽 스킨일 경우

<script src="./images/jquery.toc.min.js"></script> <script> // 목차 생성 $(document).ready(function() { var $toc = $("#toc"); $toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"}); // 추가된 부분입니다 if($('.another_category').length > 0) { $toc.find('li:last').remove(); } }); </script>

 

그리고 나서 목차 및 스타일을 css 에 추가한다.

 

/* 목차 스타일 */
.book-toc {
    position: relative;
    width: fit-content;
    border: 1px solid #b0d197;
    padding: 10px 20px 10px 15px;
    z-index: 1;
}
.book-toc:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #b0d197;
    z-index: -1;
    opacity: 0.1;
}
.book-toc p {
    font-weight: bold;
    font-size: 1.2em !important;
    color: #396120;
}
#toc * {
    font-size: 20px;
    color: #000 !important;
}
#toc {
    margin-bottom: 0;
}
#toc a:hover {
    color: #000;
}
#toc ul {
    margin-top: 5px;
    margin-bottom: 0px;
}
#toc > li {
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 10px;
}
#toc > li > a {
    text-decoration:none;
}
#toc > li > ul {
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 0;
    margin-top: 5px;
}
#toc > li > ul > li > a {
    font-size: 1em;
    text-decoration:none;
}
#toc > li > ul > li > ul {
    padding-left: 10px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 0;
    margin-top: 3px;
}
#toc > li > ul > li > ul > li > a {
    font-size: 0.875em;
    text-decoration:none;
}

 

제목 스타일

 

/* 글 제목1,2,3 스타일 */
.tt_article_useless_p_margin h2 {
	text-align: left;
	border-left: #517135 12px solid;
	border-bottom: 1px solid #517135;
	padding: 3px 0 10px 10px;
	margin: 30px 0 20px 0;
}
.tt_article_useless_p_margin h3 {
	text-align: left;
	border-left: #548a25 8px solid;
	border-bottom: 1px solid #548a25;
	padding: 3px 0 10px 10px;
	margin-bottom: 15px;
}
.tt_article_useless_p_margin h4 {
	text-align: left;
	border-left: #71b932 6px solid;
	border-bottom: 1px solid #71b932;
	padding: 3px 0 10px 10px;
	margin-bottom: 15px;
}

 

 

 

서식 작성

 

<div class="book-toc">
  <p>목차</p>
  <ul id="toc"></ul>
</div>