티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 3 - 좌측에 떠있는 스크롤 반응형 자동목차

 

 

 

좌측에 떠있는 스크롤 반응형 자동목차(TOC) 만들기

오늘은 '자동목차 만들기 #2'에 이어 좌측에 떠있는 '자동목차(TOC) #3'에 대해 알아보겠습니다.

 

이번 자동목차는 서식을 사용하는 목차가 아니라 블로그 좌측 빈 공간에 소제목1(h2), 소제목2(h3), 소제목3(h4)가 자동으로 출력되는 목차이며, 단점은 모바일이나 탭 등에서는 보이지 않는 'PC전용 자동목차'입니다.

 

항상 그렇듯 설명이 길고 이미지가 많아 복잡해 보이지만 설명대로 하나씩 따라 하시면 쉽게 '자동 목차'를 만드실 수 있으니 차근차근 따라 해 보시기 바랍니다.

 

 

 

'tocbot.css'와 'tocbot.min.js' 파일 다운로드 및 업로드

티스토리 블로그에 자동으로 글 목차를 만들어 주는 코드소스입니다.

 

1. 아래 링크에서 'tocbo.zip'파일을 다운로드 후 압축을 풀어주세요.

tocbo.zip

0.00MB

 

2. 압축을 푼후 'tocbot.css'와 'tocbot.min.js' 파일을 티스토리 스킨에 업로드합니다.

 

'블로그관리의 꾸미기 > ①스킨편집 > ②html편집 > ③파일업로드 > ④추가'로 진입 후 'tocbot.css'와 'tocbot.min.js' 파일을 업로드합니다.

728x90

 

script, css 적용

1. 스킨 편집의 HTML을 클릭 후 아래의 코드를 복사 후 </head>  윗부분에 넣은 후 '적용'을 눌러 저장합니다.

 

<!-- toc 목차#3 시작 -->
<script src="./images/tocbot.min.js"></script>
<link rel="stylesheet" href="./images/tocbot.css">
<!-- toc 목차#3 끝 -->

 

 

toc가 표시 될 div 추가

1. HTML탭에서 Ctrl + F를 이용해 <div class="content-wrap"> 을 찾은 후 아래의 코드를 <div class="content-wrap"> 아래에 넣고  '적용'을 눌러 저장합니다.

 

< Ctrl + F로 아래 코드 검색>

<div class="content-wrap">

 

< div 코드>

<!-- toc 목차3-1 시작 -->
<div class='toc'></div>
<!-- toc 목차3-1 끝 -->

 

제 경우는 북클럽 스킨이라 <div class="content-wrap"> 아래 코드를 넣었지만 다른 스킨을 사용하시는 경우 <s_permalink_article_rep> 아래 넣으시는 경우도 있으니 참고 하여 div code 코드를 넣어주세요.

 

script 넣어주기

1. HTML탭의 </body> 바로 위에 아래의 코드를 넣은 후 '적용'을 눌러 저장합니다.

 

<!-- toc 목차3-2 시작 -->
<script>
  var content = document.querySelector('.entry-content')
  var headings = content.querySelectorAll('h1, h2, h3, h4')
  var headingMap = {}

  Array.prototype.forEach.call(headings, function (heading) {
      var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
                 .split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '')
      headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
      if (headingMap[id]) {
        heading.id = id + '-' + headingMap[id]
      } else {
        heading.id = id
      }
    })

  tocbot.init({
    tocSelector: '.toc',
    contentSelector: '.entry-content',
    headingSelector:'h1, h2, h3, h4',
    hasInnerContainers: false
  });

  $(document).ready(function(){
    $('.toc').addClass('toc-absolute');

    var toc_top = $('.toc').offset().top - 165;
    $(window).scroll(function() {
      if ($(this).scrollTop() >= toc_top) {
        $('.toc').addClass('toc-fixed');
        $('.toc').removeClass('toc-absolute');
      } else {
        $('.toc').addClass('toc-absolute');
        $('.toc').removeClass('toc-fixed');
      }
    });
  });

</script>
<!-- toc 목차3-2 끝 -->

 

728x90

 

CSS코드 추가하기

1. '블로그관리의 꾸미기 > ①스킨 편집 > ②html 편집 > ③CSS'로 들어갑니다.

 

 

2. 아래 코드를 복사한 뒤 CSS의 맨 아래쪽에 넣은 후 '적용'을 눌러 저장합니다.

 

/*toc 목차3-3 시작*/
.toc-absolute {
  position: absolute;
  margin-top: 50px;
}
.toc-fixed {
  position: fixed;
  top: 165px; /*자동목차 세로 위치*/
}
.toc {
  left: calc((100% - 1020px) / 2 - 310px); /*310px 자동목차 가로 위치*/
  /* 목차를 우측으로 변경 시 left를 right로 바꾸고 옆의 숫자들을 조정 */
  width: 250px; /*자동목차 가로 크기*/
  padding: 12px;
  box-sizing: border-box;
}
.toc-list {
  margin-top: 10px !important;
  font-size: 0.9em; /*h3 폰트 크기*/
}
.toc > .toc-list li {
  margin-bottom: 12px; /*h2 폰트 크기*/
}
.toc > .toc-list li:last-child {
  margin-bottom: 5px;
}
.toc > .toc-list li a {
  text-decoration: none;
}
/*toc 목차3-3 끝*/

 

 

3. 적용 후 포스팅을 새로 열면 자동목차가 적용된 것을 확인할 수 있습니다.

---

참고블로그 : 티스토리 블로그에 TOC 적용 (tistory.com)

 

마무리

이렇게 간단하게 좌측에 따라 움직이는 'TOC 자동목차'에 대해 알아보았습니다.

이번 자동목차는 서두에도 말했듯 모바일에서는 확인되지 않는 단점이 있으니, 기존 자동목차와 병행하여 사용하시기 바랍니다.

 

관련글 보러가기

[˙티스토리 꾸미기] - 티스토리 자동목차(TOC) 쉽게 만들기 part 4 | 아래로 열리는 자동목차

티스토리 자동목차(TOC) 쉽게 만들기 part 4 | 아래로 열리는 자동목차

[˙티스토리 꾸미기] - 티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 2 -초보용

티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 2 -초보용

[˙티스토리 꾸미기] - 티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 1- 초보용

티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 1- 초보용

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"