티스토리 자동 목차 쉽게 만드는 법, 복사 붙여넣기로 10분 완성!
안녕하세요! 오늘은 티스토리에서 자동 목차를 구현하는 방법에 대해 알아보겠습니다. 블로그를 하다 보면 자동 목차가 필요하다는 것을 느끼게 되는데요! 목차가 있으면 독자의 가독성이 향상되고, 구글 SEO 측면에서 추가 점수를 받아 상위 노출에 유리합니다.
1. HTML 코드 편집
HTML 편집으로 이동하기
우선 티스토리 스킨 편집에 들어가야 합니다. 관리 홈에서 하단에 위치한 '스킨 편집' 탭으로 이동하세요.
이어서 우측 상단에 위치한 'html 편집' 버튼을 클릭합니다.
head 코드 수정하기
이제 본격적으로 코드 수정을 시작합니다. '파일업로드' 탭 옆에 있는 'HTML' 탭으로 이동합니다. HTML 코드 수정을 시작하기 전에 파일을 백업해 두는 것을 추천드립니다. 언제든 되돌릴 필요가 있을 수 있습니다.
HTML 코드를 보면 복잡해 보일 수 있지만 걱정하지 마세요. 제가 여러분을 도와드릴 테니 간단한 복사와 붙여넣기만 하면 됩니다. 아래의 HTML 코드를 복사하세요.
<!-- ★☆★☆★☆ 자동 목차 시작 ★☆★☆★☆ -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- ★☆★☆★☆ 자동 목차 끝 ★☆★☆★☆ -->
복사한 코드를 HTML 코드의 가장 상단에 위치한 <head>와 </head> 사이에 붙여 넣습니다. 스킨별로 다른 코드들이 있을 수 있으니 <head> 아래, </head> 위에만 붙여 넣으세요.
또한 코드들의 줄을 사진처럼 정리하면 나중에 보기 편합니다. 이것은 선택 사항이지만 가시성을 높이기 위해 도움이 될 수 있습니다.
코드 입력이 끝났으면 오른쪽 위의 '적용' 버튼을 반드시 눌러야 합니다. 적용 버튼을 누르지 않으면 작업이 날아가니 HTML이나 CSS를 수정할 때는 꼭 적용 버튼을 누르세요.
Body 코드 수정하기
첫 번째 Body 코드
이제 HTML에 또 하나의 코드를 추가해야 합니다. 아래 코드를 복사해 주세요. 이 코드는 Body에 넣으면 되며, 위치는 개인 취향에 따라 정할 수 있습니다.
저는 끝부분에 넣기보다는 위쪽에 넣는 것을 선호합니다. 나중에 찾기 어려울 수 있기 때문입니다.
<!-- ★☆★☆★☆ 자동 목차 시작 ★☆★☆★☆ -->
<script>
$(document).ready(function () {
var $toc = $("#toc");
$toc.toc({ content: ".tt_article_useless_p_margin", headings: "h2, h3, h4" });
});
</script>
<!-- ★☆★☆★☆ 자동 목차 끝 ★☆★☆★☆ -->
<body>와 </body> 사이에만 넣으면 되니 편하신 위치에 넣어주세요.
두 번째 Body 코드
Body에 들어갈 또 하나의 자바스크립트 코드가 있습니다. 복사 후 가장 마지막에 붙여 넣는 것이 좋습니다. Ctrl + End를 눌러 코드의 끝으로 이동하세요!
<script>
$(document).ready(function() {
var $tocContainer = $("#toc");
$(".article-view h2, .article-view h3, .article-view h4").each(function(index) {
var titleText = $(this).text();
var titleID = $(this).attr("id");
var level = this.tagName.toLowerCase();
var listItem = "<li class='" + level + "'><a href='#" + titleID + "'>" + titleText + "</a></li>";
$tocContainer.append(listItem);
});
});
</script>
이 코드를 </body> 전에 넣으면 됩니다. 아래 사진을 참고하세요! 적용 버튼도 잊지 마세요.
세 번째 Body 코드 : Article_rep_desc 코드 수정하기
HTML에서 마지막으로 수정할 부분입니다. Ctrl + F로 'article_rep_desc'를 검색하세요! 이 코드는 포스팅할 때마다 반복되는 부분입니다.
검색된 여러 코드 중에서 수정해야 할 부분을 찾아야 합니다. <div>와 </div> 사이에 글자를 넣어보고 미리 보기를 통해 위치를 확인하세요.
바뀌는 위치를 찾으면 수정할 <div>의 위치를 발견한 것입니다. 이곳에 아래 코드를 붙여 넣으세요.
<div class="book-toc">
<ul id="toc">
<li><p data-ke-size="size16">목차</p></li>
</ul>
</div>
이 코드를 해당 위치에 넣으면 완료됩니다.
2. CSS 코드 편집
마지막으로 CSS 코드를 편집합니다. 위의 작업이 완료된 후 미리 보기를 하면 목차가 표시될 것입니다. 하지만 더 예쁜 목차를 원하신다면 CSS를 수정해 주세요.
우측 상단의 'CSS' 탭으로 이동하여 작업을 시작합니다.
아래는 기본적인 CSS 코드입니다. 더 나은 CSS를 원하시면 다른 것을 적용하셔도 됩니다. 복사 후 CSS의 가장 마지막에 붙여 넣는 것을 추천드립니다.
나중에 찾기 쉽게 하기 위해서입니다.
/* ☆★☆★☆★☆★☆★ 여기부터 목차☆★☆★☆★☆★ */
#toc li {
list-style: none;
}
#toc .h2 a {
display: inline-block;
content: "★ ";
color: #d35400;
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
#toc .h3 a {
display: block;
color: #2980b9;
font-size: 16px;
font-weight: normal;
margin-left: 20px;
margin-bottom: 5px;
}
#toc .h4 a {
display: block;
color: #8e44ad;
font-size: 14px;
font-weight: normal;
margin-left: 40px;
margin-bottom: 5px;
}
#toc li a {
text-decoration: none;
}
#toc li a:hover {
text-decoration: underline;
}
#toc li p[data-ke-size="size16"] {
font-weight: bold;
font-size: 20px;
color: #333;
margin: 10px 0;
text-transform: uppercase;
}
/* ☆★☆★☆★☆★☆★ 여기까지 목차 ☆★☆★☆★☆★ */
모든 작업을 마치셨습니다! 미리 보기를 통해 자동 목차가 정상적으로 적용된 것을 확인해 보세요!
'IT > 코딩' 카테고리의 다른 글
| 파이썬 셀레니움, 새로운 창 없이 로그인 세션으로 코드 실행 (0) | 2024.10.18 |
|---|---|
| Chat GPT API를 활용한 파이썬 이미지 분석 초간단 가이드 (1) | 2024.10.18 |
| 파이썬으로 네이버 블로그 포스팅 글자수, 이미지수 세는 방법과 감정 분석 (6) | 2024.10.08 |
| 파일명 일괄 변경하는 방법, 프로그램 다운로드 없이 손쉽게! (1) | 2024.10.01 |
| 파이썬 활용 네이버 블로그 글자 수, 이미지 수 분석 방법! (1) | 2024.09.15 |
댓글