[블로그] 티스토리 블로그 목차 자동으로 추가하기

2023.10.16 추가

지금 제 블로그에 적용된 목차는 이 글을 따라하면 나오는 목차와 다릅니다. 이 글을 따라해도 목차를 추가할 수 있지만, 지금의 목차는  2023.10.16 - [Language/Javascript] - [Javascript] 목차 추가 기능을 만들었다 에서 만든 목차입니다.

 

글의 제일 앞부분에 목차를 자동으로 만들어주고 싶어서 검색해보니, 여러 사람들이 jQuery로 만든 TOC 플러그인을 사용하고 있었습니다. 저도 이 라이브러리를 사용해서 목차가 자동으로 추가되도록 하겠습니다.

jquery.toc 이해하기

이 플러그인은 설정한 content 원소의 내부에 존재하는 headings를 찾아서, 목차로 만들어주는 기능이 있습니다.

jQuery 1.6 버전 이상을 가지고, 플러그인과 함께 사용하시면 됩니다. 간략히 사용법을 소개하겠습니다.

$("#toc").toc({content: "div.container", headings: "h2,h3,h4"}); // content는 headings를 검색할 범위, headings는 목차로 만들 headings 목록

위의 코드에서 content는 headings를 검색할 범위이고, headings는 목차로 만들 태그 목록입니다.

추가적으로 더 많은 옵션이 있습니다. 설명하지 않은 부분은 위의 링크에서 README를 읽으시면 더 자세한 정보를 알 수 있습니다.

블로그에 추가하기

순서대로 따라 하시면 됩니다.

1. 파일 업로드에 jquery.toc.min.js 파일 추가하기

블로그 설정 - 스킨 편집 - HTML 편집 - 파일 업로드 탭에서 jquery.toc.min.js 파일을 추가합니다.

2. CSS에 목차 스타일 추가하기

블로그 설정 - 스킨 편집 - HTML 편집 - CSS 탭에서 아래의 코드를 추가합니다.

/* 목차 스타일 */
.book-toc {
  position: relative;
  width: fit-content;
  border: 1px solid #b0d197;
  padding: 10px 20px 10px 15px;
  z-index: 1;
}
.book-toc:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #b0d197;
  z-index: -1;
  opacity: 0.1;
}
.book-toc p {
  font-weight: bold;
  font-size: 1.2em !important;
  color: #396120;
}
#toc * {
  font-size: 20px;
  color: #000 !important;
}
#toc {
  margin-bottom: 0;
}
#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;
  margin-bottom: 10px;
}
#toc > li > a {
  text-decoration:none;
}
#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: 0;
  margin-top: 5px;
}
#toc > li > ul > li > a {
  font-size: 1em;
  text-decoration:none;
}
#toc > li > ul > li > ul {
  padding-left: 10px;
  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: 0;
  margin-top: 3px;
}
#toc > li > ul > li > ul > li > a {
  font-size: 0.875em;
  text-decoration:none;
}

3. HTML에 목차 생성 코드 추가하기

블로그 설정 - 스킨 편집 - HTML 편집 - HTML 탭에서 </body> 태그의 위에 아래의 코드를 추가합니다.

다른 블로그에서 글을 쓸 때마다 <div>를 직접 추가해주길래, 없으면 자동으로 추가해주도록 만들었습니다.

<!-- 목차 생성 코드 -->
<script src="./images/jquery.toc.min.js"></script>
​
  <script type="text/javascript">
    $(function() {
      var toc = $("#toc");
      if (toc.val() === undefined) {
        $(".contents_style").prepend("<div class='book-toc'>목차<ul id='toc'></ul></div>")
      }
      var toc = $("#toc");
      toc.toc({content: ".contents_style", headings: "h2,h3,h4"});
​
      if($('.another_category').length > 0) {
        toc.find('li:last').remove();
      }
    });
  </script>

위의 코드는 제 블로그에 적용된 목차 생성 코드와 같습니다. 마음에 안 드시는 부분이 있다면 코드와 css를 조금씩 수정하셔서 사용해 주세요!