이글은 티스토리 북클럽 스킨을 대상으로 만든 예제입니다.
티스토리 관리페이지 → 꾸미기 → 스킨편집 → HTML 편집 → HTML
1. HTML 수정하기- </head>앞
HTML에서 </head> 앞에 아래코드를 추가합니다.이글은 티스토리 북클럽스킨을 대상으로 만든 예제입니다.
<!-- TOC Start -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
<!-- TOC End -->
</head>
2.HTML에서 </body>앞
HTML에서 </body> 앞에 아래코드를 추가합니다.
<!-- TOC Script Start-->
<script type="text/javascript">
$(document).ready(function () {
if (!location.pathname.startsWith("/entry/")) {
return
}
var content = document.querySelector(".entry-content");
var headings = [...content.querySelectorAll("h1, h2, h3, h4, h5, h6, h7")].filter(e => !e.parentElement.classList.contains('another_category'));
if (headings.length <= 1) {
return
}
let tocHead = document.createElement('div');
tocHead.className = 'toc-head';
content.prepend(tocHead);
var headingMap = {};
headings.forEach(function (heading) {
var id = heading.id
? heading.id
: heading.textContent.trim()
.toLowerCase()
.split(" ")
.join("-")
.replace(/[\!\@\#\$\%\^\&\*\(\):]/gi, "");
headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
if (headingMap[id]) {
heading.id = id + "-" + headingMap[id];
} else {
heading.id = id;
}
});
tocbot.init({
tocSelector: ".toc-head",
contentSelector: ".entry-content",
headingSelector: "h1, h2, h3",
hasInnerContainers: false,
activeLinkClass: 'toc-head-active-link',
disableTocScrollSync: false,
collapseDepth: 3,
ignoreSelector: '.another_category h4',
});
});
</script>
<!-- TOC Script End-->
</body>
3. CSS 수정하기
티스토리 관리페이지 → 꾸미기 → 스킨편집 → HTML 편집 → CSS
CSS 에서 아래코드를 추가합니다.
/* TOC */
.toc-absolute {
position: absolute;
margin-top: 10px;
}
.toc-fixed {
position: fixed;
top: 30px;
}
.toc-none {
display: none;
}
.toc {
right: calc((100% - 915px) / 2 - 170px);
width: 330px;
padding: 10px;
box-sizing: border-box;
}
.entry-content .toc-head {
background-color: #fafafa;
opacity: 0.8;
}
.toc-head {
font-size: 1em;
font-weight: 500;
margin-bottom: 40px;
padding-bottom: 10px;
padding-top: 10px;
border: 1px solid #999;
}
.toc-head:before {
content: "목 차";
display: block;
text-align: center;
padding: 4px 0 10px;
margin: 0px auto 0;
}
.is-active-link::before {
background-color: #0000ff !important;
}
.toc-head > ol {
list-style: none;
}
.toc-head > ol > li > ol {
list-style: none;
margin: 10px 0;
}
.toc-head ol > li {
margin: 10px 0;
text-indent: 0px;
}
.toc-head > ol > li {
color: black;
}
.toc-head a:before {
background-color: #fff0;
}
.toc-head-active-link {
font-weight: 500;
}
.toc-list > li {
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;
}
.toc-title {
font-weight: 500;
font-size: 1.2em;
color: dimgray;
padding: 10px;
background-color: #f1f1f1;
text-align: center;
}
@media screen and (max-width: 950px) {
.toc {
display: none;
}
}