CamelAct

Overview

블로그에 위와같이 글에 목차를 따로두어 클릭하면 책갈피 기능이 수행되는 것을 경험할 수 있다.

Understanding the title h tag

H 태그를 사용하여 Tistori 또는 자신의 블로그 게시물에 자동으로 콘텐츠를 만듭니다. 웹사이트에서 제목은 H 태그를 사용합니다. H1이 가장 중요한 제목이며 숫자가 클수록 중요도가 낮아집니다.
H1 태그는 현재 웹사이트에서만 사용해야 합니다. 블로그 제목을 H1 태그로 사용하는 것을 권장합니다. 본문에서는 H2 태그를 순서대로 사용하는 것을 권장합니다.

jQuery toc plugin upload

자바스크립트 프레임워크인 Jquarie를 사용하여 Tistory 목차를 생성할 수 있습니다. Jquarie는 JavaScript를 사용하기 쉽게 해주는 언어입니다. 다음 파일을 다운로드합니다.

Click 관리자 메뉴에서 꾸미기 > 스킨 편집 > html 편집 > 파일업로드 in order.
Click the 'Add' button below.

Put automatic table of contents script

Click 관리자 메뉴에서 스킨 편집 > html 편집 in order.

You can paste the script at the bottom of the body tag.

<script src="./images/jquery.toc.min.js"></script>
<script>
  $(document).ready(function() {
  $("#toc").toc({content: "tt_article_useless_p_margin", headings: "h2,h3"});
});
</script>

Automatic table of contents css decorating

And I will decorate the contents of the table of contents. Click 관리자 메뉴에서 꾸미기 > 스킨 편집 > html 편집 > CSS 탭 in order.
And put the bottom CSS code. FONT-SIZES is font size and color is font color. Add the size and color you want.

.book-toc {
    position: relative;
    width: fit-content;
    border: 0px solid #b0d197;
    padding: 10px 20px 10px 15px;
	  background-color: #fafafa; 
	  color: #333;
    z-index: 1;
}
.book-toc:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	  background-color: #fafafa; 
	  color: #333;
    z-index: -1;
    opacity: 0.1;
}
.book-toc p {
 	  font-size: 15px; 
	  padding: 7px 10px 5px; 
	  margin: 0 0 10px; 
	  border-left: 5px solid #666; 
	  background-color: #fafafa; color: #333;
}
#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;
    margin-bottom: 10px;
	  list-style-type: none;
}

#toc > li > a { 
 	  font-size: 15px; 
	  padding: 7px 10px 5px; 
	  margin: 0 0 10px; 
	  border-left: 5px solid #666; 
	  background-color: #fafafa; 
	  color: #333;
}

#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;
    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;
	  list-style-type: none;
    padding-left: 0;
    text-indent: 0;
    margin-bottom: 0;
    margin-top: 3px;
}
#toc > li > ul > li > ul > li > a {
    font-size: 0.875em;
    text-decoration:none;
}