반응형
이전에 작성된 글까지 목차 기능을 적용하려면 자동 삽입 스크립트를 사용하는 것이 편리하다.
자동 삽입 조건
- 수동 목차 요소가 없을 것
- H2, H3 제목이 1 개 이상 있을 것
- 중복 삽입 되지 않을 것
추가 기능
- 제목을 누르면 목차로 이동
설치하기
위 js 파일을 내려받은 후, 티스토리 관리자 페이지에서 스킨 편집 메뉴로 이동한다.
원본 소스를 변경 하지 않는한, 압축버전인 .min.js 파일만 있으면 된다.
스킨 편집 메뉴 클릭
html 편집 버튼 클릭
파일 업로드 탭으로 이동 후, 페이지 아래의 +추가 버튼을 눌러서 jquery.toc.min.js 파일을 업로드한다.
예제 코드
HTML
<head>
<!--목차 스크립트-->
<script src="./images/jquery.toc.min.js"></script>
</head>
<body>
... 내용 아래에 추가
<!-- 목차 스크립트 -->
<script>
$(function(){
$("#toc").toc( {
content: "article .contents_style",
headings: "h2,h3,h4",
top: -90,
isBlink : true,
blinkColor : '#21B9DE',
scrollSpeed: 500
} )
});
</script>
<script>
const toc_table = '<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>';
if ( $(".entry-content #toc").length == 0 ) {
if( $(".contents_style h2").length >= 1 || $(".contents_style h3").length >= 1 || $(".contents_style h4").length >= 1 ){
$('article .entry-content').prepend(table + "<br/>"); // before, after, prepend, append
}
}
$(".contents_style h2, .contents_style h3").click(function(){
$('html, body').animate({
scrollTop: $(".book-toc").offset().top
}, 500);
}).css('cursor', 'pointer');
</script>
<!-- 목차 스크립트 끝 -->
</body>본문에 id="toc" 개체가 없고, H2, H3 요소가 1개 이상 있으면 목차 코드를 삽입하는 jQuery 스크립트.
위 코드는 본문의 맨 위에 삽입 하도록 코딩했다.
CSS
제목을 꾸미는 코드
/* Entry Content */
.entry-content h1 {
clear: both;
margin: 29px 0 22px;
font-size: 1.6875em;
line-height: 1.5;
color: #000;
border-style: solid;
border-width : 0px 0px 1px 15px;
border-color: #F47378;
background-color: #fff;
padding: 10px 10px;
}
.entry-content h2 {
clear: both;
margin: 24px 0 12px;
font-size: 1.5em;
line-height: 1.5;
color: #000;
border-style: solid;
border-width : 0px 0px 1px 15px;
border-color: #FFB27D;
background: linear-gradient(to right, #FFB27D17, #ffffff);
padding: 10px 10px;
}
.entry-content h3 {
clear: both;
margin: 24px 0 12px;
font-size: 1.3125em;
line-height: 1.4;
color: #000;
border-style: solid;
border-width : 0px 0px 1px 7px;
border-color: #6BD089;
background: linear-gradient(to right, #6BD08917, #ffffff);
padding: 10px 10px;
}
.entry-content h4 {
clear: both;
margin: 24px 0 12px;
font-weight: 400;
font-size: 1.125em;
line-height: 1.3;
color: #000;
border-style: solid;
border-width : 0px 0px 1px 5px;
border-color: #60C5F1;
background: linear-gradient(to right, #60C5F117, #ffffff);
padding: 10px 15px;
}
목차 박스를 꾸미는 코드
.book-toc {
border: 1px solid #FFF766;
border-width : 5px 1px 1px 1px;
padding: 10px 10px 0px 15px;
background: linear-gradient(to right, #FFF76617, #ffffff);
}
.book-toc ul {
list-style-type: inherit;
}
.book-toc p {
font-weight: 550;
font-size: 1.2em !important;
margin-bottom: 7px;
}
#toc * {
font-size: 14px;
color: #676767;
}
#toc a:hover {
color: #f00;
}
#toc ul {
margin-bottom: 0px;
margin-top: 5px;
}
#toc > li {
margin-bottom: 5px;
}
#toc > li::marker {
content: "🔵";
color: #FF00DD;
font-size: 1em;
}
#toc {
margin-left: 5px;
}
#toc > li > ul li {
margin-bottom: 5px !important;
}
#toc > li > ul > li::marker {
content: "🔹";
color: #00D8FF;
font-size: 13px;
}
개정
2023-11-14. JS 코드 수정
반응형
