티스토리 자동 목차 생성 최신 방법. 따라만 하세요.
안녕하세요. 이번 포스팅은 자동 목차 만드는 방법에 대해 알아보고자 합니다.
매번 수작업으로 만든다면 너무 노가다스러운 일이죠.
저는 Odyssey 스킨을 사용중이고 다른 스킨에서는 테스트 해보지 않았습니다만 다른 스킨에서도 사용할 수 있게 가이드 해 드리겠습니다.
목차
1. 첨부파일 업로드
우선 목차를 자동으로 생성하려면 확장자가 js로 된 파일을 업로드 해야합니다.
아래 첨부파일을 다운 받으세요.
파일을 받으셨으면 티스토리 관리모드로 들어가주세요.
관리 > 꾸미기 > 스킨편집 순서로 가시면 됩니다.
그러면 새로운 창이 하나 뜨는데 그 창의 우측 상단을 보시면 html 편집 이라는 버튼이 있습니다. 이걸 클릭하세요.
그러면 HTML, CSS, 파일업로드 3개의 탭이 있습니다. 파일업로드를 클릭하세요.
맨 아래 보시면추가 버튼이 있습니다. 추가 버튼을 클릭하여 아까 받은 js 파일을 업로드한 후 적용버튼을 클릭합니다.
리스트에 아래처럼 나타나면 됩니다.
2. HTML 내용 추가
<!-- 자동 목차 시작 -->
<script src="./images/jquery.toc.min.js"></script>
<!-- 자동 목차 끝 -->위 코드를 복사합니다.
코드를 복사한 후 아래 HTML 탭으로 가신 후 </head> 바로 앞에 붙여넣습니다. 그리고 상단에 적용 버튼을 누르세요.
아래 이미지를 참고하세요.
<!-- 자동 목차 시작 -->
<script>
$(document).ready(function () {
var $toc = $("#toc");
$toc.toc({ content: ".tt_article_useless_p_margin", headings: "h2,h3,h4" });
});
</script>
<!-- 자동 목차 끝 -->마찬가지로 위 코드를 복사하신 후 </body> 바로 앞에 붙여 넣으시면 됩니다. 그리고 상단에 적용 버튼을 누르세요.
아래 이미지를 참고하세요.
중요한 사항으로 여기서 적용하는 스킨중에 간혹 class 명이 맞지 않는 경우가 있는데 class명이 맞지 않으면 해당 기능이 돌아가지 않아요. 만약 이 포스팅의 끝까지 해보신 후 기능이 되지 않는다면 아래 내용을 따라서 해보세요.
먼저 본인이 작성한 글을 하나 오픈합니다. 그 다음 키보드의 F12 버튼을 누르세요.
아래처럼 오른쪽이나 새로운 창으로 영어로 어지럽게 화면이 나오면 됩니다.
그 다음 아래 주황색으로 표시한 줄의 위에 버튼을 클릭 한 후 본문 중 한곳을 클릭하세요.
그러면 아래처럼 해당 영역의 위치로 안내를 해주는데요 <div class=" 이후에 쓰여있는 영문을 복사합니다.
저 뒤에 contents_style은 아닙니다. 아래 이미지에서는 [ tt_article_useless_p_margin ]입니다.
그 다음 복사한 영문과 아래 content 옆에 있는 영문이 다르다면 바꿔서 적용하세요.
$toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});
3. CSS 등록
css 탭에서 제일 아래 부분에 아래 코드를 추가하세요.
/* 자동 목차 스타일 */
.book-toc {
position: relative;
width: fit-content;
border: 1px solid #aaaaaa;
width: 100%;
height: 100%;
padding: 10px 20px 0px 20px;
z-index: 1;
}
.book-toc:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #cfcfcf;
z-index: -1;
opacity: 0.1;
}
.book-toc p {
font-weight: bold;
font-size: 1.2em !important;
color: #4e504d;
}
#toc * {
font-size: 18px;
color: rgb(65, 65, 65) !important;
}
#toc {
padding: 0px 20px 0px 25px;
}
#toc a:hover {
color: rgb(65, 65, 65);
}
#toc ul {
margin-top: 5px;
margin-bottom: 0px;
}
#toc > li {
padding-left: 0;
text-indent: 0;
list-style-type: disc;
padding: 0px 20px 0px 0px;
margin-bottom: 10px;
margin-top: 7px;
}
#toc > li > a {
text-decoration:none;
font-weight: bold
}
#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: 5px;
margin-top: 5px;
}
#toc > li > ul > li > a {
font-size: 1em;
text-decoration:none;
}
#toc > li > ul > li > ul {
padding-left: 20px;
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: 0px;
margin-top: 0px;
}
#toc > li > ul > li > ul > li > a {
font-size: 0.875em;
text-decoration:none;
}
/* h2, h3, h4 스타일 */
.tt_article_useless_p_margin h2 {
text-align: left;
background-color: black;
border-left: gray 10px solid;
border-bottom: 1px solid gray;
padding: 3px 0 5px 10px;
margin: 30px 0 20px 0;
}
.tt_article_useless_p_margin h3 {
text-align: left;
border-left: #d4d4d4 8px solid;
border-bottom: 1px solid #d4d4d4;
padding: 3px 0 5px 10px;
margin-bottom: 15px;
}
.tt_article_useless_p_margin h4 {
text-align: left;
border-left: #cfcfcf 6px solid;
border-bottom: 1px solid #cfcfcf;
padding: 3px 0 5px 10px;
margin-bottom: 15px;
}4. 서식 등록
서식 등록의 상세 내용은 생략하겠습니다.
경로는 관리 > 콘텐츠 > 서식관리에서 추가하시면 됩니다. 모르시는 분들은 아래 이미지 참고하세요.
글쓰기에서 매번 목차를 만들기 어려우니 서식에 등록을 하셔서 사용하시길 권장합니다.
서식 등록시 HTML 모드로 아래 코드를 등록해서 사용하세요.
<div class="book-toc">
<p data-ke-size="size16">Contents</p>
<ul id="toc"></ul>
</div>5. 작성해보기
자 이제 여기까지 오셨으면 작성해서 테스트 해보시면 됩니다.
간단하게 내용을 작성합니다.
다만 소제목은 h2나 h3으로 작성되어야합니다. [제목2, 제목3]에 해당합니다.
아래 이미지에서는 단원1, 단원2를 [제목3]으로 작성하였습니다.
다음에는 빈 여백을 클릭 한 후 위에서 등록한 서식을 클릭 해서 적용하시면 됩니다.
아래처럼 나오면 됩니다.
이제 끝입니다. 글쓰기를 마치면 (발행하시면) 자동으로 목차가 나타납니다.
목차의 색상은 위에 css에서 변경하시면 됩니다.
이제 잘 쓰시면 됩니다. 감사합니다.