티스토리 블로그 왼쪽 사이드 반응형 자동 목차 만들기

티스토리 블로그 왼쪽 사이드 반응형 자동 목차 만들기

안녕하세요. 파파대니입니다.

블로그 글을 작성할 때, 자동 목차는 주로 글의 상단에만 위치해 있습니다.

이 때문에 글을 읽는 중간에 목차를 다시 확인하고 싶을 때 불편함이 있었죠.

이를 해결하고자, 블로그 왼쪽 사이드바에 반응형 자동 목차를 추가해 보았습니다.

이 글은 자동 목차를 이미 만들어본 경험이 있는 분을 대상으로 작성되었습니다.

만약 아직 자동 목차를 만들어보지 않으셨다면, 자동 목차 만들기 글을 먼저 읽고 진행해 주세요.

저는 오디세이 스킨을 사용하고 있어, 설명도 오디세이 스킨을 기준으로 작성되었습니다.
다른 스킨의 경우 적용 방법이 다를 수 있으니 참고하시기 바랍니다.

1. 사이드 자동 목차 만들기

사이드바에 반응형 자동 목차를 추가하려면 스킨 편집에서 HTML과 CSS 코드를 수정해야 하며, 반응형 목차 기능을 위해 tocbot 스크립트를 활용해야 합니다.

1) tocbot 스크립트 사용 코드 추가

• </head> 태그를 검색하여 찾습니다. (단축키 Ctrl + F)
• 해당 태그 위쪽에 아래 코드를 추가합니다:

<!-- TOC 시작 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js">    </script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
<!-- TOC 끝 -->

2) 반응형 자동 목차 추가될 위치 코드 추가

스킨에 따라 main 태그가 다를 수 있으니 개발자 도구(F12)를 이용해 정확한 위치를 찾아야 합니다.

1. F12를 눌러 개발자 도구를 엽니다.
2. 왼쪽 상단 네모 박스를 클릭하거나 Ctrl + Shift + C 단축키를 사용하여 블로그 글 영역을 선택하고, 본문과 사이드바를 포함하는 태그를 찾습니다.
3. 오디세이 스킨은 <main class="main"> 태그인 것을 확인할 수 있습니다.

• <main class="main"> 태그를 검색하여 찾습니다. (단축키 Ctrl + F)
• 해당 태그 아래쪽에 아래 코드를 추가합니다:

<!-- TOC 시작 -->
<div class='toc'></div>
<!-- TOC 끝 -->

3) 반응형 자동 목차 동작 코드 추가

• </body> 태그를 검색하여 찾습니다.
• 해당 태그 위쪽에 아래 코드를 추가합니다

<!-- TOC 시작 -->
<script>
  var content = document.querySelector('.article-view')
  if(content) {
    var headings = content.querySelectorAll('h1, h2, h3')
    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: '.article-view',
        headingSelector:'h1, h2, h3',
        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');
            }
        });
    });
  } else {
    // content가 없을 경우 본문 페이지가 아님
    $('.toc').removeClass();
  }
</script>
<!-- TOC 끝 -->

querySelector 및 contentSelector는 사용하는 스킨에 따라 다를 수 있습니다.

오디세이 스킨의 경우, article-view 태그를 사용하지만, 다른 스킨을 사용하는 경우 개발자 도구(F12)를 통해 본문 태그를 찾아 변경해 주세요.

본문 태그를 너무 상위를 잡으면, 불필요한 목차가 나올 수 있습니다. 

잘 확인하시기 바랍니다.

4) 자동 목차 디자인을 위한 CSS 코드 추가

마지막으로, CSS 탭 가장 아래에 아래 코드를 추가하여 자동 목차의 스타일을 지정합니다:

/* TOC */
.is-active-link::before {
  background-color: #29B6F6 !important;
}

.toc > .toc-list li a:hover{
  color: #157ead !important;
}

.toc-absolute {
  position: absolute;
  margin-top: 24px;
}
.toc-fixed {
  position: fixed;
  top: 165px;
}
.toc {
  left: calc((100% - 1140px) / 2 - 250px);
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
}
.toc-list {
  margin-top: 14px !important;
  font-size: 0.9em;
}
.toc > .toc-list li {
  margin-bottom: 14px;
}
.toc > .toc-list li:last-child {
  margin-bottom: 0;
}
.toc > .toc-list li a {
  text-decoration: none;
}

반응형 자동 목차에서 선택된 항목의 색상은 .is-active-link::before 부분에서 변경할 수 있습니다.

a:hover는 마우스 커서를 올렸을 때 색상 변경에 해당하는 부분입니다.

 

참고로 .toc 에 있는 left 계산 부분에 1140px는 본문 크기에 해당하는 부분으로, 만약 본문 너비를 변경하셨다면, 그에 맞게 변경하셔야 합니다.

2. 반응형 자동 목차 적용 확인

왼쪽 사이드바에 반응형 자동 목차가 생성된 것을 확인할 수 있습니다.

---

지금까지 반응형 자동 목차 만드는 방법을 알아보았습니다.

이 글이 반응형 자동 목차 생성에 도움이 되었으면 좋겠습니다.

감사합니다.

 

⬇️ 참고하면 좋은 글 ⬇️

 

티스토리 블로그 자동 목차 만들기

티스토리 블로그 자동 목차 만들기