개요
- 티스토리 븍클럽 스킨의 왼쪽 사이드에 목차를 보여주는 기능을 추가하는 방법입니다. 나중에 보기 위해 기록용으로 남깁니다.
방법
1. head에 추가
- 스킨 편집 > html 편집에서
head 태그의 마지막에 다음을 붙여넣는다.
<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">
...
</head>
2. body에 추가 (1)
body 태그 <div class="content-wrap">를 찾아 그 아래에 다음을 복사해 붙여넣는다.
<div class='toc'></div>
3. body에 추가 (2)
body 태그 가장 끝인 `' 태그 바로 앞에 다음을 붙여넣는다.- 기본적으로 북클럽 스킨의 글 내용을 보여주는 부분은
<div class="entry-content">
<!-- 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>
4. css 추가
/* TOC */
.toc-absolute {
position: absolute;
margin-top: 24px;
}
.toc-fixed {
position: fixed;
top: 165px;
}
.toc {
left: calc((100% - 1020px) / 2 - 250px);
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;
}
참고자료
https://5-ssssseung.tistory.com/59
