[블로그 디자인 1.0.3] 글에 목차를 넣어보자

이전 네이버 블로그에서도 긴 글을 작성할 때 목차를 작성하곤 했었습니다.

근데 클릭했을 때 그 위치로 갈 수 있다면 정말로 엄청난 기능이 되지 않을까 하는 생각이 들어서

바로 실행에 옮겼습니다.

 

아미넴님의 '티스토리 글에 자동으로 목차 넣기' 를 참고했습니다.

 

sangminem.tistory.com/307

티스토리 글에 자동으로 목차 넣기

 

목차

 

---

0. 목차 생성

 

가장 먼저 해야 할 일은 jQuery TOC 플러그인을 다운받는 것입니다.

이걸 받아서 넣어놔야 플러그인을 사용해서 목차를 만들 수 있는 것이죠.

플러그인 파일은 아래에 첨부해 놓았습니다.

 

jquery.toc.min.js

0.00MB

 

이걸 받아서 이젠 친숙한 html 편집의 파일 업로드에 들어가서 맨 아래 있는 추가 버튼을 눌러서 파일을 업로드해줍니다.

 

 

이제 플러그인도 넣었으니 html 편집의 html 탭에 들어가서 body 안쪽에다가 스크립트를 넣어줍시다.

저는 제목1, 제목2만 사용할 예정이라 headings 안에 h2와 h3만 넣었습니다.

제목3까지 사용할 생각이시라면 h4까지 넣어주시면 되겠습니다.

 

<!-- 목차 생성 -->
	<script src="./images/jquery.toc.min.js"></script>
	<script>
    	// 목차 생성
    	$(document).ready(function() {
        	$("#toc").toc({content: ".post-content", headings: "h2,h3"});
    	});
	</script>

Ssoco_html서식1.txt

0.00MB

 

 

이번에는 스타일을 적용하기 위해 css 편집으로 갑니다. 그리고 아래 내용을 맨 끝에 붙여넣어줍시다.

자신의 기호에 맞게 여러 속성들을 변경하시면 됩니다!

아래 css코드는 3단계까지 만들어져있지만, 실제 사용은 2단계 까지만 합니다. 위에서 그렇게 짰으니까요!

 

/* 목차 스타일 */
.book-toc {
    position: relative;
    width: fit-content;
    border: 1px solid #b0d197;
    padding: 10px 20px 10px 15px;
    z-index: 1;
}
.book-toc:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #b0d197;
    z-index: -1;
    opacity: 0.1;
}
.book-toc p {
    font-weight: bold;
    font-size: 1em !important;
    color: #396120;
}
#toc * {
    font-size: 15px;
    color: #000;
}
#toc {
    margin-bottom: 0;
    padding-left: 0;
}
#toc a:hover {
    color: #000;
}
#toc ul {
    margin-top: 5px;
    margin-bottom: 0px;
}
#toc > li {
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 3px;
}
#toc > li > a {
    text-decoration:none;
}
#toc > li > ul {
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 0;
    margin-top: 0px;
}
#toc > li > ul > li > a {
    font-size: 1em;
    text-decoration:none;
}
#toc > li > ul > li > ul {
    padding-left: 10px;
    margin-top: 0;
	margin-bottom: 0;
}
#toc > li > ul > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 0;
    margin-top: 3px;
}
#toc > li > ul > li > ul > li > a {
    font-size: 0.875em;
    text-decoration:none;
}

Ssoco_css서식1.txt

0.00MB

 

 

여기서 더 필요하다면 제목 스타일을 따로 지정해서 적용합니다.

이 부분은 앞에서 했었기 때문에 간단하게 언급만 하고 넘어가도록 하겠습니다.

 

 

---

1. 서식 등록 및 사용

 

이전에 서식 등록을 한 적이 있었습니다. 같은 방법으로 환경설정의 콘텐츠 탭의 서식관리로 갑니다.

글쓰기 버튼을 누르고 제목을 작성한 후에 HTML모드로 변경합니다.

그 이후 코드를 작성한 후 저장합니다.

 

<div class="book-toc">
  <p>목차</p>
  <ul id="toc"></ul>
</div>

목차서식.txt

0.00MB

 

이렇게 저장한 서식을 실제로 사용 할 때에는, 글쓰기 상태에서 점 3개 버튼을 눌러서 서식 버튼을 누르면 방금 저장했던 목차 서식이 나옵니다. 이걸 원하는 위치에 불러와서 사용하면 됩니다.

 

▲ 글쓰기 내 서식버튼 위치

 

코드를 옮기고 싶다면 기본모드에서 HTML모드로 바꾸면 기본 상태에선 보이지 않았던 html 코드가 전부 보이므로 드래그 앤 드롭으로 편하게 코드의 위치를 옮길 수 있습니다.

 

글을 모두 작성한 후 완료버튼을 누르면 목차가 잘 뜬 모습을 볼 수 있습니다.

목차 안에 있는 제목을 클릭하면 각 제목의 위치로 이동하게 됩니다.

 

---

이번 포스팅에서는 글에 목차를 달아보았습니다. 맨 처음에 언급했던 아미넴님의 블로그에 목차 관련 글들이 더 많기 때문에 참조하시면 좋을 것 같습니다.

개인적으로 추후 플로팅 목차 고급버전을 적용해 보고 싶은 생각이 있습니다.

 

sangminem.tistory.com/352

티스토리 떠 다니는 플로팅 목차 만드는 방법 (고급 버전)

 

아마도 다음 포스팅은 코드블럭을 예쁘게 만드는 포스팅이 될 것 같습니다.

다음 포스팅에서도 더욱 유익한 자료로 돌아오도록 하겠습니다! 감사합니다 :)