TOC (Table of Contents)
본문 작성 시, 헤더끼리 묶어서 사용자가 탐색하기 쉽게 해놓은 것으로 본 블로그의 오른쪽(PC기준)에 있는 navigation bar를 예로 보면 된다.
+) 본 게시글은 티스토리 스킨 중 반응형#2에 대한 게시글을 찾기 힘들어 기록용으로 적어둔 글이다.
참고로 반응형 #2의 특성 상, 수정하는게 불편하기 짝이 없는데.. 이 TOC기능도 다른 스킨들과 다르게 제목3는 올바르게 적용되지 않는다. 스킨을 갈아타면 쉬운데..이미 수정한게 많아서 포기하기가 힘들다..HTML도 잘 모르고 Javascript도 잘 몰라서 해결방법을 모르겠는데, 혹시 아시는 분이 있다면 댓글 부탁드립니다.
+) 도대체 왜 Tistory에서는 이 기능을 플러그인으로 추가해놓지 않은건지 의문이다. 정말...
적용 방법
Tocbot
Tocbot builds a table of contents (TOC) from headings in an HTML document. This is useful for documentation websites or long markdown pages because it makes them easier to navigate. This library was inspired by Tocify, the main difference is that Tocbot us
tscanlin.github.io
TocBot API에서 제공하는 방식을 그대로 사용하여 직접 Tistory의 HTML과 CSS를 변경해본다.
1. HTML 편집
블로그 관리 > 스킨 편집 > HTML 편집
2. <head> 태그 수정
나는 이것저것 추가해놓은게 많아서 </head> 태그가 37번 라인에 있는데, 저 </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">
3. <body>태그 수정
똑같은 방식으로 이번엔 HTML의 제일 아래 </body> 태그 직전에 아래와 같은 자바스크립트 코드를 작성한다.
이때, "var content = document.querySelector('.area_view') 랑 contentSelector: '.area_view', 이 보일텐데, 저 area_view가 스킨별로 이름이 다 다르다. 정확히 말하면, 저 안에 들어갈 내용은 본인 스킨별로 본문에 맞는 class명을 넣으면 된다. 어떤 스킨은 .entry-content, article_view 인 것 같다. 이 내용을 확인하려면 본인 CSS에서 h1이 명시되어 있는 클래스 명을 찾는것도 좋은 방법인 것 같다.(아래 사진) 일단 내가 쓰는 반응형#2는 수정하지 않았다는 전제하에 .area_view 이다.
<!-- 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-2) <body>태그 사이에 div Toc 추가
<body>, </body> 태그 사이에서 목차가 들어가길 원하는 곳에다가
<div class='toc'></div> <!--목차 추가하기-->다음 클래스를 추가해준다.
나 같은경우, 본문 내 <s_permalink_article_rep> 태그가 보일때마다 해당 라인 바로 밑에 추가해주었다.
4. CSS 추가
CSS탭으로 넘어가서, 맨 밑에 아래 CSS를 추가해주면 된다.
font-size나 .toc의 right: calc((100% - 1320px) / 2 - 250px); 이걸 left로 바꾸거나 1320px를 다른 숫자로 변경하면서 좌,우, 위치 등을 조절해줄 수 있다. 이 부분은 일일히 수정하면서 취향에 맞게 바꾸자.
/* TOC */
.toc-absolute {
position: absolute;
margin-top: 24px;
}
.toc-fixed {
position: fixed;
top: 165px;
}
.toc {
right: calc((100% - 1320px) / 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;
}
