1. TOC 란?
Table Of Content의 약자로 문서 내 목차를 의미하며, 웹 문서에서 헤더 태그들을 모아 계층화하여 보여주고 클릭시 해당 헤더 태그로 이동시키는 역할을 한다. 블로그들을 보다 보면 왼쪽, 오른쪽 혹은 포스팅 내용의 상단에 목차가 있는 곳들이 있다. 목차를 클릭하면 해당 위치로 이동하는데 이러한 것들이 TOC에 해당한다.
2. TOC 적용하기
해당 작업의 경우 블로그 스킨을 변경할 때마다 초기화되므로 스킨을 바꾼다면 새로 설정해 줘야 한다.
2-1. Tocbot
TOC는 Tocbot이라는 라이브러리를 이용하여 적용이 된다.
https://tscanlin.github.io/tocbot/
2-2. 블로그에 적용하기
1) 티스토리 블로그 관리 > 꾸미기 > 스킨 편집 클릭
2) HTML 편집 클릭
3) <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 -->
4) <body> 태그 내에 코드 추가
<body> 태그 내에서 본문이 시작되는 위치에 넣는다.
<div class='toc'></div>
블로그 스킨마다 본문의 위치가 다르기 때문에 확인하고 넣도록 하자. Square 스킨 기준 <div id="content"> 아래에 넣었다.
5) 스크립트 추가
<body> 태그의 가장 마지막 부분에 넣는다. 코드에서 #article에 해당하는 부분은 <div class='toc'>가 속한 본문 태그의 class 혹은 id에 따라서 달라지기 때문에 블로그 스킨의 태그에 맞게 수정해서 사용해야한다.
<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>나는 markdown문법을 사용하기 때문에 #article 부분을 아래와 같이 .markdown-body로 수정하였다.
6) CSS 추가
어느 위치에 추가하든 크게 상관없는 거 같지만 추후에 편하게 알아보기 위해 CSS 탭 가장 아래쪽에 추가했다.
/* tocbot */
.toc-absolute {
position: absolute;
margin-top: calc(100vh + 165px);
}
.toc-fixed {
position: fixed;
top: 165px;
}
.toc {
right: calc((100% - 850px) / 2 - 500px);
width: 250px;
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;
}블로그 스킨의 CSS에 따라 다르게 적용될 수 있다. 나는 아래와 같이 수정한 뒤 적용했다.
📝 참고
1) 참고한 포스팅
'기타' 카테고리의 다른 글
| 티스토리에 Github 스타일 마크다운(Markdown) 적용하기 (0) | 2022.11.30 |
|---|---|
| 마크다운(Markdown) 사용법 (1) | 2022.11.25 |
| Day 0. 기록의 시작 (0) | 2022.10.29 |