SEO에 좋다고 하여 티스토리에도 목차를 추가해 보기로 했습니다.
기존 글은 목차가 안 보이게 하고, h2 태그가 있는 글은 목차를 보이게 했습니다.
1. jquery.toc 라이브러리 다운로드
목록을 만들기 위해 필요한 라이브러리는 여기에서 받을수 있습니다.
download 후 받은 파일은 압축을 풀어 줍니다.
그 중에서 jqueyr.toc.min.js 파일 만 사용합니다.
2. jquery.toc 라이브러리 업로드
아래에서 처럼 메뉴를 따라 갑니다.
추가 버튼으로 파일을 업로드 합니다.
3. html 편집
아래의 코드를 head 태그의 마지막에 추가해줍니다.
<!-- 자동 목차 시작 -->
<script src="./images/jquery.toc.min.js"></script>
<!-- 자동 목차 끝 -->아래 내용을 body태그 아래 부분에 추가 해줍니다.
<!-- 자동 목차 시작 -->
<script>
$(document).ready(function () {
var $toc = $("#toc");
$toc.toc({ content: "#article-view", headings: "h2" }); <!--'h1,h2,h3' 추가가능-->
if ($("#toc").html().trim().length>0) {
$(".book-toc").show();
}
});
</script>
<!-- 자동 목차 끝 -->##_article_rep_desc_## 를 찾아 바로 위에 아래 내용을 적어 줍니다.
<!-- 목차 -->
<div class="book-toc" style="margin-top: 20px; margin-bottom: 30px; display: none;">
<p data-ke-size="size16">목차</p>
<ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul>
</div>
4. css 편집
아래 내용을 css탭 가장 아래에 추가 해줍니다.
/* 자동 목차 추가 */
.book-toc {
position: relative;
border: 1px solid gainsboro;
padding: 10px 20px 0px 20px;
z-index: 1;
}
.book-toc:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: whitesmoke;
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;
}
5. 참고
