프라치노 공간 스킨 TOC 플로팅 목차 설정하는 방법

티스토리 목차 TOC 만들기

제가 사용한고 있는 티스토리 스킨에 TOC 목차 추가하는 방법입니다. 다른 스킨과는 조금은 다르지만, 그렇다고 많이 다른 건 없으니 참고하셔서 사용하고 계신티스토리 스킨에 적용하시면 되겠습니다.

Head 스크립트 적용

첫 번째로 HTML 상단 Head 사이에 아래 스크립트를 붙여 넣습니다. 꼭 최상단이 아니고 적당한 위치에 붙여 넣으시면 됩니다. 이해가 잘 안 되신다면 아래 참고 이미지를 확인하세요.

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

Class 만들기

두 번째로 s_permalink_article_rep라는 티스토리 치환자 적용이 시작되는 하단에 아래 코드를 붙여 넣습니다. 프라치노 공간 스킨의 경우 4개의 코드가 있습니다. 다른 스킨의 경우 개수는 다를 수 있지만 전부 붙여 넣는 방법은 똑같습니다. 이해가 안 되신다면 참고 이미지를 확인하세요.

<div class='toc'></div>

Body 스크립트 적용

세 번째로 해줘야 하는 건 /body 적당한 위치에 아래 스크립트를 복사하여 붙여 넣습니다.

<script>
var content = document.querySelector('#article')
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: '#article',
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>

CSS 적용

여기까지 하셨다면 이제 99%로 완성되었습니다. 이젠 CSS코드를 활용하여 플로팅 목차를 디자인해 주면 완성됩니다. 아래 CSS코드를 복사하여 CSS편집 적당한 위치에 붙여 넣습니다. 디자인의 수정은 원하시는 데로 수정하시면 됩니다.

/* tocbot */
.toc-absolute {
position: absolute;
margin-top: calc(15vh + 165px); // 처음 Toc이 시작하는 위치
}
.toc-fixed {
position: fixed;
top: 165px;
}
.toc {
right: calc((100% - 850px) / 2 - 500px);
width: 300px; // 가로 위치 설정
padding: 10px;
box-sizing: border-box;
}
.toc-list {
margin-top: 10px !important;
font-size: 0.9em;
}
.toc > .toc-list li {
margin-bottom: 10px;
}
.toc > .toc-list li:last-child {
margin-bottom: 0;
}
.toc > .toc-list li a {
text-decoration: none;
}
.is-active-link::before {
    background-color: #FF4B49; // 색상변경
}

마무리

제공된 스크립트와 css코드는 제가 사용하는 프라치노 공간 스킨에 맞춰있습니다. 일단 적용하신 후 자신의 티스토리 스킨에 맞게 수정하시면 편하게 수정하실 수 있습니다. 잘 안 되는 분들은 댓글 남겨주세요.