블로그에 자동으로 목차 달기

블로그에 자동으로 목차 달기

블로그에 글을 쓰다보면 무언가를 차례대로 설명하는 글을 쓸 때가 있다. 그것이 짧은 글인 경우에는 별 문제가 없지만 길어지는 경우에는 필요한 부분을 찾아가는 것이 힘들 수 있다. 이럴 때 링크형태의 목차가 있다면 좀 더 편하게 필요한 부분을 찾아서 읽을 수 있다. 그래서 자바스크립트를 이용해서 자동으로 목차를 생성하는 방법을 소개한다.

1. 우선 아래 링크를 통해 목차생성에 필요한 자바스크립트를 다운 받아 놓는다.
목차생성자바스크립트

2. 이제 자바스크립트를 링크 가능한 곳에 올린다.
추천할만한 곳은 Dropbox와 구글코드이다. 만약에 티스토리에 가입되어 있다면 티스토리를 이용하는 것도 좋다. Dropbox를 이용할 경우 블로그 이미지를 dropbox public 폴더에 넣으면 트래픽을 절약할 수 있다 라는 글을 참고하면 되고, 구글코드를 이용하려고 한다면 구글코드에 파일 호스팅 하기를 참조한다. 목차에서 5 자바스크립트 호스팅 하기를 중점적으로 보면 된다.

3. 이제 테마나 스킨을 수정해야 한다. 편집기로 테마나 스킨 파일을 연다.

4. 먼저 다음의 코드를 </head> 앞에 입력한다. (이 때 jquery script는 스킨 전체에서 하나만 로드하도록 한다. 즉 만약에 jquery로 검색해서 다른 곳에서 jquery를 로딩하고 있으면 그것을 삭제한다.)

<!-- jquery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<!-- TOC Generator JS -->
<script src='http://스크립트를 올린 주소/jquery.toc-1.1.4.min.js' type='text/javascript'/>

만약에 스크립트를 템플릿에 직접 삽입하려면 <!-- TOC Generator JS --> 밑의 스크립트 부분을 아래 코드로 대체한다.

<script  
//<![CDATA[
(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("li: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("> li:last > ul").length===0){j.append("<li><ul></ul></li>")}j=j.find("> li:last > ul:first")}if(l===""){j.append("<li>"+k+"</li>")}else{j.append('<li><a href="#'+l+'">'+k+"</a></li>")}}d.fn.toc.defaults={exclude:"h1, h5, h6",context:"",autoId:false,numerate:true}})(jQuery);
//]]>
</script> 

5. 이제 다음의 코드를 </body> 앞에 입력한다.

<!-- TOC Generator -->
<script>
     $('#toc').toc({exclude: 'h1, h2, h6', context: '#entry-content1', autoId: true});
</script>

6. 필요하다면 옵션을 변경할 수 있다.
우선 exclude 뒤에 있는 ‘h1′등은 목차를 만들 때 제외할 제목 태그를 의미한다. 자신의 테마나 스킨에 맞게 조정해주면 된다. 그리고 context에 있는 “#entry-content1″은 목차를 만들 범위를 제한하는데 쓰인다. 여기서는 id값이 entry-content1인 내용에서만 제목 태그를 읽어와서 목차를 만들도록 구성했다. 자신의 테마에 따라 알맞게 바꾸면 된다.

7. 앞에서 목차를 만드는 부분을 id가 “entry-content1″으로 규정했으므로, 본문이 들어간 부분의 id를 “entry-content1″으로 지정해준다. 예를 들어 다음과 같이 수정한다.

<div class="entry-content" id="entry-content1">

8. 이제 CSS를 수정할 차례이다. 아래는 내가 쓰고 있는 CSS의 예이다. 자신의 테마에 맞춰 수정해서 사용하며 된다.

div#toc ul {
    list-style: none;
}

div#toc ul a {
    border-bottom: none !important;
    color:#0000EE;
}

div#toc ul li ul {
    margin-bottom: 0.75em;
    border:none;
}

div#toc ul li ul li ul {
    margin-bottom: 0.25em;
    border:none;
}

.entry-content h3 {
    background-color: #F3F7FF;
    border-bottom: 1px solid #CDCDCD;
    padding-bottom: 0.2em;
    padding-top: 0.1em;
    text-decoration: none !important;
    margin-top: 25px !important;
}

9. 이제 마지막으로, 포스팅할 때 두가지를 해줘야 한다. 우선 목차를 넣을 위치에 html모드로 다음과 같은 코드를 넣어준다.

<div id="toc"></div>

이렇게하면 목차만 나온다. 만약 "차례"라는 말을 넣어주려면 다음과 같은 형태로 코드를 넣어준다.

<b><span style="font-size: large;">차례</span></b>
<div id="toc"></div>

10. 그리고 이 스크립트는 제목 태그를 인식하는 형태로 되어 있으므로 글을 쓸 때 제목 태그를 잘 활용해야 한다. 블로거의 편집기에서는 "제목", "부제목", "소제목"이라는 이름으로 되어 있다. 템플릿에 따라 각각의 제목이 어떤 "hx"태그를 의미하는 지가 달라지므로 확인할 필요가 있다. 그리고 이 때 앞에서 설정한 옵션에서 제외한 제목 태그는 목차로 만들어지지 않음을 유의해야 한다.

11. 이렇게 만들어진 목차의 예를 다음 링크에서 볼 수 있다.
박스넷(Box.net) 소개 – 무료 25GB, 동기화 서비스 추가 프로모션 진행중