목차를 클릭하면 새로운 페이지로의 이동이 아닌 본문내의 특정구간으로 이동하는 기능이 있는데, 이것을 어떻게 하는지에 대해 질문을 주셨습니다. 아시는 분은 아시겠지만 구글 SEO에 좋은 글은 목차가 있는 글입니다. 나무위키나 하우위키같은 곳의 서식이 좋습니다.
티스토리 목차 만들기
오늘은 이런 목차를 티슽토리에서 자동설정하는 방법에 대해서 간단하게 알아보도록 하겠습니다.
워드프레스를 이용하시는 경우에는 간단하게 목차 플러그인을 사용하면 되지만, 티스토리는 반수동방싱입니다.
티스토리 목차 만들기 (자동)
먼저 아래의 파일을 다운받아주세요
이후 스킨편집에 들어갑니다.
그런다음 파일올리기에 들어가서 제가 드린 파일을 업로드해줍니다.
추가버튼을 누르면 됩니다.
다시 스킨편집에 HTML로 들어가서
<head>
</head> 사이에
아래의 코드를 삽입해주셔야 합니다.
<!-- 목차 시작 -->
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
<!-- 목차 끝 -->
이제 서식에 들어가야 합니다.
마무리
이제 서식에 들어가서 HTML 화면에서 아래 글을 붙여줍니다.
<div class="txc-textbox"> <script type="text/javascript" src="https://tistory3.daumcdn.net/tistory/5156961/skin/images/jquery.toc.js"></script> <h2 data-ke-size="size26"><b>목차</b></h2> <ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul> <script type="text/javascript"> $(function(){ $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h1,h3,h4" , top: -90, isBlink : true, blinkColor : '#3669CF' } ) }); </script>
이제 글을 쓸때마다 사용해주시면 됩니다. 티스토리 자동목차 만들기 TOC 쉬우시죠?
궁금한부분은 추가 댓글 부탁드립니다.
댓글