[Tips] 티스토리 글에 자동으로 목차 쉽게 넣는 방법 (코딩 몰라도 가능!)

 

안녕하세요! 😊

오늘은 티스토리 글에 자동으로 목차를 생성하는 방법에 대해 공유하려고 합니다.

제가 사용하고 있는 스킨은 북클럽 스킨인데요, 스킨에 따라서 조금 차이가 있을 수도 있으니 아래 내용을 따라하셨는데도 목차가 표시되지 않는다면, 3. HTML 코드 수정 섹션의 하단을 확인해 주세요!

아래와 같이 Simple 버전과 Purple 버전 두가지로 준비했으니 끝까지 글을 읽어주세요.

Simple 버전

큐티뽀짝 Purple 버전

코드를 일부 수정해야 하긴 하지만, 코딩을 몰라도 차근차근 따라하시면 누구나 쉽게 하실 수 있으니
포기하지 마시고 따라해 보세요!

 

목차

 

---

1. 공개 소스 jquery.toc.zip 파일 다운로드

아래 첨부파일을 클릭하여 다운로드해 주세요.

자동으로 목차를 만들어주는 오픈 소스입니다.

jquery.toc.zip

0.00MB

 

다운로드한 zip 파일을 압축 해제하면, 아래와 같이 두가지 파일을 확인하실 수 있습니다.

- jquery.toc.js
- jquery.toc.min.js

---

2. 티스토리 스킨에 js 파일 업로드

1) 꾸미기 - 스킨 편집

블로그 관리 페이지에서 꾸미기 - 스킨 편집을 클릭합니다.

2) html 편집

우측에서 html 편집 버튼을 클릭합니다.

3) js 파일 업로드

상단에서 파일업로드 탭을 클릭하고, 하단의 추가 버튼을 눌러주세요.

아까 다운로드 해놓았던 두가지 파일을 선택 후, 열기를 눌러 파일을 추가합니다.

아래 이미지와 같이 파일이 추가된 것을 확인하였다면, 적용 버튼을 클릭해 주세요.

---

3. HTML 코드 수정

HTML 탭을 클릭하면, 코드가 쭉 입력되어 있는 것을 보실 수 있고,
스크롤을 맨 끝까지 내리면, </body> 라고 쓰여있는 부분이 있습니다.

</body> 위에 아래의 코드를 복사하여 넣어주세요!

💡 제목1, 제목2, 제목3 으로 작성한 제목들을 전부 목차에 넣고 싶은 경우에는, headings 부분을 "h2,h3,h4"로 작성해 주세요.
저는 제목1, 제목2만 목차로 만들고 싶어서 h2,h3만 넣어주었습니다.

<script src="./images/jquery.toc.min.js"></script>
<script>
    $(document).ready(function() {
      var link =  document.location.href;
      var $toc = $("#toc");
      $toc.toc({content: ".entry-content", headings: "h2,h3"});
      
      if($('.another_category').length > 0) {
          $toc.find('li:last').remove();
      }
    });
</script>

 

그러면 아래와 같이 되겠죠?

그러면 이제 거의 다 됐습니다!

북클럽 스킨이 아닌 다른 스킨을 사용하고 있다면, 위 코드에서 .entry-content를 해당 스킨에 맞게 바꿔 주셔야 합니다. 
제가 알기로 매거진 스킨은 .inner_content로 바꿔줘야 하는데, 다른 스킨들은 아직 확인을 해보지 못했습니다.
적용이 되지 않는 스킨이 있다면, 댓글로 알려주세요!

 

---

4. CSS 수정하기 - 스타일 수정

CSS 탭을 클릭한 후, 맨 하단으로 스크롤하여 아래의 코드를 입력해 주세요.

저는 보라색을 좋아해서 보라색으로 설정을 하였는데, 심플 버전도 준비하였으니, 원하시는 스타일을 골라 적용해 주세요!

Ver 1. Simple Style

.index_toc {
  border: 1px solid #d8d8d8;
  padding: 10px 20px;
	background-color: #F3F3F3;
}
.index_toc p{
	padding-bottom: 8px;
	margin-bottom: 16px;
	font-weight: bold;
	border-bottom: 1px solid #d8d8d8;
}
.index_toc a{
	border:none;
	color: #4e4e4e !important;
	font-weight:normal;
}
.index_toc ul li{
	list-style: none;
}
#toc {
	padding-left:0;
	margin-bottom: 0;
}
#toc > li ul{
	list-style: none;
	padding-left: 23px;
	margin-top: 8px;
}
#toc > li ul li{
	margin-bottom: 7px;
}
#toc > li ul li a{
	color: #666666 !important;
}

Ver2. Purple Style

/* 목차 Style */
.index_toc {
  border-left: 4px solid #8161d4;
  padding: 0 20px;
}
.index_toc p{
	margin-bottom: 8px;
	font-weight: bold;
}
.index_toc a{
	border:none;
	color: #8161d4 !important;
	font-weight:normal;
}
.index_toc ul li{
	list-style: none;
}
#toc {
	padding-left:0;
	margin-bottom: 0;
}
#toc > li::before{
	content: "💜";
	margin-right: 7px;
}
#toc > li ul{
	list-style: none;
	padding-left: 23px;
	margin-top: 8px;
}
#toc > li ul li{
	margin-bottom: 7px;
}
#toc > li ul li a{
	color: #888888 !important;
}

---

5. 목차 서식 만들기

조금 더 편하게 목차를 만들기 위해서 서식을 만들어 사용해주면 좋습니다!

블로그 관리 페이지에서 콘텐츠 - 서식 관리를 클릭해 주세요.

 

서식 쓰기 버튼을 클릭한 뒤, 편집 모드를 기본 모드에서 HTML로 변경해 줍니다.

제목에는 원하는 제목을 입력하고, 아래의 코드를 붙여 넣어주세요.

<div class="index_toc">
<p data-ke-size="size18">목차</p>
<ul id="toc" style="list-style-type: none;" data-ke-list-type="none"></ul>
</div>

아래와 같이 완성되었다면, 완료 버튼을 눌러주세요.

 

6. 글 작성 시 서식 불러오기

1) 글을 작성할 때, 상단의 ... 아이콘을 클릭하여 서식을 클릭합니다.

2) 아까 만들어 두었던 서식을 클릭합니다.

3) 서식을 클릭하면 다음과 같이 '목차'라는 텍스트만 표시되는데, 정상입니다!

글을 게시하고 나면 목차가 보일 거예요 🥰

 

 

 

---

위 방법을 통해서 여러분도 자동 목차 생성에 성공하시길 바랍니다! 💜

혹시 잘 적용이 되지 않거나 궁금한 사항이 있다면 댓글로 남겨주세요. 최대한 도움을 드릴 수 있도록 하겠습니다! 🤗

감사합니다.