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

누구나 쉽게 따라 만드는 자동 목차(TOC) #1

오늘은 티스토리 블로그에 소제목을 불러와 목차를 자동으로 나타내는 TOC 자동 목차에 대해 알아보겠습니다.

 

제가 프로그래머도 블로그 고수도 아니기 때문에 그냥 다른 고수들이 올려주신 소스를 무작정 따라 하며 조금씩 수정하는 편입니다,

그러던 중 발견한 저 같은 초보들도 쉽게 따라 할 만한  자동목차 만들기를 공유할까 합니다.

 

설명대로 하나씩 따라 하시면 쉽게 '자동 목차'를 만드실 수 있으니 차근차근 따라 해 보시기 바랍니다.

 

 

목차

 

 

공개 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라는 파일을 클릭 후 오른쪽 마우스를 누르고 링크 주소 복사하여 메모장에 저장해 둡니다.

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

 

728x90

 

HTML 코드 삽입

1. 스킨 편집의 HTML로 이동 후 아래의 코드를  복사해서 </head> 윗부분에 넣어 줍니다.

 

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

 

 

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

 

서식을 이용한 목차 만들기

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

 

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"가 있습니다.

<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 제목이 나열되는 형식이니 목차에 보여줄 필요가 없는 부분은 삭제하셔도 됩니다.

 

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

 

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

 

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

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

 

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

 

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

 

728x90

 

서식 사용법

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

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

 

 

목차 예제

예제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>

 

마무리

이렇게 목록 만들기와 서식 사용법까지 알아봤습니다.

여기까지만 하시면 기본적인 목차는 완성입니다. 이렇게 사용 하시거나 제 포스팅 중 '티스토리 인용구 서식(HTML) 스타일 모음'에서 인용구의 텍스트 부분에 코드를 넣어서 사용하셔도 됩니다

 

또 목차 리스트의 폰트 수정법은 아래 포스팅을 참고하시기 바랍니다.

[˙티스토리 꾸미기] - 티스토리 '리스트' 기능 폰트 사이즈 및 색상 변경하기

티스토리 '리스트' 기능 폰트 사이즈 및 색상 변경하기

---

다만 아직도 글색 등 왠지 조금 어색한 부분들이 있지요!

이런 부분들은 다음 포스팅에서 좀 더 자세히 알아보도록 하겠습니다.

 

 

개인적으로는 '자동목차(TOC) 쉽게 만들기 #2'를 추천 합니다.

 

---

[˙티스토리 꾸미기] - 티스토리 자동목차(TOC) 쉽게 만들기 #2 -초보용

티스토리 자동목차(TOC) 쉽게 만들기 #2 -초보용

[˙티스토리 꾸미기] - 티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 3 - 좌측에 따라 움직이는 자동목차

티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 3 - 좌측에 따라 움직이는 자동목차

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"