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

티스토리 블로그 글에 자동으로 목차를 생성해 주는 방법에 대해서 알아보겠습니다. 목차를 수동으로 작성하려면 이것도 막일이 되는데, 자바스크립트를 이용하여 자동생성하는 방법에 대해서 알아보겠습니다.

목차

목차 자동생성

목차 자동생성 방법은 본문에 있는 글 중 태그로 이루어진 글을 수집해 와서, 순서대로 표시해 주는 것인데, 블로그 글 작성 시 서식을 제대로 지키지 않았다면 목차 자동생성이 곤란하게 되니 서식을 이용하여 블로그 글을 작성하여야 합니다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

글 작성 방법

글을 쓸때 아래와 같이 문단모양을 타입을 정할 수 있는데, 여기서 제목 1~3을 선택하여 글을 작성하면, 자동으로 제목들을 수집해서, 순서대로 보여주는 것입니다. 위 목차도 자동으로 생성된 것입니다.

세팅방법

HTML에 익숙하지 않은 분들은 약간의 어려움이 있을 수도 있지만, 여기서 안내하는 대로 따라 하면, 편하게 목차를 만들 수 있어 글 작성 시 목차를 수동으로 만드는 고생을 하지 않아도 됩니다.

1. js 파일 업로드

jquery.toc.js

0.00MB

위의 파일을 다운로드합니다.

2. 티스토리 관리자 왼쪽메뉴에서 스킨편집 클릭

2-1. 우측의 스킨편집에서 html편집 클릭

2-2. HTML | CSS | 파일업로드에서 파일업로드 클릭

2-3. html 편집 클릭

2-4. 하단에서 +추가를 클릭하고 다운로드한 자바스크립트 파일을 선택하고 파일을 업로드합니다.

2-5. 업로드가 완료되면, 아래 이미지처럼 링크 주소 복사를 클릭하여 js 파일의 주소를 복사합니다.

 

https://tistory3.daumcdn.net/tistory/xxxxxxxx/skin/images/jquery.toc.js
메모장 같은 곳에 붙여 넣기를 하면, 위 형태의 주소로 복사가 됩니다. xxxxxx 부분은 블로그마다 다릅니다.

3. HTML 편집

3-1. HTML | CSS | 파일업로드에서 클릭클릭

위 같이 HTML 편집 화면으로 이동하여, </head> 태그 바로 위에 아래 스크립트를 복사해서, 붙여 넣고 상단의 적용 버튼을 클릭하여 저장합니다.

<script type="text/javascript" src="https://tistory3.daumcdn.net/tistory/xxxxxxx/skin/images/jquery.toc.js"></script>

서식 등록

티스토리 관리 메뉴 중 서식관리를 클릭한 후 서식 쓰기를 클릭합니다.

제목에는 목차 자동생성이라고 적고, 상단에 있는 기본모드를 클릭하여 HTML을 선택합니다.

내용에 아래의 내용을 붙여 넣고

<div class="txc-textbox"> <h2 data-ke-size="size26"><b>목차</b></h2> <ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul> <script type="text/javascript"> $(function(){ $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h1,h3,h4" , top: -90, isBlink : true, blinkColor : '#3669CF' } ) }); </script> </div>

저장하면, 서식 등록이 완료가 됩니다.

목차서식 사용하기

블로그 글에서 목차가 기록될 위치에다 마우스커서를 위치시키고, 위 화면처럼, 더 보기 메뉴에서 서식을 클
글 작성 시는 이상한 코드가 보이지만, 글쓰기 화면 왼쪽 하단 화면에 미리 보기를 클릭해 보면, 목차가 자동생성된 것을 볼 수 있습니다.

 

 

블로그 글작성 시 아래와 같이 제목으로 사용할 부분을 제목으로 지정하여 줍니다.

 

마무리

사실은 본인도 그동안 목차 사용을 하지 않았는데, 자동목차 생성 스크립트를 이용하여 이후 포스팅부터는 목차를 자동으로 생성하여 넣도록 하겠습니다. 지난 포스팅들은 시간 되는대로 하나씩 수정할 계획입니다.