반응형
∴ Toc
Toc란? Table of Contents를 의미하고 있으며, markdown으로 작성한 글의 header를 모아서
간편하게 보여주는 용도입니다.
제가 사용한 toc는 tocbot이며, 기본적 스타일도 깔끔하게 되어있지만 저만의 스타일로 살짝
CSS를 수정하였습니다.
∴ 적용하기
아래 첨부 파일을 다운로드하시고 티스토리 스킨 편집에 해당 파일을 업로드해 주세요.
∴ 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 -->
∴ Jabascript 부분
<!-- 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
if (headingMap[id]) {
heading.id = id + '-' + headingMap[id]
} else {
heading.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');
$('.toc').removeClass('toc-absolute');
} else {
$('.toc').addClass('toc-absolute');
$('.toc').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*/
적용하신 뒤 자신의 스킨에 맞게 천천히 수정하시면서 사용하시면 되겠습니다.
그럼 앞으로도 좋은 정보를 모아 오도록 하겠습니다.
- 모아줌: Moazum -
반응형