티스토리 북클럽 스킨 자동 목차(TOC) 만들기

티스토리 북클럽 스킨에서 자동 목차(TOC)를 만들어 보도록 하자. TOC란? "Table of contents"의 약자로 한국말로는 "목차"라는 의미를 가지고 있다. 주로 책, 논문, 보고서 등에서 내용을 간략하게 요약하여 정리하는 목록을 만드는 것이다. 

 

목차

티스토리 북클럽 스킨 자동 목차(TOC) 만들기

티스토리 글을 작성할 때 자동으로 목차가 나올 수 있게 만들 것이다. 제목 1(H2), 제목 2(H3), 제목 3(H4)을 이용하여 글의 목차가 자동으로 생긴다. 이미 작성된 글이라면 H태그를 이용해 목차가 생기면서 글의 흐름을 간략하게 보여주게 된다. 그러면 순서대로 진행해 보자.

 

북클럽 스킨 목차(TOC) 다운로드

🔽 티스토리 블로그에 자동으로 목차를 만들어주는 것에 대한 공개된 소스가 있다. 그중 소개할 것은 "jquery.toc.min.js"파일이다. 

 

 👉 아래 다운로드 링크 "jquery.toc.min.js" 파일.

jquery.toc.min.js

0.00MB

1. 바탕화면에 다운로드 완료.

 

북클럽 스킨 편집 - HTML

🔽 북클럽 스킨의 "스킨 편집" ➜ "html 편집"으로 이동 후 아래의 코드를 복사, </head> 윗부분에 넣어 주면 된다.

 

👉 아래 해당 코드(복사 ➜ 붙여 넣기)

<!-- 목차-1 -->
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
<!-- 목차-1 끝 -->

1. "꾸미기" ➜ "스킨 편집" ➜ "html 편집" ➜ "HTML"으로 이동.
2. </head> 바로 위에 복사 ➜ 붙여 넣기.

 

북클럽 스킨 편집 - CSS

🔽 북클럽 스킨의 "스킨 편집" ➜ "html 편집" ➜ "CSS" 이동 후 CSS의 맨 아래쪽에 아래의 코드를 복사해서 붙여 넣기 하면 된다.

 

 👉 아래의 해당 코드(복사 ➜ 붙여 넣기)

/* 티스토리 자동목차(TOC)#2 */ 
#toc * { 
font-size: 16px; 
color: #313131; 
} 

#toc a:hover {
font-weight: bold;
text-decoration: none;
color: #000000; 
} 

#toc ul { 
margin-bottom: 0px; 
margin-top: 10px; 
} 

#toc ol { 
margin-bottom: 0px; 
margin-top: 10px; 
} 

#toc { 
margin-left: 0px; 
} 

#toc > li { 
margin-bottom: 10px; 
} 

#toc > li > ul { 
margin-bottom: 10px; 
} 

#toc > li > ul > li { 
margin-bottom: 10px
}
/* 티스토리 자동목차(TOC)#2 끝 */

1. "꾸미기" ➜ "스킨 편집" 이동.
2. "html 편집" 이동.
3. "CSS" 이동.
4. 맨 아래 복사 ➜ 붙여 넣기 완료.

 

북클럽 스킨 편집 - 파일 업로드

🔽 다운로드한 "jauery.toc.min.js"파일을 티스토리 스킨에 업로드하는 작업

1. "꾸미기" ➜ "스킨 편집" 이동.
2. "html 편집" 이동.
3. "파일 추가하기" 선택.
4. "추가"를 눌러 다운로드한 "jauery.toc.min.js" 파일을 추가한다.

 

티스토리 서식 작성

🔽 마지막으로 목차 서식을 등록해야 된다. 서식을 등록하게 되면 글을 쓸 때 조금 더 편리하게 이용할 수 있다.

 

👉 아래의 해당 코드를 서식에 "복사 ➜ 붙여 넣기" 하면 된다.

<p data-ke-size="size18"><b>목차</b></p>
<ol id="toc" style="list-style-type: decimal;" data-ke-list-type="decimal"></ol>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h3"}); });</script>

1. "서식 관리" 이동.
2. "서식 쓰기" 선택.
3. 서식을 쓸 때 html 모드로 변환 후 붙여 넣기.

 

결론

🔽 위와 같이 목록 만들기와 서식을 활용한다면 조금 더 편리한 글쓰기를 할 수 있을 것이다. 조금 더 자세하게 서식에 대한 설명을 이어갈 예정이다. 아래의 링크를 참고하길 바란다.

 

 👉 티스토리 서식 사용법 - 바로가기