2012/11/14

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


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

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, 동기화 서비스 추가 프로모션 진행중

Print Friendly and PDF

댓글 10개 :

  1. 정말 친절하고 상세하게 알려주시네요. 감사합니다 많은 도움이 되었어요.
    근데 제가 하나만 여쭤봐도 될까요 ㅠㅠㅠ
    저는 그냥 기본 탬플릿에 그냥 글 카테고리만 변경하고 싶어요.
    막 아카이브구성이 글 쓴 순서대로 날짜별로 되잖아요. 저는 음악관련 글은 음악카테고리에 넣는 식으로 목록을 만들고 싶은데 어떻게 하는지 알고 계신가요? 알려주시면 감사하겠습니다 ㅎㅎ

    답글삭제
    답글
    1. 죄송하지만 어떤 걸 원하시는지 잘 이해못하겠습니다.
      음악관련글을 음악카테고리에 넣는 것이라면, 음악 레이블을 만든 후 레이블 위젯에서 음악 레이블을 클릭하면 될 것 같은데, 그걸 말씀하시는 게 맞나요?

      삭제
  2. 음...제가 블로그를 시작한지 얼마 안되어서 잘모르겠어요 ㅠㅠ
    html 수정같은 것이 어렵고 아직 전문용어도 익숙치 않네요.

    예를 들면.. 네이버블로그 같은경우 카테고리를 만들어 글을 옮길 수 있잖아요!
    음악관련글이면 음악카테고리에 넣고, 일상글이면 일상카테고리에 넣고...

    날짜별로 나오는 아카이브 말고 깔끔하게 목록별로 만들고 싶어서요...
    우선 제가 페이지를 하나 만들었는데 글을 옮기는 방법도 모르겠고 그러네요.. 흑흑 ㅠㅠ

    답글삭제
    답글
    1. 블로거에는 카테고리 기능은 없고, 레이블 기능만 있습니다. 다른 블로그의 태그와 비슷하지만 카테고리 기능이 없기 때문에 레이블을 카테고리처럼 사용하셔야 합니다.
      글에 레이블을 지정한 후, 레이블 위젯을 사이드바에 넣으시면 레이블 페이지에 접근 가능합니다.
      하지만 레이블 페이지에 접속하면 글이 모두 펼쳐져 보입니다.
      그것이 마음에 들지 않으면 다음 글을 참조해서 바꾸시면 됩니다.
      구글 블로거의 라벨 페이지와 글목록 페이지에 글제목만 나오게 하는 방법

      삭제
    2. 아하 그럼 태그같이 하면 되나요??
      우선 게시글 전체에 다 라벨을 달았습니다. 그리고 나서 어떻게 라벨페이지를 하는지 ㅠㅠ

      레이아웃에 들어가서 페이지를 만들었습니다.
      거기에 글을 어떻게 옮기죠??? 제가 정말 잘 몰라서요..죄송하고 고맙습니다 ㅜㅜ

      삭제
    3. 레이블 위젯을 사이드바에 추가하세요.
      댓글로 더 자세하게 설명드리기는 힘드네요.
      검색해보시는 게 나을 것 같습니다.

      삭제
    4. 네ㅠㅠ 다시 찾아봐야할 것 같아요. 자세히 답변해주셔서 감사하빈다 ^^ !
      혹시 아카이브를 비공개하는 것은 가능한가요??

      삭제
    5. 아! 해결됬네요 . 제가 가젯에 태그가 있는 줄 모르고 ㅠㅠ 답답하셨을텐데 감사합니다.
      올리신 블로거 관련 글도 너무 도움이 되네요 고맙습니다^^~

      삭제
    6. 찾으셨다니 다행입니다. ^^
      그런데 아카이브라 함은 레이블 페이지 말씀하시는 건가요?
      그걸 비공개하는 건 불가능합니다.

      삭제
  3. 안녕하세요 ㅠ.ㅠ 따라하다가 막혀서 이렇게 질문드립니다. 최종적으로 포스팅에 적용하려면 아래와 같은 html코드를 작성해야 되나요? 도저히 마지막에 어떻게 하는지 몰라서 질문드립니다 ㅠ.ㅠ

    코드도 올바르게 넣은 것 같지만, 마지막 목차를 넣으려고 할 때 뭘 해야할지 도저히 감이 안 잡힙니다......

    답글삭제