티스토리에서 자동목차를 나오게 하면 글의 가독성을 높일 수 있고, SEO 점수에도 좋다. 또한 현재 논란이 많은 티스토리 자체광고와 본인의 광고가 연달아 나오게 되는데 그 사이에 자동광고가 노출되어 구글의 정책위반 문제를 해결할 수 있는 방법이기도 하다.
티스토리에 자동목차를 나오게 하기위해서는 기본적으로 목차기능이 제공되는 스킨을 사용하는게 가장 좋다. 최적화가 잘 되어 있어서기도 하고 일부 스킨에서는 지금 안내해줄 html 코드 삽입이 먹통인 경우가 있기 때문이다.
jquery 파일 업로드 하기
우선 jquery 파일을 업로드 해주어야 한다
<head> 태그 입력
그리고 이제 목차코드를 입력해준다.
html 편집기로 들어간다.
먼저 <head> 태그 바로 아래에 이걸 입력한다.
<!– 자동 목차 시작 –>
<script src=”./images/jquery.toc.min.js”></script>
<!– 자동 목차 끝 –>
<body> 태그입력
그리고 <body>태그 아래쪽으로
<!– 자동 목차 시작 –>
<script>
$(document).ready(function () {
var $toc = $(“#toc”);
$toc.toc({ content: “.tt_article_useless_p_margin”, headings: “h2, h3, h4” });
});
</script>
<!– 자동 목차 끝 –>
article_rep_desc 태그 입력
이 코드를 넣어주고 마지막으로 자동으로 목차가 나타날 수 있도록 (일일이 글마다 코드 넣지 않아도 됨) article_rep_desc 위 쪽에 이 코드를 넣어준다.
<div class=”book-toc”>
<p data-ke-size=”size16″>목차</p>
<ul id=”toc”></ul>
</div>
css 스타일 태그
그리고 css 파일로 목차가 실제로 보여지는 모습 와꾸를 잡아주면 된다.
/* 자동 목차 스타일 */
.book-toc {
position: relative;
width: fit-content;
border: 1px solid #b0d197;
padding: 10px 20px 0px 20px;
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: 18px;
color: #000 !important;
}
#toc {
padding: 0px 20px 0px 25px;
}
#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;
padding: 0px 20px 0px 0px;
margin-bottom: 10px;
margin-top: 7px;
}
#toc > li > a {
text-decoration:none;
font-weight: bold
}
#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: 5px;
margin-top: 5px;
}
#toc > li > ul > li > a {
font-size: 1em;
text-decoration:none;
}
#toc > li > ul > li > ul {
padding-left: 20px;
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: 0px;
margin-top: 0px;
}
#toc > li > ul > li > ul > li > a {
font-size: 0.875em;
text-decoration:none;
}