일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- Linux 디렉터리 역할
- HTTP Web Server
- Linux apt
- ec2 ssh unprotected private key file
- GIT
- EC2 zsh
- git branch
- git 기본 에디터
- linux background
- linux foreground
- javascript 정렬
- Linux 디렉터리 구조
- EC2 Apache2
- javascript scope
- 서버의 서비스 방식
- 아비트럼 새폴리아 이더 받는법
- ssl 인증서 발급받기
- nginx https 설정
- Linux oh my zsh
- git 계정 설정
- Navigation Pattern
- AWS EC2 서버 만들기
- Linux apt-get
- Git 브랜치
- UNPROTECTED PRIVATE KEY FILE
- arbitrum sepolia eth
- EC2 oh my zsh
- Logback
- git switch
- EC2 HTTP 호스팅
- Today
- Total
HyunJun 기술 블로그
티스토리 자동 목차, tocbot 설정하기 본문
1. toc
toc는 table of contents의 약자로, 목차를 의미합니다. 에디터에 따라 다르지만, 보통은 H1, H2, H3, H4 태그의 경우 목차로 인식하여 자동으로 목차를 만들어 주기도 합니다.
2. 결과 미리 보기
글 작성 시, 아래처럼 제목1, 제목2, 제목3에 따라 목차가 TOC로 자동 생성되게 구현해 보도록 하겠습니다.
3. 스킨 편집
티스토리 스킨 편집 -> HTML 편집으로 들어갑니다.
3-1. HTML 편집
아래처럼 head 사이에 tocbot 라이브러리와 css 파일을 포함시켜 줍니다.
<head>
<!-- tocbot -->
<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">
<!-- tocbot -->
</head>
보통, 스킨마다 다른데 본문 내용이 나오는 곳을 찾은 후에 (기존 본문 내용) 그 위에 toc 부분을 추가해 줍니다. 참고로 저는 #2 스킨입니다. 본문과 관련된 class 이름이 article-view, content 등 저와 다를 수 있습니다.
<!-- toc -->
<div class='toc toc-fixed'></div>
<!-- toc -->
<!-- 기존 본문 내용 -->
<div class="area_view">
.....본문
</div>
HTML의 </body> 바로 위에 아래와 같은 코드를 작성해 줍니다. HTML 페이지의 아랫부분에 작성하는 이유는 제목 크기에 따라 h1, h2, h3, h4 등의 데이터를 읽어와서 TOC로 표현해야 하기 때문에, 문서의 데이터들(<body>제목1, 제목2</body>) 등이 먼저 읽혀야 하기 때문입니다.
<!-- toc script start-->
<script>
// set heading id
function makeHeading(headings){
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; }
});
}
var headingMap = {};
var headings = document.querySelector('.area_view').querySelectorAll('h1, h2, h3, h4');
makeHeading(headings);
document.addEventListener("DOMContentLoaded", function() {
// toc addon
tocbot.init({
// Where to render the table of contents.
tocSelector: '.toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.area_view',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2, h3, h4',
// For headings inside relative or absolute positioned containers within content.
hasInnerContainers: false
});
});
$("div.toc.toc-fixed").hide(0);
$(window).scroll(function() {
if (Math.round( $(window).scrollTop()) > 0) {
$("div.toc.toc-fixed").show(250);
} else {
$("div.toc.toc-fixed").hide(250);
}
});
</script>
<!-- toc script end-->
이때 중요한 점은 저 같은 경우 본문 내용의 class가 area_view이지만, 스킨에 따라 본문 내용의 class가 article-view 이거나 content이거나 저와 다르다면 위의 코드에서 .area_view를 .article-view 등으로 변경해 주시면 됩니다.
3-2. CSS 편집
스킨 css 편집의 맨 아래 부분에 추가하면 됩니다.
/* tocbot */
.toc-absolute {
position: absolute;
margin-top: 165px;
}
.toc-fixed {
position: fixed;
top: 165px;
}
.toc {
left: 85%;
width: 250px;
padding: 10px;
box-sizing: border-box;
z-index: 0;
}
.toc-list {
font-size: 0.9em;
}
.toc > .toc-list li {
margin-top: 10px;
}
.toc > .toc-list li:last-child {
margin-bottom: 0;
}
.toc > .toc-list li a {
text-decoration: none;
}
이제 제목1, 제목2, 제목3을 포함하여 글을 작성하면 결과 미리 보기와 같이 TOC가 자동 생성됩니다.
추가적으로 이 포스팅 내용에 사용된 4.11.1 버전이 제목 1의 아래에 여러 개의 제목 3을 두는 경우 toc 렌더링이 아래처럼 나오는 버그가 있습니다.
- 제목1
- 제목3
- 제목3
- 제목3
- 제목3
아래의 사이트에서 라이브러리, CSS를 최신 버전(현재 기준 4.21.0)으로 바꿔주시면 해결됩니다.