tocbot이라는 스크립트를 사용해 Tistory에서 작성한 글의 목차가 자동으로 생성되는 기능을 알아보자.
이 글 자체로 Test를 진행하기 때문에 참고를 위해 목차 앞에 [제목#]를 입력해 두었으니 참고 바란다.
[제목1] 스크립트 추가.
<<입력 값>>
<!-- 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 -->[제목2] header에 추가하기
블로그관리->스킨편집->우측에 'html 편집'을 클릭하고 <head> tag 안에 상기 스크립트를 입력한다.
[제목1] Div tag 추가.
<<입력 값>>
<div class='toc toc-fixed'></div>
[제목2] content tag에 추가하기
<body> tag 안에 content를 검색하고 content 및에 상기 div tag 정보를 입력한다.(content가 없으면 contents 밑에 입력하자)
[제목1] Script 추가.
<<입력 값>>
<script>
var content = document.querySelector('.entry-content')
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: '.entry-content',
headingSelector:'h1, h2, h3',
hasInnerContainers: false
});
$(document).ready(function(){
$('.toc').addClass('toc-absolute');
var toc_top = $('.toc').offset().top - 165;
$(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>[제목2] </body> tag 바로 위에 script 추가하기
html 편집 맨 밑으로 가면 </body> tag가 있다 그위에 상기 script 코드를 입력한다.
[제목1] css 추가.
<<입력 값>>
/* tocbot */
.toc-absolute {
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;
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;
}[제목2] css 마지막에 추가하기
위에 보면 CSS 탭이 있다 선택한다.
상기 CSS 코드를 복붙 한다.
'적용'버튼을 누르면 끝!
[제목1] Tisotry 글 작성하기
목차 설정을 위해선 꼭 일일이 본문>제목#를 선택해 주어야 한다.
[제목1] 결과 확인하기
본문 글 우측에 목차가 자동 생성된 것을 확인할 수 있다. 엄청 편리하죠?
[제목1] 적용된 스킨 정보
참고로 해당 스킨편집에 사용된 스킨은 'Poster' 이다.
반응형
사업자 정보 표시
라울앤알바 | 장수호 | 서울특별시 관악구 봉천로 13나길 58-10, 404호(봉천동) | 사업자 등록번호 : 363-72-00290 | TEL : 010-5790-0933 | Mail : shjang@raulnalba.com | 통신판매신고번호 : 2020-서울관악-0892호 | 사이버몰의 이용약관 바로가기
'Investment > blog' 카테고리의 다른 글
| 상호명 규칙 (0) | 2022.03.02 |
|---|---|
| 신년 계획 양식(만다라트, ORK, notion) (1) | 2022.01.04 |
