목차
이번 블로그 포스팅에서는 티스토리에서 목차를 자동으로 생성하는 방법에 대해서 알아보려고 합니다.
티스토리에서 목차 자동으로 생성하는 방법
티스토리에서는 HTML을 직접적으로 수정 할 수 있도록 제공합니다. 이를 통해서 자동으로 목차를 만들 수 있는 `JQuery` 라는것을 통해 아주 손쉽게 자동으로 목차를 만들어 보려고합니다.
해당 글만 잘 따라하시면 아주 손쉽게 자동으로 만드는 목차를 만들 수 있으니 잘 따라오시길 바랍니다.😚
최종 목표 모습
저희가 글을 작성할때 헤드(본문 제목)이라고 불리는것을 지정해줍니다.
이 헤드를 지정한것들이 자동으로 목차에 삽입되는 모습이 최정적인 저희들이 이 글을 통해서 만들어 갈 모습입니다!
한번 이렇게 셋팅해 놓으면 앞으로 글을 작성할때 목차를 작성하지 않고 자동으로 만들어 줄 수 있으니 얼마나 편한가요 ㅎㅎ
밑의 사진은 `서식`을 통해서 자동으로 넣어주는 과정에 대해서 올린것입니다.
준비 조건
- 마우스와 키보드
- 그림을 보고 따라할 수 있는 수준의 컴퓨터 지식
- 티스토리에서 목차를 자동으로 생성하고 싶다는 열망, 의지와 궁금증
자 본격적으로 시작합니다!
1. JQuery 플러그인 ToC 다운받기
저희가 사용하는 기술은 `JQuery`라는 것을 사용합니다. JQuery는 웹페이지에서 동적으로 움직이게 도와줄 수 있는 툴이라고 생각하시면 됩니다. 아래의 링크는 Jquery 목차 자동 생성을 만든 공식 사이트입니다. 아래 링크를 통해서 직접 JQuery를 다운로드 받으실 수 있습니다.
https://ndabas.github.io/toc/#Live_Example
제가 글을 쓰고있을때는 현재 버전이 0.4.0인데 혹시나 미래에 해당 링크가 없어졌거나, 버전이 바뀌었을 것을 대비하여 제가 현재 0.4.0 버전 기준으로 글을 작성하니 파일을 올리도록 하겠습니다.
이 파일을 다운로드 잘 받으셨으면 다음 단계로 넘어갑니다~!
시작이 반이라고 거의 다왔습니다. 조금만 더 힘내세요!
2. 티스토리 목차 자동 생성 JQuery 스크립트 업로드 하기
첫 시작글에서 말씀드린것 처럼 티스토리는 직접적으로 HTML을 수정하고 관리할 수 있도록 열어놓았습니다. 저희는 방금전에 다운로드 받은 티스토리 목자 자동 생성 JQuery를 저희들의 티스토리에 직접적으로 삽입 하는 방법에 대해서 알아볼것입니다.
스킨 편집 메뉴
먼저, 티스토리에서 HTML을 관리 할 수 있는 페이지에 접속합니다. 현재 2023년 6월의 기준으로는 꾸미기-> 스킨 편집 메뉴에서 할 수 있습니다.
HTML 편집
스킨 편집 메뉴에 들어가면 밑의 사진과 같이 `html 편집`이라는 버튼이 있습니다. 해당 버튼을 클릭합니다! 이 HTML 편집을 통해서 저희는 티스토리 블로그에 저희들이 원하는 Script, CSS, HTML등의 웹페이지를 구성하는 것들을 커스텀하게 넣을 수 있습니다. 이것을 잘 활용하면 더 편하고 아주 멋진 블로그를 만들 수 있습니다.
스크립트 파일 업로드
HTML편집 버튼을 클릭하게 되면 아래 사진과 같이 `파일 업로드`라는 버튼이 있습니다. 해당 버튼을 클릭해주세요!
파일 업로드 화면으로 넘어 갔으면, 밑의 `추가` 버튼을 통해서 방금 다운로드 받은 목차 자동 생성 JQuery 스크립트를 업로드 할것입니다!
목차 자동 생성 스크립트 선택
추가 버튼을 클릭하면 파일을 선택할 수 있는 화면이 나오는데, 거기에서 방금전에 목차 자동 생성 Jquery 스크립트를 선택합니다.
이름은 `jquery.toc.min.js`이라는 이름으로 되어있습니다. 여기에서 위의 홈페이지로 다운 받으신분들은 `jquery.toc.js`라는 파일도 보이실 텐데 `jquery.toc.min.js`과의 차이는 압축을 했느냐 안했느냐의 차이밖에 없습니다. 따라서 둘중 아무거나 선택하셔도 상관 없습니다~! 😆
업로드 된 목차 자동 생성 스크립트
사진에서 보듯이 방금 업로드 한 목차 자동 생성 스크립트가 업로드가 완료된 모습을 볼 수 있습니다. ㅎㅎ
이제 업로드가 끝났으므로 50%가 다왔습니다!
3. 목차 자동 생성 스크립트 HTML에 삽입하기
목차 자동 생성 스크립트 파일 주소 복사 하기
저희가 방금 올린 목차 자동 생성 스크립트가 티스토리 내부에 업로드가 되었습니다. 이 파일이 업로드 된 `주소`를 알아야합니다! 이것을 왜 알아야 하냐면, 이제 스크립트를 넣어줄텐데 해당 주소가 필요하기 때문에 주소를 알아야합니다. 따라서 파일 주소를 복사해야하기 위해 화면에서 올린 `images/jquery.toc.min.js`를 우클릭 해주세요! 그러면 주소 복사하기가 나올것입니다. 주소를 복사해주세요!
목차 자동 생성 스크립트의 주소
복사 한 후 보시면 아래와 같은 형식으로 되어있을 것입니다.
밑의 형식을 설명해드리면, `https://tistory1.daumcdn.net/tistory/` 까지 tistory에서 관리하는 주소입니다. 그 이후에 <내 고유 숫자>는 각자의 유저마다 부여된 숫자입니다. 그리고 /skin/images/ 는 저희 목차 자동 생성 스크립트가 올라간 파일의 위치입니다. 마지막으로 /jquery.toc.min.js 가 저희가 올린 파일 이름이 되겠네요!
https://tistory1.daumcdn.net/tistory/<내 고유 숫자>/skin/images/jquery.toc.min.js
여러분들의 고유 숫자가 있을테니, 아무튼 전체를 잘 복사해서 가지고 계시길 바랍니다 ㅎㅎ
복사한 목차 자동 생성 스크립트 HTML에 삽입
이제 복사한 목차 자동 생성 스크립트를 HTML 페이지에 삽입 하려고 합니다!
밑의 사진과 같이 대략 8~9번째 줄에다가 아래의 스크립트를 삽입해주세요!
<script src="위에서 복사한 자동 목차 생성 스크립트 주소"></script>저를 예시로 들면 이러한 모습이 되겠습니다. ㅎㅎ
<script src="https://tistory4.daumcdn.net/tistory/6398980/skin/images/jquery.toc.min.js"></script>
위에 까지 마치셨다면 `적용` 버튼을 클릭해서 저장을 잘 해주시면 됩니다~!
여기까지 따라오셨다면 정말 잘하셨습니다!
이제 80%가 끝났어요! 여기까지가 스크립트 삽입하는 부분이고 이제는 `서식`을 만들것입니다.
4. 목차 자동 생성 스크립트의 서식 만들기
티스토리에서 서식이란 미리 만들어놓은 템플릿을 언제든지 붙여 넣는 방식으로 일정한 형식을 손쉽게 붙여넣을 수 있는 방법을 의미합니다. 따라서 저희가 목차 자동 생성 스크립트를 서식으로 만들어 놓으면 언제든지 어느 글에서든지 바로 붙여 넣을 수 있으니 그것이 바로 자동이지요 ㅎㅎ
티스토리에서 서식 만들기
아래 티스토리 관리 페이지에 가보면 콘텐츠 -> 서식관리 라는 메뉴가 있습니다. 그곳을 클릭하면 `서식쓰기`라는 버튼을 통해서 서식을 만들 수 있습니다. 저희가 이 서식을 통해서 목차 자동 생성 서식을 만들겁니다!
서식 만들기 페이지에서 보면 기본모드->HTML 이라는 버튼이 있습니다! 서식에서도 위에서와 한것같이 HTML 형식을 통해서 서식을 만들 수 있는데요~! 저희가 이 HTML을 사용해서 위에서 적용한 목차 자동 생성 스크립트를 사용하여 서식을 만들것입니다 ㅎㅎ
이제 부터는 제가 작성한것을 복사 붙여넣기만 하시면 되니 따라만 해주세요!
목차 자동 생성 서식 HTML 만들기
제가 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: ".contents_style", headings: "h2,h3", top:-90, isBlink: true, blinkColor: "#3669CF"}) }); </script>
</div>
위의 HTML 코드 스크립트를 그대로 복사해서 아래와 같이 붙여넣기 해주세요 ㅎㅎ
그리고 완료 버튼을 누르게 되면 끝입니다!
이렇게 완료하게 된 후 만들어 놓은 서식을 보게되면 밑의 사진과 같이 나오게 됩니다.
정말 수고 많으셨습니다! 이제 적용만 하면 되요 ㅎㅎ
5. 목차 자동 생성 적용하기
이제 만들어 놓은 서식을 사용해서 적용만 하면 됩니다~!
글을 작성할때 사진에서와 같이 더보기-> 서식 을 클릭하게 되면 방금 만들어 놓은 목차 자동 생성 서식을 사용할 수 있게 됩니다 ㅎㅎ
그러면 아래와 같이 글을 작성할때 나오는데요~! 이것이 자동으로 동작하면서 글을 완료하게 되면 목차를 자동으로 슈루룩 만들어 주게 됩니다! ㅎㅎ
이상으로 목차 자동생성 하는 방법에 대해서 소개했습니다.
모두 건강하세요 😄