티스토리 블로그에 자동으로 목차를 만들어주는 서식 추가하기(차례 생성하기)

 

 

블로그를 만들 때 검색이 잘 되게 하기 위해서 SEO(Search Engine Optimization : 검색 엔진 최적화)가 중요합니다.

여러가지 조건이 있지만 구글에서는 필요한 키워드를 정리하고 링크로 연결할 것을 추천합니다.

오늘은 말머리에 목차를 달고 링크를 자동으로 형성되게 만들겠습니다.

 

 

1. 외부 스크립트 파일 추가하기

 

이미 블로그에 목차를 달아주는 공개된 파일이 존재합니다.

아래의 파일은 다른 장소에서도 받을 수도 있습니다.

이 걸 사용하면 서식을 변경할 수도 있고 옵션이 많습니다.

압축파일인데 jquery.toc.js를 메인으로 사용합니다.

jquery.toc.zip

0.00MB

 

하지만 저는 직접 작성한 파일을 사용하여 목차를 만들려고 합니다.

딱히 대단한 것은 없고 제가 사용할 서식과 기능을 조금 모아둔 것 뿐입니다.

설명을 달아 두었는데 메모장으로 열어보면 소스를 확인할 수 있습니다.

 

mm01_toc.js

0.00MB

 

위의 파일 중 마음에 드는 것을 받아서 사용합니다.

아래 있는 방식으로 둘다 작동해야 합니다.

 

 

2. 외부 스크립트를 내 블로그에 추가하기

 

① 스킨편집으로 들어갑니다.

 

블로그에 로그인하면 [블로그 관리] - [왼쪽의 사이드바] - [스킨 편집]으로 들어갑니다.

그런 후 오른쪽에 "html 편집"을 눌러서 들어갑니다.

초보자 분들도 겁먹지 말고 순서대로 따라가면 쉽게 되니까 천천히 해보세요.

 

html 편집으로 들어가기

 

② 파일을 업로드 합니다

 

오른쪽에 매뉴에서 파일업로드를 선택하고, 파일을 추가합니다.

원하는 파일을 추가했다면 리스트에서 오른쪽 클릭 후에 "링크 주소 복사"를 합니다.

이 링크를 확인합니다.

 

파일을 추가합니다

 

이제 블로그에 html에 만들어둔 소스가 추가되었습니다.

 

 

3. 서식 만들어 소스 불러오기

 

① 서식 쓰기에 들어가기

 

다시 블로그로 돌아와서 [블로그 관리] - [왼쪽의 사이드바] - [서식관리]에 들어갑니다.

오른쪽을 보면 서식쓰기를 클릭해서 추가를 할 수 있습니다.

 

서식 쓰기로 들어가기

 

 

② 링크를 입력합니다.

 

모드를 HTML로 변경하고 아래 코드를 입력한 후에 완료를 누릅니다.

코드는 심플합니다.

 

<script src="https://tistory1.daumcdn.net/tistory/5969337/skin/images/mm01_toc.js"></script>

 

링크 주소 입력하기

 

 

 

4. 이제 본문에 적용합니다.

 

티스토리의 글쓰기 상단에 ... 을 누르면 서식을 부를 수 있습니다.

여기서 만들어둔 서식을 불러낼 수 있습니다.

 

 

 

---

제가 만든 파일이라 글자체나 내용이 제 취향으로 만들어 졌습니다.

하지만 링크는 잘 동작하는 것을 볼 수 있습니다.

만들어 두었으니 편리하게 계속 사용하려고 합니다.

 

목차 만들기 결과