티스토리 뷰

카테고리 없음

티스토리 자동 목차 만들기

도라몽몽1 2023. 4. 28. 07:00

티스토리를 시작하셨다면, 타 블로그에서 자동목차를 보며 신기해하셨을 것입니다.

우리는 글을 쓸 때 대제목, 소제목을 구분하여 작성하는데

이때 구글 seo를 위해 목차를 만든다면 구글에게 더 좋은 점수를 얻을 수 있답니다.

또한 글을 편하게 보기 위해선 내 블로그를 보고 있는 사람들에게도 자동 목차는 필수인데요,

코드만 보면 너무 어렵게 느껴지시죠? 저 또한 그렇습니다.

왕초보도 금방 따라 하실 수 있도록 티스토리 자동 목차 만드는 방법과 어떻게 사용하는지

모두 알려드릴 테니, 차근차근히 잘 따라 하시기 바랍니다.

1. 티스토리 자동 목차 만들기 파일 다운로드

목차를 만들기 위해선 아래 파일을 꼭 다운로드하여야 합니다.

jquery.toc.min.js

0.00MB

타 블로그를 보면 jquery.toc.js와 jquery.toc.min.js 두 가지를 모두 다운로드하라고도 하는데,

둘 중 아무거나 상관은 없습니다. jquery.toc.min.js가 압축된 파일이기에 저는 jquery.toc.min.js로 사용합니다.

📌 jquery.toc.js를 압축한 것이 jquery.toc.min.js입니다.

📌 웹상에서는 네트워크상 빠른 속도를 위해 압축된 jquery.toc.min.js를 사용하시길 추천드립니다.

2. 다운로드 파일 업로드하기

[티스토리 관리자 화면 > 꾸미기 > 스킨 편집 > html 편집]에 들어갑니다.

여기에서 방금 다운로드하였던 jquery.toc.min.js 파일을 업로드해 줍니다.

3. html 편집하기

파일 업로드를 하셨으면 html에 들어가셔서 해당 내용 2개를 삽입해 줍니다.

html에는 head와 body 두 군데에 위치 맞게 삽입해야 하므로 차근차근히 따라 해 보세요.

1) /head에 추가

head에 추가.txt

0.00MB

</head> 위에 넣을 코드


<script src="./images/jquery.toc.min.js"></script>

파일을 다운로드하신 후 삽입해 줍니다.

삽입하실 위치는 ctrl+F로 </head>를 찾으신 후 바로 위에 방금 다운로드한 메모장의 코드를 넣어주시면 됩니다.

코드 삽입시에 알아보기 쉽게 하기 위해 코드 상하단에 코드 시작과 끝을 알려주었습니다.

2) /body에 추가

같은 방법으로 body에도 추가해 줍니다.

코드 넣을 위치만 다를 뿐, 방법은 </head>에 넣는 법과 동일합니다.

body에 추가.txt

0.00MB

</body> 위에 넣을 코드


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

파일을 다운로드하신 후 삽입해 줍니다.

삽입하실 위치는 ctrl+F로 </body>를 찾으신 후 바로 위에 방금 다운로드한 메모장의 코드를 넣어주시면 됩니다.

📌 이때 위에도 표시한 h2,h3는 제목1, 제목2를 의미합니다.

보통은 제목3(h4)까지는 하지 않으니, 제목3 표시도 하고 싶으시다면, h2,h3,h4를 포함시키면 됩니다.

저 같은 경우엔 많이들 하는 h2, h3까지만 적용하게끔 만들었습니다.

4. CSS 편집하기

이제 마지막 부분입니다.

CSS에 추가.txt

0.00MB

CSS에 추가 -> 제일 하단 붙여 넣기

/* TOC 자동목차 시작*/
.index_toc a:link{color:000;border:none;}
.index_toc {
border: 1px solid #cccccc;
background-color: #F2F4F7;
font-weight:bold;
padding: 5px;
}
#toc {padding-left:25px;}
#toc li > ul > li {list-style: none;}
#toc li > ul {padding: 0px 0 0px 0;}
/* TOC 자동목차 끝*/