TOC란?
Table Of Contents 즉, 목차입니다!
내가 작성한 `마크다운` 형식의 파일에서 헤더 태그를 목차로 엮어 보기 쉽게 제공합니다!
출처 : https://tscanlin.github.io/tocbot/
적용 방법
1. 블로그 수정 - 꾸미기 - 스킨 편집 - html 편집
2. <head></head> 안에 코드 넣기
`<head></head>` 태그 안에 `tocbot.css`, `tocbot.min.js`를 붙여 넣기 해줍니다!
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.25.0/tocbot.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.25.0/tocbot.min.js"></script>
3. <article id="content"> 바로 밑에 붙여넣기
Poster 스킨 같은 경우에는 Letter 스킨과 달리 <s_permalink_article_rep> 밑에가 아닌 <article id="content"> 밑에다 붙여 넣기를 해주셔야 됩니다! 스킨 마다 적용하는 위치가 다 다르니 확인 해보시고 넣으시길 추천드립니다! (막 넣으시면 적용이 안 될 수도 있어요ㅜㅜ)
<div class="toc toc-fixed" ></div>
4. </body> 태그 위에 script 적용
html 탭으로 이동해 `</body>` 태그 바로 위에 아래 코드를 붙여 넣기 해줍니다!
여기서 포인트!
querySelector, contentSelector를 `.entry-content`로 해주셔야 합니다! Letter 스킨을 적용할 땐 `.article_view`를 넣어주시면 됩니다!
letter 스킨을 적용하고 싶으시면 아래 글을 확인해주세요!
티스토리 사이드 목차 TOC(Table of Contents) 설정 방법 / Letter 스킨
TOC란?Table Of Contents 즉, 목차입니다!내가 작성한 `마크다운` 형식의 파일에서 헤더 태그를 목차로 엮어 보기 쉽게 제공합니다!출처 : https://tscanlin.github.io/tocbot/ 적용 방법1. 블로그 수정 - 꾸미기
mingos-habitat.tistory.com
var content = document.querySelector('.entry-content')
contentSelector: '.entry-content'
<script>
var content = document.querySelector('.entry-content')
var startContent = document.createElement("h7");
startContent.classList.add('toc-default-header');
content.insertBefore(startContent, content.firstChild)
var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
var headingMap = {}
Array.prototype.forEach.call(headings, function (heading) {
if (heading.parentElement.classList.contains('another_category')) {
heading.classList.add('another_category_header')
}
else {
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, h4, h7',
hasInnerContainers: false,
ignoreSelector: '.another_category_header'
});
$(document).ready(function(){
var toc = $('.toc');
toc.addClass('toc-absolute');
var toc_top = toc.parent().offset().top;
$(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>
5. CSS 수정
css 탭으로 가서 제일 밑으로 이동 후 아래 코드를 붙여넣기 해주시면 됩니다!
/* custom */
/*tocbot*/
.toc-absolute {
display: flex;
position: absolute;
margin-top:165px;
}
.toc-fixed {
position: fixed;
top: 165px;
}
.toc {
right: calc((100% - 850px) / 2 - 300px);
width: 250px;
padding: 10px;
box-sizing: border-box;
}
.toc-list {
margin-top: 10px !important;
padding-bottom: 5px !important;
font-size: 0.9em;
}
.toc > .toc-list li {
margin-bottom: 10px;
}
.toc > .toc-list .toc-link::before {
margin-top: -0.45em;
align-items: center;
align-content: center;
}
.toc > .toc-list li:last-child {
margin-bottom: 0;
}
.toc > .toc-list .node-name--H7 {
display: none;
}
.toc-default-header {
display: none;
}
.toc > .toc-list li a {
text-decoration: none;
}
.toc-list-item .is-collapsed{
max-height: 3000px;
}
6. 결과 확인하기!
아래 보시는 것처럼 사이드 목차가 생기는 걸 확인하실 수 있습니다!
근데 `제목 2`, `제목 3` 만 적용할 수 있어서 적절히 활용하시기 바랍니다!
'블로그 > 티스토리' 카테고리의 다른 글
| 티스토리 "붙여넣기 및 이미지 업로드 중입니다" 오류 해결 및 복원 방법 (2) | 2024.07.22 |
|---|---|
| 티스토리 사이드 목차 TOC(Table of Contents) 설정 방법 / Letter 스킨 (1) | 2024.07.20 |
| 티스토리 (``) 백틱으로 인라인 코드 삽입 방법 (1) | 2024.07.20 |
