티스토리 Table Of Content (TOC) 만들기

목차

• toc library 다운로드
• HTML 편집
• 서식 작성
• 제목1 테스트1
  • 제목2 테스트1
  • 제목2 테스트2
  • 제목2 테스트3
    • 제목3 테스트1
    • 제목3 테스트2
• 제목1 테스트2

나무위키에 있는 이런거 갖고 싶어서 추가하는 TOC

물론 직접 만들지는 않고 다른사람이 만든 걸 가져다 쓸 예정이다

직접 만드는 건 나중에 블로그 스킨 만들때 고려해봐야지

 

 

toc library 다운로드

https://ndabas.github.io/toc/assets/jquery.toc.zip

다른 사람이 만들어 둔 jquery.toc를 다운로드한 뒤 압축을 해제한다

 

압축을 해제하면 js파일이 두개가 있다

 

이중 jquery.toc.min.js를 블로그 스킨편집의 파일 업로드에서 올려준다

HTML 편집

html 편집에서 아래 코드를 </body>태그 위에 삽입

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

 

서식 작성

블로그 관리 - 콘텐츠 - 서식 관리 - 서식쓰기

아래 코드를 HTML로 삽입

<div class="book-toc">
<p data-ke-size="size16">목차</p>
<ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul>
</div>

 

마지막으로 원하는 글에 서식을 넣어주면 된다

 

 

제목1 테스트1

본문

제목2 테스트1

제목2 테스트2

제목2 테스트3

제목3 테스트1

제목3 테스트2

제목1 테스트2

 

 

꾸미는 건 미래의 나에게 맡긴다

CSS는 너무 어려워...