[HTML/CSS] 티스토리에 TOC(목차) 적용하기

해당 내용은 반응형2 스킨에 적합합니다.
다른 스킨에 적용할 경우 CSS 커스텀이 따로 필요하니 참고바랍니다.
또한 해상도가 낮거나, 모바일에서는 적용되지 않습니다.

 

✔️ 경로

블로그관리  >  스킨편집  >  HTML

 

 

✔️ 코드 복사, 붙여넣기

1.  '</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">

 

2. '</body>' 검색하여 위에 아래 코드를 붙여넣기.

<!-- TOC -->
<script>
    var content = document.querySelector('.area_view')
    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: '.area_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');
            }
        });
    });
</script>

 

3. CSS 탭으로 넘어가서 해당 코드 붙여넣기.

/* TOC 적용 */
.toc-absolute {
  position: absolute;
  margin-top: 24px;
}
.toc-fixed {
  position: fixed;
  top: 165px;
}

.toc {
  right: calc((100% - 1430px) / 2 - 250px);
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
}

.toc-list {
  margin-top: 14px !important;
  font-size: 1.0em;
}

.toc > .toc-list li {
  margin-bottom: 14px;
}

.toc > .toc-list li:last-child {
  margin-bottom: 0;
}

.toc > .toc-list li a {
  text-decoration: none;
}