[초보자용 / 북클럽 스킨] 티스토리 블로그 자동 목차 표시하는 방법

티스토리 블로그에 포스팅을 할 때 자동으로 목차를 표시하는 방법에 대해서 설명하겠습니다. H태그를 인식하여 자동으로 목차를 생성하는 jQery를 사용하여 구현하였습니다. 티스토리 북클럽 스킨 기준으로 자동목차를 표시하는 방법에 대해서 알아보도록 하겠습니다. 

 

초기에 제가 자동목차에 대해서 올렸는데요. 이번에는 조금 더 다듬어서 이쁘게 만드는 방법에 대해서 설명해 보도록 하겠습니다. 다른 스킨에서도 응용이 가능하므로 잘 읽어보시기 바랍니다. 

 

2022.11.23 - [수익형 블로그 만들기/티스토리] - 티스토리 블로그 북클럽 스킨 목차 자동으로 넣기

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

 

목 차

 

 

 

 

1. js 파일 업로드 

아래 스크립트 파일을 일단 다운로드 하세요. 그리고 압축을 풀어주세요. 

jquery.toc.zip

0.00MB

 

 

 

꾸미기 > 스킨편집 > HTML 편집 > 파일 업로드 로 압축푼 파일 2개를 업로드해주세요. 

 

2. jquery.toc.min.js 파일 경로 입력

파일을 업로드 한 이후에는 "jquery.toc.min.js" 파일의 경로를 HTML 코드에 삽입해주셔야 합니다. 

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

꾸미기 > 스킨편집 > HTML 편집 > HTML 탭에서 </head> 바로 위에 위의 코드를 추가해주세요. 

 

 

3. CSS 코드 삽입

CSS 코드를 CSS 탭에 삽입하여주세요. 꾸미기 > 스킨편집 > HTML 편집 > CSS 탭을 클릭하여,  맨아래에 아래의 코드를 추가해주세요. 배경색, 글자색, 글자 크기 등을 아래 CSS 코드에서 적절하게 수정하시면 원하는 목차를 만드실 수 있으실거에요. 

/* 티스토리 북클럽 스킨 목차 - TOC */
.book-toc {                  /* 목차 박스 */              
border: 1px solid #ccc;
padding: 10px 10px 0px 15px;
background-color: #e6f5f2;  /* #f5f5f */
}

.book-toc p {                /* boc-toc 클랙스안의 P태그  */
  font-weight: bold;         /* '목차' 글씨 굻게  */
  font-size: 1.3rem !important;
  color: var(--font-basic-1);
}

#toc {
margin-left: 10px;  /* h2태그 이하 왼쪽 마진 */
}

#toc * {                 /* 리스트를 나타내는 ul 태그 밑에 있는 모든 태그 */
  font-size: 1.1rem;     /* 박스안의 글자 크기 */
  color:var(--font-basic-1) !important;  /* #676767 */
}

#toc a{                   /* a링크 의미 : 목차를 클릭할 때, 해당 제목으로 이동할 때 a링크 사용 */
  font-weight:normal;
  text-decoration:none;   /* a링크 밑줄 안생기도록 함 */
}

#toc a:hover {       /* 목차 위에 마우스 가져갔을 때 */
  font-weight:bold;  /* 글자 굵게 */
  color: rgb(6, 192, 177) !important ;     /* 링크 하일라이트색 */
}

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

#toc > li {            /* ul 태그 밑에 있는 첫 번째 목자 */
  margin-left: 30px ;   /* 오른쪽으로 들여쓰기 : 아래 전체 목차가 들여쓰기됨 */
  margin-bottom: 10px;  /* H2 제목간격 조정 */
  list-style-type:decimal !important; /* 목차 앞에 디스크 모양 : disc, circle, squre */
}

#toc > li > a {        /* 제목1(H2)로 만든 태그의 링크 */
  font-weight:bold;
}

#toc > li > ul {       /* 제목2(H3)로 만든 목차가 있는 ul 태그 */
  margin-left: 10px;   /* 10px 들여쓰기 */
}

#toc > li > ul > li {
  list-style-type:square !important;
  margin-bottom: 5px;  /* H3 제목간격 조정 */
}

 

 

 

 

 

 

 

 

 

4. HTML 코드 삽입

HTML 탭에서 아래의 스크립트를 </body> 바로 위에 추가해주세요. 

<script type="text/javascript">
$(function(){
$("#toc").toc( {content: ".entry-content", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
});
</script>

▲ 위에서 headings: "h2, h3" 로 해주면, h2와 h3까지만 목차를 만듭니다. 저는 개인적으로 h4까지 목차를 만들면, 지저분질 것 같아서 h2와 h3 태그만을 목차 만들기하겠습니다. 

 

5. 포스팅할 때 목차 스크립트 삽입

자신이 글을 포스팅할 때에 아래 코드를 삽입하면 자동으로 목차를 생성합니다. 코드를 삽입하는 방법은 글을 작성할 때, html 편집드로 바끄고, 아래 html 코드를 삽입하여 줍니다. 또는 아래 코드를 html 편집모드에서 서식으로 저장하여, 글을 작성할 때 서식을 불러오기하면 간단히 목차를 생성할 수 있습니다. 

<div class="book-toc">
<p>목차</p>
<ul id="toc"></ul>
</div>

 

 

 

 

 

 

 

 

 

 

 

목차를 추가하는 이유

우리가 목차를 추가하는 이유는 바로 SEO(검색 엔진 최적화)에 최적화된 글을 만들기 위해서입니다. 구글에 잘 노출되는 글들을 보면, 목차가 있는 글입니다. 글의 도입부에 목차를 만들어 글의 내용을 요약하면, 원하는 내용이 있는지 유저들이 빠른 판단을 할 수 있도록 도움을 줍니다. 

 

티스토리 자체 블로그에서 자동으로 목차를 생성해주는 플러그인을 넣어주었으면 정말 좋겠습니다. 구글링하여 자신이 원하는 코드로 수정하여, 목차를 만들 수 있습니다. 하지만 이 과정이 정말 복잡하긴 하더라구요. 초보자라면 시간이 오래걸리긴 할거에요. 이번 포스팅에서는 티스토리 목차 자동만들기 방법에 대해서 알아보앗/습니다. html, css, 자바스크립트, 제이쿼리 등에 대해서 알고 있으면 블로그를 예쁘게 꾸밀 수 있습니다. 많은 도움이 되었으면 좋겠습니다.