자동으로 블로그 목차 만들어주는 소스코드(JQuery)

긴 블로그에 목차가 있으면, 독자들에게는 여러모로 좋은 점이 많이 있는데요.

전체의 글의 요약
원하는 내용으로 이동이 용이

그런데 이런 목차를 수동으로 본문에 집어 넣을 경우 나중에 본문의 내용이 변경되거나 순서가 바뀌게 되면 목차도 같이 바꿔줘야 번거러움이 있습니다. 그래서 목차를 자동으로 만들어 주는 기능은 블로그 웹사이트 운영자에게는 있으면 큰 도움이 되는 기능 중에 하나일 것입니다. 자 그럼 블로그의 목차를 자동으로 생성해 주는 코드를 만들어 보도록 할까요?

1. HTML에 목차 자동 생성 HTML 소스코드 넣기

우선 여러분의 블로그의 구조를 먼저 파악해야합니다. 밑은 우리가 목차를 만들어 볼 블로그의 HTML 구조입니다.

<h1>블로그 제목</h1>
<!-- 목차가 들어갈 태그 -->
<div id="toc"></div>

<article id="toc_content">
   <h2 id="title-1">블로그 문단 제목1</h2>
   <p>블로그 내용.....</p>

   <h2 id="title-2">블로그 문단 제목2</h2>
   <p>블로그 내용.....</p>
   
   <h2 id="title-3">블로그 문단 제목3</h2>
   <p>블로그 내용.....</p>

</article>

위의 구조와 여러분의 블로그의 HTML이 조금 틀릴 수 있습니다만, 중요한 것은 '<div id="toc"></div>'을 목차를 넣고 싶은 위치에 넣고, 블로그 문단의 상위 태그, 즉 여기에서는 '<article>'에 id가 없을 경우에는 id="toc_content"을 추가하고, id가 있을 경우에는 그 id만 기억하고 계시면 됩니다.

2. HTML에 목차 자동 생성 자바스크립트 소스코드 넣기

이제 자바스크립트 코드를 넣도록 하겠는데요, 그 전에 우리가 자동으로 작성할 목차의 HTML을 간단히 확인해보록 하죠.

앞에 있는 블로그의 목차를 작성한다면 밑의 코드처럼 될 것 같습니다.

<nav role='navigation'>
    <h2>목차</h2>
    <ul>
    	<li><a href='#title-1'>블로그 문단 제목1</a></li>
        <li><a href='#title-2'>블로그 문단 제목2</a></li>
        <li><a href='#title-3'>블로그 문단 제목3</a></li>
    </ul>
</nav>

자 그럼 위와 같은 HTML을 작성하는 자바스크립트 코드를 작성해보도록 하겠습니다. JQuery를 블로그에서 사용하다고 가정하고, JQuery로 작성을 할까 합니다.

<script>
    $(function() {
      //목차의 시작 HTML 작성
      var toc ="<nav role='navigation'>" +
               "<h2>목차</h2>" +
               "<ul>";

      var toc_line, title, link;

      //블로그의 제목 태그를 찾아서 제목과 링크 ID를 HTML로 작성
      $("#toc_content h2").each(function() {
        title = $(this).text();
        link = "#" + $(this).attr("id");

        toc_line =
          "<li>" +
            "<a href='" + link + "'>" +
              title +
            "</a>" +
          "</li>";

        toc += toc_line;

      });
		
      //목차의 닫는 HTML 태그 작성
      toc +=
         "</ul>" +
        "</nav>";
        
      //작성한 HTML을 목차태그에 추가
      $("#toc").html(toc);
    });
</script>

위의 코드 중에서 블로그의 제목 태그를 찾는 부분을 주목해볼 필요가 있습니다. 여러분의 블로그 HTML이 앞에서 제가 예를 들은 구조와 틀린 경우에는 이 부분을 다음과 같이 수정해주어야 합니다.

"#toc_content h2"에서 "#toc_content"는 블로그 문단의 상위 태그에 있는 ID 인데요, 이 ID가 여러분의 블로그에서 사용되는 ID와 틀린경우 여러분의 ID로 변경해주셔야 합니다.
그리고 <h2>는 블로그의 제목에 사용되는 태그인데 여러분의 블로그 HTML에는 h2가 아닌 경우에는 여러분의 태그로 변경을 해주시면 됩니다.

3. CSS에 목차 자동 생성 소스코드 넣기

마지막으로 CSS 스타일 소스코드를 넣으면 됩니다. 밑의 코드에서 여러분의 블로그에 맞게 위치나 색깔을 바꿔주시면 되겠네요.

#toc {
  float: right;          /*오른쪽에 목차 보여주기*/
  width: 40%;            /*목차 좌우폭*/
  background: #eee;      /*목차 배경색*/
  padding: 2em;
  margin: 0 0 0.5em 0.5em;
}
#toc h2 {
  margin-top: 0;
}
#toc ul {
  padding: 0 0 0 1em;
}
#toc li {
  margin: 0 0 0.25em 0;
}
#toc a {
  text-decoration: none;
  color:#333              /*목차 글자색*/
}
#toc a:hover,
#toc a:active {
  text-decoration: underline;
}