[TISTORY] tocbot 활용한 티스토리 목차 만들기
기분전환 겸 블로그를 바꿔보기로 했다!
20일 21일 이틀을 투자해서 스킨을 전체적으로 커스텀하고 본문 왼쪽에 목차를 추가했다!
티스토리는 HTML 편집이 가능해서 블로그를 마음대로 꾸밀 수 있어서 좋은 것 같다
간단하게 목차 만드는 방법을 알려드리겠습니다!
0. 참고 블로그
https://depast.tistory.com/40#%EC%84%9C%EB%A1%A0
1. 블로그 설정 -> 스킨 편집 -> Html 편집 이동
 |
 |
2. Html의 <head> </head> 태그 안에 아래 코드를 넣어준다.
<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></head>코드 안에 편한 곳에 넣어주시면 됩니다.
tocbot의 script(동작 코드)와 css(기본적인 디자인)를 불러오는 과정입니다!
3. TOC(목차) 기능을 Html의 <body></body>태그 안에 넣어준다.
<div class='toc'></div>
-> 저는 <body> 안의 <s_permalink_article_rep>의 <div class="skin_view">안에 넣었습니다.
목차의 껍데기 생성해주는 과정입니다!
4. Html에 Script 작성
<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>
-> </body> 바로 앞에 넣어주었으며 목차 안에 들어갈 것(h1,h2), 위치, 동작 등을 설정하는 겁니다!
위에 보시면 <!-- 여기 --> 라고 표시한 부분(querySelector / contentSelector)은 각 스킨마다
이름이 달라서 확인하시고 변경해야 합니다.
querySelector / contentSelector 이 곳이 목차가 올라갈 곳으로,
목차가 그려질 종이의 이름을 연결해주는 거라고 보시면 됩니다.
* querySelector / contentSelector 확인하기!
1. 본인 티스토리의 글을 클릭합니다.
2. 컨트롤(Ctrl) + 알트(Alt) + C 를 누르고 글의 본문을 클릭합니다.
3. 위와 같이 뜨면 오른쪽에 마우스를 가져가면 해당 영역이 색칠됩니다. 색칠되는 부분이 목차가 올라갈 곳입니다!!
4. 확인한 후 오른쪽 코드를 보면 아래와 같이 나옵니다.
class의 경우에는 class="article_skin" --> .article_skin을 ' ' 따옴표 안에 변경해주시면 됩니다.
id의 경우에는 id="mArticle" --> #mArticle을 ' ' 따옴표 안에 이름을 변경하시면 됩니다.
저는 class name을 .article_skin으로 변경하였습니다!
5. CSS 추가하기
.toc-absolute {
position: absolute;
margin-top:165px;
}
.toc-fixed {
position: fixed;
top: 165px;
}
.toc {
left: calc((100% - 850px) / 2 - 300px);
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에 위의 코드를 추가합니다. 대충 설명드리자면 아래와 같습니다.
- .toc-absolute는 목차의 고정 위치이며 magin을 조정하여 여백을 바꿀 수 있습니다.
- .toc은 목차 전체의 크기입니다.
- .toc-list는 목차의 리스트입니다.
- .toc > .toc-list li a 는 목차리스트(.toc-list)의 목록(li)의 하이퍼링크(a)가 있는 경우입니다.
위에서 div class='toc' 설정했던 것 기억나시나요?
html에서 class로 이름을 준 경우 css에서는 .을 붙여서 설정합니다.
ex) class='toc' -> .toc { }
마무리
저는 html, css, js 코드를 알아서 목차의 색깔을 조금 수정했습니다!
script에서 h1, h2, h3까지 자동으로 목차에 올라가게 설정해 둔 상태입니다.
참고로 글쓰기에서 제목 1 은 h2, 제목 2는 h3, 제목 3은 h4로 작성되기에 제목3은 목차에 자동으로 포함되지 않습니다.
코드를 아시는 분들은 편한데로 수정하셔서 쓰시면 됩니다!