728x90
TOC란 무엇인가?
TOC는 Table of Contents를 의미하며, Markdown으로 작성한 글의 헤더를 모아 간편하게 보여주는 용도로 사용됩니다. TOC를 통해 독자는 문서의 구조를 쉽게 파악하고 원하는 내용을 빠르게 찾을 수 있습니다.
제가 사용한 TOC는 tocbot이라는 라이브러리로, 기본 스타일이 깔끔하게 구성되어 있지만, 개인적인 취향에 맞게 CSS를 수정하여 사용하고 있습니다.
TOC 적용 방법
TOC를 웹사이트에 적용하려면 다음 단계를 따라 주세요.
파일 다운로드 및 업로드
아래 첨부 파일을 다운로드한 후, 티스토리 스킨 편집에서 해당 파일을 업로드합니다.
Header 부분 코드
<!-- toc Start -->
<script src="./images/toc.js"></script>
<link rel="stylesheet" href="./images/toc.css">
<!-- toc 목차 End -->Body 부분 코드
<!-- toc2 Start -->
<div class='toc hidden-xs hidden-sm'></div>
<!-- toc2 End -->JavaScript 부분 코드
<!-- toc3 Start -->
<script>
var content = document.querySelector('.tt_article_useless_p_margin');
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;
heading.id = headingMap[id] ? id + '-' + headingMap[id] : id;
});
tocbot.init({
tocSelector: '.toc',
contentSelector: '.tt_article_useless_p_margin',
headingSelector: 'h1, h2, h3, h4',
hasInnerContainers: false
});
$(document).ready(function(){
$('.toc').addClass('toc-absolute');
var toc_top = $('.toc').offset().top - 10;
$(window).scroll(function() {
if ($(this).scrollTop() >= toc_top) {
$('.toc').addClass('toc-fixed').removeClass('toc-absolute');
} else {
$('.toc').addClass('toc-absolute').removeClass('toc-fixed');
}
});
});
</script>
<!-- toc3 End -->CSS 부분 코드
/* toc Start */
.toc {
position: fixed;
top: 12%;
right: 1.1%;
width: 250px;
padding: 10px 0px 15px 6px;
border-radius: 10px;
box-sizing: border-box;
box-shadow: 0px 3px 10px rgb(0 0 0 / 55%);
background: #59595900;
}
.toc-list {
margin-top: 10px !important;
font-size: 14px;
padding-right: 8px;
font-family: "NotoSansKR";
color: #fff;
text-overflow: ellipsis;
}
.toc > .toc-list li {
margin-bottom: 10px;
}
.toc > .toc-list li:last-child {
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.toc > .toc-list li a {
text-decoration: none;
}
/* toc End */최적화 및 개인화
TOC를 적용한 후, 자신의 스킨에 맞게 CSS를 수정하여 개인적인 스타일을 반영할 수 있습니다. 이러한 방식으로 사용자 경험을 향상하고, 독자가 원하는 정보를 쉽게 찾을 수 있도록 도와줄 수 있습니다. 앞으로도 유용한 정보를 지속적으로 제공하도록 하겠습니다.
728x90
