티스토리 목차 적용 방법

목차를 넣고 싶긴한데 글 쓸 때마다 매번 수작업으로 만든다면 번거롭습니다.

이런 점을 보완해주는 jQuery 플러그인 Table of Contents(TOC)를 이용해 자동으로 넣는 방법이 있습니다.

 

여기에서는 제목1, 제목2, 제목3으로 작성한 부분을 목차로 가져오도록 만들어 봅니다.

 

북클럽 스킨 기반이라 다른 스킨에서 정상적인 동작이 이루어지지 않을 수 있습니다.

 

jQuery TOC 플러그인 업로드

다음 자바 스크립트 파일을 다운받습니다.

 

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

 

추가 버튼을 클릭합니다.

다운받은 자바스크립트 파일을 업로드 합니다.

 

스크립트 적용

관리 페이지 > 꾸미기 > 스킨 편집으로 이동합니다.

 

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>

 

작성한 글(tt_article_useless_p_margin 클래스 내부) 제목 1,2(h2, h3) 태그에만 목차를 적용하겠다는 뜻입니다.

 

제목 3을 원할 경우 headings에 h4를 추가합니다.

Odyssey 스킨을 사용할 경우 tt_article_useless_p_margin을 article-view으로 바꿔줍니다.

#1 스킨을 사용할 경우 적용이 안되면 tt_article_useless_p_margin을 area_view으로 바꿔줍니다.

매거진 스킨을 사용할 경우 tt_article_useless_p_margin을 inner_content으로 바꿔줍니다.

 

주의사항

카테고리 플러그인을 쓰니는 분은 h4 태그가 겹쳐 추가적인 작업이 필요하므로 위 코드 대신 아래 코드로 적용해주세요. 아래 코드는 북 클럽 스킨 기준으로 되어 있습니다.

<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>

스타일 적용

관리 페이지>꾸미기>스킨 편집>html 편집>css 탭으로 이동합니다.

 

목차 스타일

먼저 목차 스타일은 Depth를 3단계까지 적용해볼 예정입니다.

/* 목차 스타일 */
.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 스킨을 사용하는 분은 #toc > .. > ul 부분의 padding-left 값을 0으로 합니다.

 

제목 스타일

/* 글 제목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;
}

 

목차 서식 등록

티스토리에서 기본으로 제공하는 메뉴가 없으므로 목차를 적용하려면 서식을 등록해 줘야 합니다.

 

관리 페이지>콘텐츠>서식 관리로 이동합니다.

서식 쓰기 버튼을 클릭합니다.

기본모드>HTML 모드를 선택합니다.

 

제목을 정하고 다음 코드를 작성합니다.

<div class="book-toc">

  <p>목차</p>

  <ul id="toc"></ul>

</div

 

이 코드가 작성된 부분에 목차가 생성됩니다.

작성 글에 목차 적용하기

글 에디터에서 상단 서식을 선택합니다.

저장한 서식을 불러옵니다.

원하는 위치에 적절히 삽입합니다.