미리보기
어차피 지금글에도 TOC가 적용이 되겠지만 대표 이미지용으로 넣습니다.
일단 TOC를 제공하는 스크립트는 워낙 여러가지가 있으나 선택한 이유를 설명하자니 글이 너무 길어질것 같아 간단하게 정리만 하겠습니다.
js 소스 업로드
티스토리 관리자 화면의 HTML/CSS 편집에서 js 파일을 업로드 해줍니다.
제 경우 1.1.4b를 업로드 했는데 이 부분은 끝에서 설명드리겠습니다.
HTML/CSS 부분 적용하기
head
<script src="./images/jquery.toc-1.1.4.min.js" type="text/javascript"/>
body
head 아래 </body> 윗부분에는 아래와 같이 추가해줍니다.
<!-- TOC Generator -->
<script>$('#toc').toc({exclude: 'h1, h6', context: '#toc-contents', numerate: true, autoId: true});</script>
이 부분은 옵션에 해당하는 부분으로 exclude: h1, h6은 heading1, heading6 부분 제외, 그리고 본문에서 toc-contents id를 찾아서 해당 부분만 TOC 생성, numerate : 넘버링, autoID는 정확히 모르겠네요.
만약 해당 옵션을 주지 않으시면 js 소스에 보면 디폴트로 아래와 같이 적용됩니다.
d.fn.toc.defaults = {
exclude: "h1, h5, h6",
context: "",
autoId: false,
numerate: true
}
CSS
HTML/CSS 에서 CSS에 내용을 추가해줍니다.
CSS는 아래와 같이.. 필요하시면 알아서 수정하시면 됩니다.
div#toc ul {
margin: 0;
}
div#toc ul li ul {
}
div#toc ul li ul li ul {
}
div#toc {
background: #f9f9f9 none repeat scroll 0 0;
border: 1px solid #aaa;
display: table;
font-size: 100%;
margin: 0;
padding: 5px;
width: auto;
}
TOC 사용법
이렇게 코드를 다 적요해 주고 나면 본문에서 TOC를 활성화 시키기 위해서는 2가지 정도 작업이 필요합니다.
해당 내용은 글을 쓸때마다 해줘야 되는 부분으로 귀찮긴 합니다.
본문에 머리말 적용하기
아래 CSS에 보면 제 경우 exclude: "h1, h5, h6",를 선언해 주면서 h2, h3, h4 만 글에서 사용하도록 했습니다.
이게 어떤 말이냐면 글을 쓰실때 왼쪽 위를 보시면 "본문"이라고 적힌 상자를 클릭해서 머리말로 바꿔 주시면 되는데
저는 2,3,4만 사용하니까 머리말2~4까지만 사용하겠다는 겁니다.
Ctrl+1~4의 단축키, 그리고 본문으로 돌아올때는 Ctrl+0의 단축키를 지원하고 있으니 편하게 사용하시길 바랍니다.
본문 처음과 끝에 코드 삽입하기
이제 글 쓸때 글의 첫 부분에 HTML로 아래와 같이 입력하면 적용됩니다.
<div>와 </div> 내에 블로그 글에서 heading 문자를 찾아서 적용되므로 만약 목차가 끊기거나 한다면 </div> 태그가 있는지 확인해 보시면 됩니다.
차후에 글 수정시에나 글에 내용 추가시에도 </div>를 꼭 확인하셔야 합니다.
<div id="toc"><b>Table of Contents</b></div>
<div class="toc-contents" id="toc-contents">
여기에 실제 블로그 글 내용 입력
</div>
추가 작업 부분
추가1. 소스 수정
위와 같이 적용시 소스가 <ul><li> 소스로 구성되어 있어 bullet (글자 앞에 점)이 생겨서 해당 부분을 임의로 <li> 를 <div>로 치환해 bullet 제거하엿습니다. css로 쇼를 했는데 안되서 결국 이렇게 소스 수정했고, 해당 js 소스는 아래와 같습니다.
해당 증상 스샷은 잠깐 보여드리면 아래와 같은데 상관없으시면 그냥 원본 소스로 쓰셔도 됩니다. 아무튼 저는 이렇게 소스 변경을 해서 b로 저장하고 사용했습니다.
<li> 를 bullet 이 적용되지 않게 <div>로 치환한 것 말고는 없습니다.
/*!
* samaxesJS JavaScript Library
* jQuery TOC Plugin v1.1.4
* http://code.google.com/p/samaxesjs/
*
* Copyright (c) 2011 samaxes.com
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
(function (d) {
d.fn.toc = function (j) {
var l = d.extend({}, d.fn.toc.defaults, j);
var n = this.append("<ul></ul>").children("ul");
var m = {
h1: 0,
h2: 0,
h3: 0,
h4: 0,
h5: 0,
h6: 0
};
var h = 0;
var g = {
h1: 0,
h2: 0,
h3: 0,
h4: 0,
h5: 0,
h6: 0
};
for (var k = 1; k <= 6; k++) {
g["h" + k] = (l.exclude.match(new RegExp("h" + k, "i")) === null && d("h" + k).length > 0) ? ++h : 0
}
return this.each(function () {
d(l.context + " :header").not(l.exclude).each(function () {
var p = d(this);
for (var o = 6; o >= 1; o--) {
if (p.is("h" + o)) {
if (l.numerate) {
b(m["h" + o], n);
c(m, "h" + o);
if (l.autoId && !p.attr("id")) {
p.attr("id", a(p.text()))
}
p.text(f(m, "h" + o, p.text()))
}
e(n, g["h" + o], p.attr("id"), p.text())
}
}
})
})
};
function b(h, g) {
if (h === 0 && g.find(":last").length !== 0 && !g.find(":last").is("ul")) {
g.find("div:last").append("<ul></ul>")
}
}
function c(g, h) {
d.each(g, function (j, k) {
if (j === h) {
++g[j]
} else {
if (j > h) {
g[j] = 0
}
}
})
}
function a(g) {
return g.replace(/[ <>#\/\\?&\n]/g, "_")
}
function f(i, j, h) {
var g = "";
d.each(i, function (k, l) {
if (k <= j && i[k] > 0) {
g += i[k] + "."
}
});
return g + " " + h
}
function e(m, g, l, k) {
var j = m;
for (var h = 1; h < g; h++) {
if (j.find("> div:last > ul").length === 0) {
j.append("<div><ul></ul></div>")
}
j = j.find("> div:last > ul:first")
}
if (l === "") {
j.append("<div>" + k + "</div>")
} else {
j.append('<div><a href="#' + l + '">' + k + "</a></div>")
}
}
d.fn.toc.defaults = {
exclude: "h1, h5, h6",
context: "",
autoId: false,
numerate: true
}
})(jQuery);
추가2. CSS 수정
*** 추가2의 소스는 높이 어긋남을 유발하여 소스에서 삭제 했습니다 ***
아래 부분은 현재 블로그에 top bar(navigation bar)가 존재하다보니 TOC에서 클릭해서 이동시 네비게이션 바에 의해 컨텐츠 제목이 가려지게 되면서 아래와 같은 CSS를 추가해 해결하였습니다.
아래 이미지를 보시면 만약 3.1. 다운로드를 클릭해서 이동시 네비게이션 바에 의해 해당 부분이 가려지죠. 그래서 일정 픽셀만큼 덜 이동하도록 css를 수정했습니다.
*[id]:before {
display: block;
content: " ";
margin-top: -80px;
height: 80px;
visibility: hidden;
}
추가3. 네비게이션 바 고정
추가2에서 작업한 부분을 버리고 네비게이션 바를 고정시켜버렸습니다. 추가2 방식으로 하니 다른 박스를 넣을때 위치가 어긋나 버리는 경우가 발생
이 부분은 스킨마다 다를테지만 제 스킨의 경우 네비게이션 바를 고정하려면 position을 fixed 에서 static으로 변경해서 사용중입니다.
.area_head{
position:fixed;
top:0;
left:0;
z-index:10;
width:100%;
height:80px;
border-bottom:1px solid #ebebeb;
background-color:#fff;
background-color:rgba(255,255,255,.95)
}
