티스토리 블로그 목차 자동 생성

구글 SEO에 맞추어 블로그 포스팅 글에 자동으로 목차가 생성되도록 업데이트를 해보았습니다.

자동목차 기능은 많은 블로그에서 포스팅된 자료이며, 다양한 방법이 있습니다.

그 중 글 쓰기에도 가장 편하고 티스토리 본래기능처럼 동작하는 코드를 발견하여 적용을 하다가 잘못된 코드가 섞여있어 동작하지 않음을 발견하고 이렇게 포스팅하게 되었습니다.

 

그 해당 블로그에는 댓글기능이 막혀있어서 아쉽게도 피드백하지 못했습니다.

 

 

 

파일 추가

스킨편집에 들어간 후 jquery.toc.min.js, jquery.toc.js 파일을 추가합니다.

jquery.toc.zip

0.00MB

 

HTML 코드 수정

아래 첨부된 TXT 파일을 확인 후 스킨 편집에 들어간 후 코드를 추가합니다.

 

 

올리뷰_자동목차_코드.txt

0.00MB

 

헤더수정

</head> 바로 윗줄에 아래 코드를 추가합니다.

head html code

 

 

바디수정

<bady>에서 "샵샵_article_rep_desc_ 샵샵 "를 찾은 후 바로 윗줄에 아래코드를 추가합니다.

bady html code

 

 

 </bady> 바로 윗줄에 아래 코드를 추가합니다.

bady under html code

 

CSS 코드 수정

목차가 이쁘게 보이도록 CSS 맨 아랫줄에 아래 코드를 추가합니다.

css html code

 

포스팅쓰기

목차 자동생성은 h2, h3, h4 태그를 읽어들어 생성합니다.

 

티블로그는

• 제목1 이 h2입니다.
• 제목2 는 h3입니다.
• 제목3 은 h4입니다.

 

본 포스팅은 위 코드로 자동 목차 가 생성되었습니다.

자동목차 완성

 

다시한번 말씀드지만, 인터넷에 있는 잘못된 코드를 발견하여 피드백 하려고 했으나, 해당 포스팅의 댓글 기능이 막혀있어서 부득이하게 코드를 수정하여 포스팅하게되었습니다.

 

감사합니다.