티스토리 블로그 북클럽 스킨 목차 자동으로 넣기

 

블로그에 목차를 작성하여 글의 서두에 넣는다면, 긴 글을 읽을 때에 정말 많은 도움이 됩니다. 북클럽 스킨에 코드를 추가한다면 목차를 자동으로 쉽게 넣을 수 있습니다. 제목 H태그를 이용하여 글의 목차를 만들 수 있습니다. 이미 작성된 글이라도 H태그를 이용하여 목차를 만들어 글의 전체 흐름을 한눈에 파악할 수 있습니다. 

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

북클럽 스킨 HTML 편집

자동 목차를 넣기 위해, 먼저 관리자 → 꾸미기 → 스킨편집 → html 편집으로 이동합니다. </head> 와 </body> 바로 위에 코드를 추가해줘야 합니다. 

1) </head> 코드 추가 

<!--  자동 목차 Script 시작 -->
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
<!--  자동 목차 Script 끝 -->
</head>

</head> 코드 추가

2) </body> 바로 위에 아래 코드를 추가합니다. 

<script src="./images/script.js"></script>
<!--  자동목차 Script 시작-->
<script type="text/javascript">
$(function(){
$("#toc").toc( {content: ".entry-content", headings: "h2" , top: -100, isBlink : true, blinkColor : '#21B9DE' } )
});
</script>
<!--  자동목차 Script 끝-->
</body>
</html>

</body> 코드 추가

▲ h2 태그로 만들어진 제목만 목차로 가져오도록 설정한다. 

 

북클럽 스킨 CSS 편집

이제 css 편집을 해줘야 합니다. 관리자 → 꾸미기 → 스킨편집 → html 편집으로 이동합니다. CSS 제일 하단에 아래 코드를 추가해줍니다. 

/* 티스토리 북클럽 스킨 자동 목차 */

.book-toc {
border: 1px solid #ccc;
padding: 10px 10px 0px 15px;
background-color: #f5f5f5;
}

.book-toc ul {
list-style-type: decimal;
}

.book-toc p {
font-weight: 550;
margin-bottom: 7px;
}

#toc * {
font-size: 17px;
color: #676767;
}

#toc a:hover {
color: #f00;
}

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

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

#toc {
margin-left: 10px;
}

#toc > li > ul li {
margin-bottom: 5px !important;
}

css 코드 추가

 

Script 파일 업로드

관리자 → 꾸미기 → 스킨편집 → 파일업로드으로 이동합니다. 아래 jqery.toc.min.js 파일을 추가합니다. 이 파일을 올려야 위에서 코딩해 넣은 스크립트를 불러 들일 수 있습니다. 파일 추가해서 올린다음 적용을 클릭합니다. 

자바스크립트 파일 업로드

 

글 작성

이제 모든 것이 준비가 되었습니다. 글쓰기를 할 때 아래의 코드를 삽입해줘야만 자동으로 목차를 생성합니다. 글쓰기 중간에 목차 넣을 곳에 커서를 두고 HTML 모드로 변환한 다음 코드를 삽입합니다. 

<p>&nbsp;</p>
<div class="book-toc">
<p>목차</p>
<ul id="toc"></ul>
</div>
<h2 data-ke-size="size23">제목1</h2>
<h2 data-ke-size="size23">제목2</h2>

▲ h2 태그로 만들어진 제목만 목차로 가져옵니다. 

★ 위 태그를 서식에 저장하여 글쓰기 할 때 불러오면 쉽게 목차를 작성할 수 있습니다. 

html 편집창

자동목차만들기 예시

이상으로 목차를 만들어보았습니다. 목차를 마우스 클릭하면 목차 위치로 이동한다. 글을 작성할 때 목차를 제공하면 글을 한 눈에 파악할 수 있습니다. 구글 SEO 정책에 맞게 작성된 글입니다. 많은 도움이 되었기를 바랍니다.