TOC
Table of Contents 즉, 목차이다.
내가 작성한 markdown 형식의 파일에서 헤더 태그를 목차로 엮어 보기 쉽게 제공한다.
적용 방법
티스토리의 html과 css를 편집하여 TOC 기능을 추가할 수 있다.
tocbot에서 제공하는 API를 사용하고자 한다.
1. HTML 편집
- 블로그 관리 > 스킨 편집 > html 편집 으로 이동한다.
2. CDN 추가
<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>
</body> 바로 위 부분
</body> 로 끝나는 바로 위 부분에 다음의 script 코드를 추가한다.
<!-- TOC -->
<script>
var content = document.querySelector('.markdown-body')
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: '.markdown-body',
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>
해당
contentSelector:부분에 자신의 글 본문이 작성되는class명을 적용해야 한다.- 전번에
Github markdown style을 적용하느라class이름을 수정했었다. - 그렇기에
contentSelector: markdown-body로 수정해야 적용이 되더라...
- 전번에
3. TOC를 표시할 div 추가
현재 사용하고 있는 오디세이 스킨 기준으로 <main class="main"> 혹은 <div class="area-main"> 내부 첫번째에 바로 선언해도 문제 없는 걸로 보인다.
음... 저는 그냥
<main class="main">아래 바로 넣어 버렸습니다...
...
<!-- TOC -->
<div class='toc'></div>
...
4. CSS 편집
TOC 내부 목차, 위치 등을 조절하는 CSS이다.
개인의 페이지 Layout에 맞게 Style을 조금 수정할 필요가 있다..
/* TOC */
.toc-absolute {
position: absolute;
margin-top: 24px;
}
.toc-fixed {
position: fixed;
top: 165px;
}
.toc {
left: calc((100% - 1020px) / 2 - 250px);
width: 250px;
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;
}
적용 결과
'ETC' 카테고리의 다른 글
| 클린코드 작성하기 Part 2 (0) | 2021.09.02 |
|---|---|
| 클린코드 작성하기 Part 1 (0) | 2021.08.31 |
| 티스토리 코드 블럭 지원 언어 추가, 테마 변경 (highlightjs) (0) | 2021.03.23 |
| (Jupyter Notebook) 폰트 바꾸기 / Naver D2coding 폰트 (0) | 2020.09.21 |
| (Mark Down) README.md 마크다운 작성법 (0) | 2020.09.19 |