이력 목차 자동 생성

색인

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

    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>