티스토리 목차 자동으로 만드는 방법

Tistory에서 목차를 자동을 생성하는 방법을 알아보겠습니다. 목차를 HTML모드로 작동시키는 방법도 어렵진 않지만, 뭐든 자동화하면 편한 것 같아서 기록으로 남겨놓습니다.

 

[ 목차 ]

 

1. jquery.toc파일 다운로드

아래의 파일을 다운받습니다. jquery.toc.js파일과 jquery.toc.min.js파일이 필요합니다.

jquery.toc.zip

0.00MB

2. Tistory 스킨에 업로드

다운받으면 images/jquery.toc.js, images/jquery.toc.min.js의 두개의 파일을 업로드해줍니다.

 

3. HTML 소스코드 편집

아래의 소스코드를 HTML 편집화면에서 js파일을 로딩하는 부분은 </head>바로 윗부분에 넣어주고, 실제 실행하는 코드는 </body>태그 바로 앞에 넣어줍니다.

<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
</head>

...

<script>
 $(document).ready(function() {
  var $toc = $("#toc");
  $toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});
 });
</script>
</body>

 

4. CSS 편집

적절한 곳에 아래의 CSS 코드를 넣어줍니다. 그냥 스크롤 맨 아래로 내려서 붙여 넣어주면 됩니다.

.index_toc a:link{color:000;border:none;}
.index_toc {
  border: 1px solid #cccccc;
  background-color: #F2F4F7;
  font-weight: bold;
  padding: 5px;
}
#toc {padding-left:25px;}
#toc li > ul > li {list-style-type: none;}
#toc li > ul {padding: 5px 0 20px 0;}

이제 준비가 되었습니다. 

 

5. 서식으로 만들어 적용

아래와 같은 코드를 목차가 들어갈 원하는 위치에 붙여넣으면 목차가 생성됩니다.

<ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"><ul>

하지만 매번 이렇게 코드를 넣어주게되면 번거로우므로 서식으로 만들어서 재사용할 수 있습니다.

관리화면에서 "서식관리 > 새 서식 쓰기"를 클릭합니다.

서식 글쓰기 메뉴가 나타나는데, HTML모드를 선택해주고, 아래의 코드를 작성해줍니다. HTML모드에서 바로 완료를 클릭합니다. 기본보기를 하면 가끔 오류가 생길 수 있습니다.

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

이제 새 글을 만들 때 목차를 넣을 부분에 서식을 클릭하고, 방금 만든 목차서식을 선택해주면 

서식이 입력됩니다. 이제부터 [목차] 아래부분에 제목이 자동으로 올라오게 됩니다.

미리보기를 클릭해보면 잘 적용이 된 것을 확인할 수 있습니다.