이력 목차 자동 생성

by

색인

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

    1. 파일 업로드

    '추천 관련글,
    jquery.toc.min.js
    0.00MB


    내 기록에 파일을 업로드합니다.

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

    2. 바로 위의 스킨 HTML에 추가

    <스크립트 원천=“./이미지/jquery.toc.min.js”>스크립트> <스크립트> // 목차 생성 $(문서).준비가 된(기능() {$(“#톡”).toc({내용물: “.tt_article_useless_p_margin”, 헤드라인: “h2,h3,h4”}); }); 스크립트>

    3. CSS 수정

    스킨만 있다면

    <스크립트 원천=“./이미지/jquery.toc.min.js”>스크립트> <스크립트> // 목차 생성 $(문서).준비가 된(기능() {$(“#톡”).toc({내용물: “.tt_article_useless_p_margin”, 헤드라인: “h2,h3,h4”}); }); 스크립트>

    북클럽 스킨이라면

    <스크립트 원천=“./이미지/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>