티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 1- 초보용

티스토리 자동목차 만들기 #1

오늘은 티스토리 블로그에 소제목을 불러오는 TOC(목차) 자동 생성에 대해 알아보겠습니다.

초보들도 쉽게 따라 할 수 있는 자동목차 코드이니 설명대로 하나씩 차근차근 따라 하시면 쉽게 '자동 목차'를 만들 수 있습니다.

1. 티스토리 TOC 자동 목차 #1 설정법

✚

1단계: 목차 스크립트 파일 다운로드 및 업로드

공개 jquery.toc파일 다운로드

티스토리 블로그에 자동으로 글 목차를 만들어 주는 공개소스가 있습니다.

그중 먼저 'jquery.toc.zip'파일을 다운로드 후 압축을 풀고 스킨편집에서 파일을 업로드해줘야 합니다.

1. 아래 링크에서 'jquery.toc.zip'파일을 다운로드하세요.

jquery.toc.zip

0.00MB

2. 다운로드 후 압축을 풀면 아래와 같이 2개의 파일이 있습니다.

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

jquery.toc파일 업로드

다운로드한 2개의 파일을 티스토리 스킨에 업로드합니다.

1. '블로그관리 > ①스킨편집 > ②html편집 > ③파일업로드 > ④추가'로 진입 후 2개의 js파일을 업로드합니다.

2. 압축을 푼 폴더를 찾아은 뒤 jquery.toc.js와 jquery.toc.min.js 파일을 업로드합니다.

3. 업로드 한 2개 파일 중 jquery.toc.js 파일을 클릭 후 오른쪽 마우스를 누르고 링크 주소 복사하여 메모장에 저장해 둡니다.

※ 이 링크 주소는 마지막에 서식으로 목차를 만들 때 필요하며 서식을 만들 때 주소를 복사하셔도 무방합니다.

2단계: HTML에 스크립트 삽입

1. 스킨 편집의 'HTML 탭'을 클릭 후 아래의 코드를 복사 후 </head> 바로 위에 아래 코드를 추가합니다.

<!-- 목차-1 -->
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
<!-- 목차-1 끝 -->

2. </head> 윗부분에 코드를 넣은 후 저장을 눌러 저장을 해줍니다.

3단계: 서식을 이용한 목차 만들기

서식을 사용하는 이유는 서식으로 미리 목차 코드를 만들어 놓은 뒤 글 쓸 때마다 편하게 불러와 원하는 위치에 목차를 넣어주기 위함입니다.

1. 아래 코드를 복사 후 서식 쓰기로 갑니다.

<script type="text/javascript" src="메모장에 적어 놓은 images/jquery.toc.js 링크 주소"></script>
<p data-ke-size="size18"><b>목차</b></p>
<ul id="toc"></ul>
<script type="text/javascript"> $(function(){ $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } ) }); </script>

코드를 보시면 제목 코드인 "h2, h3, h4"가 있습니다.

이 부분은 목차에 보이는 소제목들의 순서입니다. h2 대제목 아래 h3 소제목이 나열되고 그 아래 h4 제목이 나열되는 형식이니 목차에 보여줄 필요가 없는 부분은 삭제하셔도 됩니다.

제 경우는 H3 소제목만 목차에 사용합니다.

2. 서식을 이용하려면 '블로그 관리 홈 > 서식 관리자 > 서식 쓰기'로 들어갑니다.

3. HTML 모드로 바꿔주시고 아래와 같이 복사한 코드를 넣어서 서식을 만들어주세요.

※ 이때 메모장에 저장해 둔 jquery.toc.js의 링크 주소를 아래 표시된 곳에 넣어줍니다.

4. 코드를 넣은 후 기본모드로 돌아오면 아래처럼 보입니다. 여기서 완료를 눌러서 저장합니다.

5. 여기까지 하셨다면 기본적인 목차 만들기는 완료되었으며, 이제는 원하는 위치에 서식을 사용하여 목차를 넣어 주시면 됩니다.

728x90

2. 서식 사용법

✚

글에서 목차를 넣어줄 부분을 선택 후 우측 상단의 서식을 눌러 저장된 서식을 불러오면 됩니다.

1. '①더보기 > ②서식 > ③만들어둔 서식' 순으로 원하는 위치에 넣어주세요.

3. 목차 예제

✚

예제1 : 서식의 코드 중 headings: "h2,h3,h4" 모두 사용한 경우

<script type="text/javascript" src="메모장에 적어 놓은 images/jquery.toc.js 링크 주소"></script>
<p data-ke-size="size18"><b>목차</b></p>
<ul id="toc"></ul>
<script type="text/javascript"> $(function(){ $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } ) }); </script>

예제2 : 서식의 코드 중 headings: "h3" 만 사용한 경우

<script type="text/javascript" src="메모장에 적어 놓은 images/jquery.toc.js 링크 주소"></script>
<p data-ke-size="size18"><b>목차</b></p>
<ul id="toc"></ul>
<script type="text/javascript"> $(function(){ $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h3" , top: -90, isBlink : true, blinkColor : '#21B9DE' } ) }); </script>