티스토리 자동 목차 생성 방법

티스토리에서 포스팅 글이 길어지면 스크롤을 내려서 보고 싶은 글이나 단락을 찾아야 하는데 많이 번거롭다. 이런 경우 목차가 있다면 편리한데, 여기엔 HTML 코드를 일일이 찾아서 수정해야 하는 번거로움이 있고, 또한 HTML이나 CSS 코드가 익숙하지 않다면 결코 쉽지가 않다.

 

 

이번 글에서는 이런 번거로움을 해결하기 위한 방법으로 누구나 따라만 하면 쉽게 이용할 수 있는 티스토리에서 자동 목차 생성하는 방법에 대해 정리한 글을 공유해 보고자 한다.

 

목차

 

1. jquery.toc.zip 파일 다운로드

 

먼저 다음의 jquery.toc.zip 파일을 다운로드한 후 해당 zip 파일의 압축을 풀어준다.

 

jquery.toc.zip

0.00MB

 

압축을 풀면 javaScript형식의 두 파일이 보인다.

jquery.toc.js

 

2. 티스토리 스킨편집 - 파일업로드 

 

다운 받은 이 두 파일을 스킨에 업로드 해야 한다. 블로그 관리홈 페이지의 꾸미기 - 스킨편집 들어가서 파일업로드를 선택해서 두 파일을 업로드한 후 적용을 클릭 한다.

 

 

실제 사용은 두 스크립트 중 하나를 선택하면 되는데 속도면에서는 jquery.toc.min.js가 빠르기에 이 파일의 사용을 추천한다. 이 파일을 선택 하기 위해서는 다음 3번에서 다룰 HTML 코드에서 선택이 가능하다.

jquery.toc.min.js

 

3. HTML 코드 편집

 

이 두 파일을 계정 관리 페이지의 꾸미기 - 스킨편집 들어가서 HTML 편집 - HTML을 선택해서 소스코드를 두 군데 추가해 줘야 한다.

스킨편집

HTML편집

 

1.  js 파일 로딩 코드 </HEAD> 바로 윗부분에  코드 추가

</HEAD> 바로 윗부분에 다음의 js파일을 로딩하는 스크립트 코드를 추가해 준다. 이 글에서는 2번에서 언급한 'jquery.toc.min.js' 스크립트를 적용해 본다.

...

    <!-- jquery toc 자동목차 js파일 로딩코드 시작 -->
	<script src="./images/jquery.toc.min.js" ></script>
    <!-- jquery toc 자동목차 js파일 로딩코드 끝 -->
</head>

 

자동목차-js파일-로딩코드

 

2. 실행 코드 </Body> 바로 윗부분에 코드 추가

위 로딩된 js파일을 실제로 실행하는 코드는 다음의 </BODY> 바로 윗부분에 추가해 준다.

<!-- jquery TOC 자동목차 Script 시작 -->
<script>
 $(document).ready(function() {
  var $toc = $("#toc");
  $toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3"});
 });
</script>
<!-- jquery TOC 자동목차 Script 끝 -->

 

자동목차-실행코드

두 코드 추가가 완료되었다면 '적용'을 누르고 CSS 편집 부분으로 이동한다.

 

4. CSS 코드 편집

 

CSS 편집으로 와서 다음의 CSS 코드를 맨 아래 부분에 추가해 준다.

 

/* TOC 자동목차 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: none;}
#toc li > ul {padding: 0px 0 0px 0;}

/* TOC 자동목차 CSS 코드 끝*/

 

CSS

 

5. 서식으로 만들어서 자동목차 사용하기

 

이제는 만들어진 자동코드 스크립트를 포스팅할 때 서식으로 불러와서 사용하면 된다. 이를 위해서는 다음 코드가 추가된 서식을 만들어야 한다.

 

블로그 홈 관리 페이지로 와서 서식 관리 - 서식 쓰기로 들어간 후, 기본모드를 HTML모드로 변경 후 다음의 HTML코드를 추가한다.

 

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

 

자동목차

추가가 되었으면 완료를 클릭하여 서식을 저장한다.

 

 

6. 자동목차 확인 방법

 

마지막으로 자동목차가 정상적으로 적용이 되었는지를 확인해 봐야 한다. 확인을 위해 먼저 글쓰기로 다음처럼 H2와 H3태그가 각각 적용이 된 제목1, 제목2를 아래와 같이 본문에 써 보자.

 

그리고 위 5번에서 만들어 둔 자동목차 서식을 불러와 본다. 서식을 불러오면 다음 그림상의 빨간 테두리의 '목차'라는 키워드가 새로 생성된 것이 보인다.

 

자동목차-테스트

 

그리고 '미리 보기'를 클릭해 보면 다음과 같이 목차가 자동으로 생성된 것을 확인할 수 있다. 여기까지 확인이 되었다면 이후 포스팅부터 서식으로 자동목차를 불러와서 사용하면 유용하게 사용이 가능하다. 

 

자동목차-테스트

이 블로그의 다른 글 보기

파이썬-마크다운 텍스트 파일 HTML 변환 코드 작성

파이썬-마크다운 텍스트 파일 HTML 변환 코드 작성