블로그스팟 자동 목차 추가하기

블로그스팟 블로그에 글 내용을 한 눈에 잘 보이기 위해서 자동 목차를 추가할 수 있습니다. 또한 제 경우에는 목차를 꽉꽉 채우기 위해서 글을 더 쓰려고 해 블로그 운영에도 조금 도움을 주었습니다. 블로그스팟은 자유도가 보장되는 만큼 인터넷에 돌아다니는 자동 목차 코드도 다양한 편입니다. 저는 그 중 제가 유용하게 사용했었던 블로그스팟용 자동 목차 코드를 소개합니다.

sukerou 자동 목차

[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）([Blogger]목차를 쉽게 자동 생성(바쁜 사람용 코피페 소재))

첫 번째는 スケ郎 씨가 제작한 자동 목차입니다. 이 블로그에서는 사용하고 있지 않지만, 옛날에 제가 사용했던 자동 목차라 여기에 올려 놓습니다. 추가 방법은 어렵지 않고 블로그를 들어가서 번역 기능을 사용해 읽으면 쉽게 따라할 수 있습니다. 다만 저는 이 목차보다는 아래에 있는 목차를 사용하는 걸 권장드리고 싶습니다.

IB-Note 자동 목차

【全見出しタグ対応】高速＆シンプルな自動生成目次([전 제목 태그 대응]고속&심플한 자동 생성 목차)

두 번째는 IB-Note 씨가 제작한 자동 목차입니다. 이 블로그에서도 이 자동 목차를 살짝 개량하여 사용하고 있습니다. 바로 글 위만 봐도 이 목차를 사용하고 있는 것을 볼 수 있습니다. 디자인이 깔끔하고 자바스크립트 양이 적어 빠르게 로딩되는 것이 장점입니ㅏㄷ.

적용하는 방법은 간단합니다. 테마 → HTML 편집으로 들어갑니다. 그리고 이 코드를 </body> 위에 그대로 붙여넣으면 됩니다.

<script>//<![CDATA[
(function(window, document) {
  const selector = document.querySelector('.post-body');
  if (!selector) {
    return
  }

  const toc = document.createElement('details');
  const sum = document.createElement('summary');
  const list = document.createElement('ul');
  toc.id = 'toc';
  toc.open = true;
  sum.className = 'toc-title';
  sum.textContent = '목차';
  list.className = 'toc-container';
  toc.appendChild(sum);
  toc.appendChild(list);

  const headings = selector.querySelectorAll('h2, h3, h4');
  if (headings.length == 0) {
    return
  }
  headings[0].parentNode.insertBefore(toc, headings[0]);
  const order = [];
  const stack = [{level: 1, element: list}];

  headings.forEach((heading) => {
    const level = parseInt(heading.tagName.substring(1))
    order.push(level);
  });

  headings.forEach((heading, i) => {
    const level = parseInt(heading.tagName.substring(1));
    const next = order[i + 1];
    const li = document.createElement('li');
    const a = document.createElement('a');
    const id = 'toc-' + (i + 1);
    const ul = document.createElement('ul');

    a.textContent = heading.textContent;
    a.href = `#${id}`;
    li.appendChild(a);
    if (level < next) {
      li.appendChild(ul);
    }

    heading.id = id;

    let parent;
    do {
      parent = stack.pop();
    } while (parent.level >= level);
    parent.element.appendChild(li);
    stack.push(parent);
    stack.push({level: level, element: ul});
  });
}(window, document));
//]]></script>

그런 다음 CSS도 추가합니다. 블로그스팟 공식 테마를 사용하고 있다면 테마 → 맞춤설정 → 고급 → CSS 추가에 해당 코드를 붙여넣으면 됩니다. 만약 공식 테마가 아니라면 테마 → HTML 편집으로 들어간 후 ]]></b:skin>을 찾습니다. 그 바로 위에 해당 코드를 붙여넣으면 됩니다.

#toc {
  max-width: 500px;
  border: 2px solid rgba(0,0,0,.1);
  margin: 2em auto;
}
.toc-title {
  color: #444;
  padding: .5em 1em;
}
.toc-container {
  padding: 1em !important;
  margin: 0 !important;
}
.toc-container, .toc-container ul {
  counter-reset: ul-counter;
  list-style: none;
}
.toc-container li a {
  display: flex;
  color: #444 !important;
}
.toc-container li a:before {
  counter-increment: ul-counter;
  content: counters(ul-counter,".");
  color: dodgerblue;
  padding-right: .5em;
  white-space: nowrap;
}

이제 목차를 추가할 수 있습니다. 목차를 추가하는 코드는 아래와 같습니다.

<details id="toc" open=""><summary class="toc-title">목차</summary></details>

이 코드를 블로그 글을 쓸 때마다 계속 사용하고 싶다면 템플릿을 만들면 됩니다.

BINUBALL이 작성함

fx-570EX, fx-570ES PLUS 등의 계산기 관련 글들을 주로 올립니다. 블로그스팟으로 블로그를 운영하고 있습니다.