티스토리 자동 목차 생성(jQuery TOC)

목차

티스토리에서 목차를 자동으로 만들어주는 방법을 알아보겠습니다.

jQuery 플로그인인 TOC( Table  Of Contents)를 이용하여 간단하게 자동 목차를 만들 수 있습니다.

자동목차를 생성하게되면 글을 작성할 때마다 목차를 생성하는 수고를 줄일 수 있고(서식 추가로 간단히 목차 생성)

구글 SEO에도 조금 도움이 되어 구글 상위 노출에 약간은 도움이 됩니다.

 

반응형

간단하게 설명하면

목차를 생성 할 부분에 미리 만들어 놓은 서식을 추가하고,

그 부분에 스크립트를 이용하여 목차를 생성해 주게 됩니다.

조금 더 깔끔하고 개인 취향에 맞게 css를 변경 해 주시면 됩니다.

 

TOC 스크립트 다운로드 및 추가

toc.js 다운로드

아래 사이트에서 접속해서 다운로드 합니다.

https://ndabas.github.io/toc/

Table of Contents jQuery Plugin — jquery.toc

다운로드 링크: https://ndabas.github.io/toc/assets/jquery.toc.zip

jQuery.toc.js 파일 추가

관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > 파일업로드로 이동 후 다운로드 한 파일 추가

(압축파일 풀어서 .min.js 파일 추가)

 

스크립트 적용

관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 으로 이동

head 태그 사이에 .js 파일 추가(</head> 바로 위에 추가)

<!-- toc js 추가 -->
<script src="./images/jquery.toc.min.js"></script>

body 태그 마직막에 다음 스크립트 추가(</body> 바로 위에 추가)

<script>
    /* toc 목차 생성 */
    $(document).ready(function() {
        var $toc = $("#toc");
        // 작성한 글(post-content 클래스 내부)의 제목1,2,3(h2,h3,h4) 태그를 
        // 이용하여 목차를 
        $toc.toc({content: ".post-content", headings: "h2,h3,h4"});
        
        // 카테고리 플러그인을 사용할 경우 h4 태그로 인한 오작동을 막기 위한 
        if($('.another_category').length > 0) {
            $toc.find('li:last').remove();
        }
    });
</script>

다른 스킨을 사용하시는 경우, 위 소스에서 ".post-content" 부분을 다음과 같이 바꿔 주시면 됩니다.

Book Club : ".tt_article_useless_p_margin"
Odyssey    : ".article-view"
#1              : ".area_view"

toc 목차생성 스크립추 추가 샘플

반응형

 

CSS 추가(목차 스타일 추가 및 h태그 스타일 변경)

관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > CSS 탭으로 이동

목차 스타일 추가

CSS 탭의 가장 하단에 다음 css 코드를 추가 하세요.

우선 복사 & 붙여넣기 해서 적용 후 기호에 맞게 수정하세요.

/* 목차 스타일 */
.data-toc {
    position: relative;
    width: fit-content;
    border: 1px solid #808080;
    padding: 10px 20px 10px 15px;
		z-index: 1;
}
.data-toc:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #c8efd4;
    z-index: -1;
    opacity: 0.2;
}
.data-toc p {
    font-weight: bold;
    font-size: 1.2em !important;
    color: #303030;
}
#toc * {
    font-size: 20px;
    color: #404040 !important;
}
#toc {
    margin-bottom: 0;
}
#toc a:hover {
    color: #404040;
		cursor:pointer;
}
#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: 0;
    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 에 대한 스타일을 추가합니다.

(위에 추가한 목차 스타일 아래쪽에 추가)

/* 글 제목1,2,3 스타일 */
.post-content h2 {
	text-align: left;
	border-left: #404040 12px solid;
	border-bottom: 1px solid #404040;
	padding: 3px 0 10px 10px;
	margin: 30px 0 20px 0;
}
.post-content h3 {
	text-align: left;
	border-left: #646464 8px solid;
	border-bottom: 1px dotted #646464;
	padding: 3px 0 10px 10px;
	margin-bottom: 15px;
}
.post-content h4 {
	text-align: left;
	border-left: #969696 6px solid;
	/*border-bottom: 1px solid #969696;*/
	padding: 3px 0 10px 10px;
	margin-bottom: 15px;
}

다른 스킨을 사용하시는 경우, 위 소스에서 ".post-content" 부분을 다음과 같이 바꿔 주시면 됩니다.

Book Club : ".tt_article_useless_p_margin"
Odyssey    : ".article-view"
#1              : ".area_view"

 

목차 서식 등록

목차를 추가 할 부분에 사용 할 서식을 추가합니다.

(항상 같은 코드를 추가할 거라 편의를 위해 서식을 등록해서 사용)

관리 페이지 > 콘텐츠 > 서식 관리로 이동

서식 쓰기 버튼 을 클릭

기본모드 > HTML 모드를 선택

적당히 제목 입력하고 다음 코드를 붙여넣고 "완료" 버튼을 눌러 서식 작성을 합니다.

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

서식작성샘플

 

작성 글에 목차 적용하기

... > 서식을 선택

사용할 서식을 선택

글쓰기 화면에서 적용모습(기본모드)

실제 적용모습

 

반응형

 

마무리

목차를 통해 글의 내용을 한 눈에 볼 수 있고, 원하는 내용으로의 이동 등 독자의 편의를 향상시킬 수 있습니다.
또한 SEO(검색 엔진 최적화)에 좋은 영향을 주어, 구글 및 네이버 검색 시 상위 노출에도 도움이 된다고 합니다.
그러니 당연히 가능하면 목차를 만드는 것이 좋은데, 매번 수작업으로 하게되면 번거롭기도하고 오타의 가능성도 있으니
이렇게 한 번 만들어 놓고 글쓰기 할 때 마다 사용하면 좋을 것 같습니다~