안녕하세요 오늘은 티스토리 자동 목차를 만드는 법에 대해서 알려드리려고하는데요
생각보다 너무 간단하고 따라하기도 쉬워서 좋은 것 같아요
그럼 지금부터 한 번 알아보러 가실까요??
1. jQuery 파일 업로드
먼저 아래의 jquery.toc.min.js의 파일을 다운 받아주세요
그리고 티스토리의 관리에 들어가주세요
그리고 꾸미기탭-스킨 편집으로 들어가주세요
저같은 경우에는 book club이라는 스킨을 사용중인데요
여기에서 html 편집으로 들어가주세요
들어가시면 왼쪽 상단에 위와 같이 HTML / CSS / 파일업로드 3개로 나눠져있는데요
여기에서 파일업로드로 들어가주세요
그리고 추가를 누르신다음에 다운받으신 jquery.toc.min.js 파일을 클릭 후에 적용을 눌러주시면 1단계는 완성이에요
2. html 코드 수정
그리고 html 코드를 수정해야하는데요
아까 파일업로드를 선택한 곳에서 다시 html을 클릭해서 HTML 탭으로 이동해주세요
(HTML을 클릭해주시고 해당 탭이 빨간색으로 위와 같이 표시되면 OK에요)
그리고 html과 관련된 코드를 붙여주시면 되는데요
해당 html과 관련된 코드는 아래에 있어요
<script src="./images/jquery.toc.min.js"></script>
위의 코드를 복사하셔서 html 탭의 <head>쪽에 복사 붙여넣기 해주시면 돼요
아래에 <head>라고 써져있는 곳 아래에 복사 붙여넣기를 해주시면 된답니다
위의 해당 코드는 소스를 읽어오는 스크립트 코드이고 이것을 적용시킬 코드를 입력해야하는데요
적용시킬 코드는 아래에 있어요
<script>
$(document).ready(function () {
var $toc = $("#toc");
$toc.toc({ content: ".tt_article_useless_p_margin", headings: "h2,h3,h4" });
if($toc.text().length>0) {$(".book-toc").show();} // 만들 목차가 없으면 목차를 보이지 않음
});
</script>
위의 코드를 바로 밑에 복사 붙여넣기 해주시면 된답니다
그리고 코드를 복사/붙여넣기 완료하셨으면 꼭 우측 상단의 적용 버튼을 눌러주셔야해요
3. CSS 스타일 적용
그리고 html 코드를 전부 작성하셨으면 css 스타일을 적용하셔야하는데요
마찬 가지로 상단 위의 탭에서 CSS 항목으로 넘어가주세요
그리고 바로 해당 탭의 가장 아래로 내려서 밑의 코드를 복사+붙여넣기 해주세요
.book-toc {
position: relative;
width: fit-content;
border: 1px solid #b0d197;
padding: 10px 20px 0px 20px;
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: 18px;
color: #000 !important;
}
#toc {
padding: 0px 20px 0px 25px;
}
#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;
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;
}
여기까지 하시면 거의 모든 준비가 완료되었어요 이제 자동목차를 사용하기 위해서 마지막 일만 남았는데요
4. HTML 코드 적용하기
티스토리 글쓰기로 넘어가시면 보통 기본모드로 작성이 되어있을텐데요
여기에서 HTML 모드로 바꿔주세요
그리고 아래의 코드를 본인이 원하는 위치에 넣어주세요
<div class="book-toc" style="margin-top: 20px; margin-bottom: 10px;">
<p data-ke-size="size16">목차</p>
<ul id="toc" style="list-style-type: none;" data-ke-list-type="none"></ul>
</div>
그러면 H2,H3,H4 코드(제목 1로 작성하면 쓰이는 것)를 자동으로 인식해서 만들어준답니다
5. 오류 해결하기
다음은 오류를 해결하기 위한 질문인데요 순서대로 나열해보면 다음과 같아요
1. CSS 적용이 잘 되었는지 확인해보기
보통 잘 안 되는 경우는 CSS적용이 안 되어서 그런 것일수도 있어요
말하자면 배경을 안 그리고 사람만 그려서 오류가 나는 경우인데요
3번-CSS적용 을 다시 한 번 보시고 안 되시면 아래 댓글로 남겨주세요
2. <head>가 아닌 <body>에 넣어보기
<script>
$(document).ready(function () {
var $toc = $("#toc");
$toc.toc({ content: ".tt_article_useless_p_margin", headings: "h2,h3,h4" });
if($toc.text().length>0) {$(".book-toc").show();} // 만들 목차가 없으면 목차를 보이지 않음
});
</script>위에 해당하는 코드를 <head>가 아닌 <body>에 넣으시면 되는데요
HTML탭으로 가셔서 ctrl+F를 누르시고 body를 검색하셔서 해당 태그 아래에 복사+붙여넣기를 하시면 해결된답니다
혹시라도 적용이 잘 안 되시는 분들 있으시면 댓글로 남겨주세요 !!
'정보' 카테고리의 다른 글
| 티스토리 링크 추가하는 법 (+링크 색 플러그인) (3) | 2024.10.24 |
|---|