티스토리 목차 자동 생성 서식

contents

2023.02.19 모바일앱에서는 목차가 생성되지 않음을 확인하였습니다. 모바일웹에서는 정상적으로 목차가 생성됩니다.

2023.04.05 접히지 않는 목차를 생성하는 html 마크업을 추가하였습니다.

목차는 티스토리의 제목1~제목3을 수집하여 순서대로 보여주는 것이다. 목차는 필자의 논리적 글쓰기를 돕고 독자의 글 이해를 돕는다. 티스토리와 같은 줄글 형식의 블로그에서 목차가 너무 길어지면 내용이 늦게 노출되는 불편함이 있다. 따라서 이 포스트에서는 접고 펼 수 있는 목차를 생성하는 방법을 소개한다.

세팅

js 파일 다운

아래의 파일을 다운받는다. h태그로 목차를 만들어주는 플러그인을 축소(minify)한 javascript 파일이다.

jquery.toc.min.js

0.00MB

참고로 티스토리의 제목1, 제목2, 제목3은 각각 h2, h3, h4 태그에 대치된다.

js 파일 업로드

블로그 설정>꾸미기>스킨 편집을 들어가 html 편집을 시작한다.

스킨 편집

파일업로드로 이동하여 맨 아래 [+추가]로 받은 js 파일을 올린다.

업로드한 jquery.toc.min.js을 우클릭하여 링크 주소를 복사해둔다.

파일업로드

html 수정

header 태그 안에 다음과 다음과 같은 스크립트를 넣는다.

<script type="text/javascript" src="{아까 복사해둔 js 파일 링크}"></script>

html 수정

서식 등록

블로그 설정>콘텐츠>서식 관리에서 서식 쓰기를 시작한다.

오른쪽 상단의 HTML 모드로 진입한다.

서식 제목을 입력하고 아래의 코드를 그대로 복사하여 붙여넣고 저장한다.

<div data-ke-type="moreLess" data-text-more="contents" data-text-less="close"><a class="btn-toggle-moreless">더보기</a>
<div class="moreless-content">
<div class="txc-textbox">
<p data-ke-size="size26"><b>contents</b></p>
<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: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#3669CF' } ) }); 
        </script>
</div>
</div>
</div>

서식 html로 작성

+접히지 않는 목차

모바일 환경에서 안보이는 경우가 많아 추가했습니다. 2023.04.05

<div class="txc-textbox">
<p data-ke-size="size26"><b>목차</b></p>
<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: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#3669CF' } ) }); 
        </script>
</div>

---

실행

상단의 툴바를 눌러 만든 서식을 원하는 위치에 넣는다.

툴바>더보기>서식

아래와 같이 서식이 들어갔다.

서식 적용

이 서식은 접은글 안에 목차가 생성되므로 미리보기를 해도 목차를 볼 수 없다.

미리보기 시 목차 볼 수 없음

글을 발행하고 나면 다음과 같이 목차를 눌러 확인할 수 있다.

발행한 포스트

---

참고

https://www.codingfactory.net/12114

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인