목차
1. 목차 서식 자동 생성
1-1. jQuery TOC 플러그인 업로드
- 위 첨부 파일(jquery.toc.min.js) 다운
- 관리 페이지 > 꾸미기 > 스킨 편집 > HTML 편집 > 파일업로드 > 추가
- 다운 받은 자바스크립트 파일 업로드
1-2. 스크립트 적용
<!-- 자동 목차 생성 스크립트 -->
<script src="./images/jquery.toc.min.js"></script>
<script>
// 글 내부에 목차 자동 생성
$(document).ready(function() {
$("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});
});
</script>
- 관리 페이지 > 꾸미기 > 스킨 편집 > HTML 편집 > HTML 탭
- <body></body> 태그 사이에서 맨 아랫부분에 위 코드 삽입
1-3. 스타일 적용
/* 목차 스타일 */
.book-toc {
position: relative;
width: fit-content;
border: 1px solid #b0d197;
padding: 10px 20px 10px 15px;
z-index: 1;
}
.book-toc:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #b0d197;
z-index: -1;
opacity: 0.1;
}
.book-toc p {
font-weight: bold;
font-size: 1.2em !important;
color: #396120;
}
#toc * {
font-size: 20px;
color: #000 !important;
}
#toc {
margin-bottom: 0;
}
#toc a:hover {
color: #000;
}
#toc ul {
margin-top: 5px;
margin-bottom: 0px;
}
#toc > li {
padding-left: 0;
text-indent: 0;
list-style-type: disc;
margin-bottom: 10px;
}
#toc > li > a {
text-decoration:none;
}
#toc > li > ul {
padding-left: 20px;
margin-top: 0;
margin-bottom: 0;
}
#toc > li > ul > li {
font-size: 0.87em;
padding-left: 0;
text-indent: 0;
list-style-type: disc;
margin-bottom: 0;
margin-top: 5px;
}
#toc > li > ul > li > a {
font-size: 1em;
text-decoration:none;
}
#toc > li > ul > li > ul {
padding-left: 10px;
margin-top: 0;
margin-bottom: 0;
}
#toc > li > ul > li > ul > li {
font-size: 0.87em;
padding-left: 0;
text-indent: 0;
list-style-type: disc;
margin-bottom: 0;
margin-top: 3px;
}
#toc > li > ul > li > ul > li > a {
font-size: 0.875em;
text-decoration:none;
}
- 관리 페이지 > 꾸미기 > 스킨 편집 > HTML 편집 > CSS 탭
- 맨 아래에 위 코드 삽입
1-4. 목차 서식 등록
<div class="book-toc">
<p>목차</p>
<ul id="toc"></ul>
</div>
- 관리 페이지 > 콘텐츠 > 서식 관리 > 서식 쓰기 > HTML 모드
- 위 코드 작성 후 서식 생성
2. 플로팅 목차 생성
ㅇㅇㅇ
2-1. HTML 태그 및 자바스크립트 코드 작성
<!-- 플로팅 목차 -->
<div class="floating-toc"></div>
<script>
// 플로팅 목차 생성
$(document).ready(function() {
/* 스크롤 이벤트리스너 */
$(window).on('scroll', function() {
appendToc();
});
});
/* 떠 다니는 목차 */
var safeFlag = true;
function appendToc() {
var bookToc = $('.book-toc');
var floatingToc = $('.floating-toc');
if(bookToc.length > 0 && window.scrollY > bookToc.offset().top + bookToc.innerHeight()) {
if(floatingToc.height() === 0 && bookToc.innerHeight() > 70 && safeFlag) {
safeFlag = false;
floatingToc.css('display','block');
bookToc.css('width',bookToc.width()+'px'); //목차 박스 크기에 이상 있으면 제거하세요
bookToc.css('height',bookToc.height()+'px'); //목차 박스 크기에 이상 있으면 제거하세요
var tocTitle = $('<div id="toc-title"><p>목차 <span style="opacity:0.5;">펼치기</span></p></div>');
floatingToc.append(tocTitle);
bookToc.css('height', bookToc.height()); //목차 박스 크기에 이상 있으면 제거하세요
var tocBody = $('<div id="toc-body" style="display:none;"></div>').append(bookToc.find('#toc'));
floatingToc.append(tocBody);
floatingToc.addClass('floating-toc-ani');
floatingToc.css('padding', '0');
$('#toc-title').css('padding', '10px');
floatingToc.css('top', "20px");
floatingToc.css('left', "20px");
floatingToc.css('position', "fixed");
// 목차 클릭
function clickTitle() {
floatingToc.css('transition', '');
var title = $('#toc-title>p>span');
if(title.text() === "펼치기") {
$('#toc-title').css('padding', '10px 0 0 0');
floatingToc.css('padding', '0px 10px 10px 10px');
floatingToc.removeClass('floating-toc-ani');
}
setTimeout(function(){
$('#toc-body').slideToggle(300,'linear', function() {
if(title.text() === "접기") {
floatingToc.css('transition', '');
title.text("펼치기");
floatingToc.css('padding', '0');
$('#toc-title').css('padding', '10px');
floatingToc.addClass('floating-toc-ani');
} else {
title.text("접기");
}
});
},200);
}
$('#toc-title').on('click', function(){
clickTitle();
});
//목차 항목 클릭
$('#toc-body').find('a').on('click', function(){
setTimeout(function(){
checkPosition();
}, 200);
});
clickTitle();
setTimeout(function(){
if($('.tt_article_useless_p_margin').offset().left < $('.floating-toc').width() + 40) {
clickTitle();
}
}, 500);
setTimeout(function(){
safeFlag = true;
}, 1100);
} else {
checkPosition();
}
} else {
$('#toc-title').off('click');
bookToc.append(floatingToc.find('#toc'));
floatingToc.find('div').remove();
floatingToc.removeAttr('style');
floatingToc.css('display','none');
$('#toc').find('a').removeAttr('style');
}
}
</script>
- 관리 페이지 > 꾸미기 > 스킨 편집 > HTML 편집 > HTML 탭
- <body> 태그 내의 하단 부분에 위 코드 삽입
2-2. CSS 작성
/* 플로팅 목차 스타일 - 고급 */
.floating-toc {
position: absolute;
cursor: pointer;
border: 1px solid #b0d197;
background: #fff;
padding: 10px;
z-index: 999;
display: none;
}
.floating-toc:after {
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #b0d197;
opacity: 0.1;
z-index: -1;
}
.floating-toc p {
font-weight: bold;
font-size: 1em !important;
margin: 10px 0 10px 0;
}
.floating-toc #toc-body {
margin-top: 10px;
}
.floating-toc #toc-body #toc * {
font-size: 15px;
}
.floating-toc #toc-body #toc {
margin-left: 0;
padding-left: 20px;
}
.floating-toc #toc-body #toc > li > ul > li > a {
font-size: 0.9em;
}
.floating-toc #toc-body #toc > li > ul > li > ul > li > a {
font-size: 0.8125em;
}
.floating-toc-ani {
animation: bounce-toc 5s linear infinite;
}
@keyframes bounce-toc {
0% {
transform: scale(1.0);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(1.0);
}
}
- 관리 페이지 > 꾸미기 > 스킨 편집 > HTML 편집 > CSS 탭
- 맨 하단에 위 코드 삽입
3. 내용 출처
티스토리 글에 자동으로 목차 넣기
목차를 넣고 싶긴한데 글 쓸 때마다 매번 수작업으로 만든다면 상당히 번거롭겠죠. 그래서 jQuery 플러그인 Table of Contents(TOC)를 이용하여 자동으로 넣는 방법을 소개합니다. 저는 제목1, 제목2로
sangminem.tistory.com
티스토리 떠 다니는 플로팅 목차 만드는 방법 (고급 버전)
초급 버전에서 좀 더 기능을 강화한 버전을 만들어 보았습니다. 어느 정도 코딩이 가능한 분이어야 수월하게 따라하실 수 있을 겁니다. 이 부분이 어렵게 느껴지시는 분은 다음 초급 버전을 참
sangminem.tistory.com
미넴님 좋은 자료 감사합니다^^
'티스토리 사용법' 카테고리의 다른 글
| [티스토리] 코드 블럭 커스터마이징 (0) | 2022.12.29 |
|---|---|
| [티스토리 사용법] 제목 스타일 지정 (0) | 2022.12.24 |
| [티스토리] 마크다운 문법으로 글쓰기 (0) | 2022.12.21 |
| [티스토리] 마크다운 스타일 적용 방법 (2) | 2022.12.21 |
| 티스토리 수식 입력하는 방법(MathJax) (2) | 2022.09.11 |
댓글