티스토리는 자동으로 디렉토리를 생성합니다.

색인

티스토리 자동 카탈로그 만드는 방법

1. 파일 업로드

jquery.toc.min.js

파일을 내 티스토리에 업로드합니다.

어디? 관리자 페이지 > 데코레이션 > 스킨 편집 > html 편집 > 파일 업로드로 이동합니다.

2. 스킨 html에 추가~ 위에

<스크립트 원천=“./이미지/jquery.toc.min.js”>스크립트> <스크립트> // 디렉토리 생성 $(문서). 준비해(기능() {$(“#toc”).toc({콘텐츠: “.tt_article_useless_p_margin”, 제목: “h2, h3, h4”}); }); 스크립트>

3. CSS 수정

피부층만 있으면

독서동아리 스킨이라면

<스크립트 원천=“./이미지/jquery.toc.min.js”>스크립트> <스크립트> // 디렉토리 생성 $(문서). 준비해(기능() { 변하기 쉬운 $디렉토리 = $(“#toc”); $toc.toc({콘텐츠: “.tt_article_useless_p_margin”, 제목: “h2, h3, h4”}); // 추가된 부분입니다.

만약에($(‘.another_category’).길이 > 0) { $toc.find(‘이:드디어’). 제거하다(); } }); 스크립트>

그런 다음 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>