오른쪽 사이드 자동 목차 생성 방법(북클럽 스킨)

참고 블로그

왼쪽 사이드 스크롤 반응형 목차 만들기

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

 

나는 티스토리 스킨이 북클럽이기 때문에 본문처럼 왼쪽 사이드로 목차를 제공하면 자신을 포함한 보는 이가 불편해진다. 그래서 위 블로그를 참고해 왼쪽 목차를 오른쪽으로 이동하였다.

 

과정 설명

</head> 앞에 아래 코드를 붙여 넣는다.

<!-- 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 끝 -->

 

이후 sidebar-2 를 찾고, 자동목차가 들어갈 자리를 만들기 위해 최근글/인기글 div태그 다음에 아래 코드를 붙여넣는다. 

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

 

다음으로 </body> 앞에 아래 코드를 붙여 넣는다.

<!-- TOC 시작 -->
    <script>
        var content = document.querySelector('.entry-content')
        var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
        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',
            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 까지 목차에 넣고 싶다면 tocbot.init 을 이렇게 변경하면 된다.
하지만, h4 까지 넣게되면 본문 내 관련 글까지 같이 목차에 포함되므로 개인 취향에 맞게 선택하면 될 것 같다.

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

 

마지막으로 css 마지막에 아래 코드를 붙여 넣으면 끝이다.

/* TOC */
.toc-absolute {
  position: absolute;
  margin-top: 24px;
}
.toc-fixed {
  position: fixed;
  top: 165px;
}
.toc {
  right: calc((100% - 1020px) / 2 - 0px);
  width: 200px;
  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;
}

 

접은 글 내용은 내가 적용한 css 이다.

/* TOC : 오른쪽 자동 목차 */
.toc-absolute {
  position: absolute;
  margin-top: 24px;
}
.toc-fixed {
  position: fixed;
  top: 170px;
}
.toc {
  right: calc((100% - 1020px) / 2 - 30px);
  width: 240px;
  padding: 5px;
  box-sizing: border-box;
}
.toc-list {
  margin-top: 14px !important;
  font-size: 0.85em;
}
.toc > .toc-list li {
  margin-bottom: 15px;
}
.toc > .toc-list li:last-child {
  margin-bottom: 0;
}
.toc > .toc-list li a {
  text-decoration: none;
}​