티스토리 블로그 목차 만들기

Computer

티스토리 블로그 목차 만들기

Enhold 2019. 12. 15. 14:16

티스토리 블로그 글에 목차(Table of Contents) 만드는 법

- 티스토리 블로그 글에 목차만들기 (jquery.toc)

- Table of Contents 자바스크립트 적용

[목차]

test

test2

test3

"jquery.toc" Download

jquery.toc 다운 : https://ndabas.github.io/toc/

Table of Contents jQuery Plugin — jquery.toc

Table of Contents jQuery Plugin A minimal, tiny jQuery plugin that will generate a table of contents, using semantic, nested lists with hash-link anchors to headings. Download Version 0.4.0 · GitHub Project Live Example Table of contents, auto-generated fr

ndabas.github.io

github 저장소로 들어가 Download를 클릭

js파일 Upload

jquery.toc 불러오기

블로그의 모든 글에서 다운받은 js파일을 적용하기 위해, 홈페이지 HTML 문서 <head>에 아래의 아래의 스크립트를 입력합하고 적용을 클릭합니다.

<script type="text/javascript" src="./images/jquery.toc.min.js"></script>

.toc {

list-style-type: none;
background: #f9f9f9 none repeat scroll 0 0;
border: 1px solid #999999;
display: table;
font-size: 100%;
margin: 10px;
padding: 15px;
width: auto;

}

.toc ul {

list-style-type: none;

}

.toc > ul {

list-style-type: none;

}

.toc > ul > ul {

list-style-type: none;

}

.toc > ul > ul > ul {

list-style-type: none;

}

글에 목차 삽입하기

글쓰기 페이지에서 기본모드를 HTML 모드로 바꿉니다.

<ul class="toc" data-toc="div.content" data-toc-headings="h3,h4,h5" style="list-style-type:none"></ul>

작성한 글에 원하는 곳에 위에 코드 입력, 그 위치에 목차가 생김니다.

리스트 만들기 하단 그림과 같이 입력된 <div class="class> ~~~</div> 이 사이에 <h3>, <h4>,<h5>입력 글이 자동으로 목차 리스트로 만들어 짐니다.

* 목차 디자인 바꾸실려면 CSS편집하시면 됩니다. 참고는 상단 링크 사이트에서 참고 하세요

'Computer' 카테고리의 다른 글

국내 업체 기술블로그 모음(2019.12.27 수정) (0)	2019.12.22
해외 업체 기술블로그 모음 (0)	2019.12.22
[Programming Language] Kivy (0)	2019.12.11
윈도우10 우클릭시 여기서 명령창/파워쉘 열기 (0)	2019.12.07
[WIndos/os] 노트북(Notebook) 모델확인(Model name) (0)	2018.08.26

현재글티스토리 블로그 목차 만들기

T.E. 201