Calculator & Recorder

https://fujilogic.blogspot.com/2019/10/auto-toc-with-smooth-scroll.html

Fuji씨의 블로그에서 자동 목차를 만드는 방법을 보고, 제 블로그에도 적용해 봐야겠다고 생각되었습니다. 위의 글을 따라서 코드를 삽입한 다음, 제 맘대로 커스터마이즈하고 나니 이렇게 멋진 자동 목차가 완성되었습니다! (물론 이 글 아래에도 이 같은 목차가 존재할 겁니다)

추가로 이렇게 자동 목차를 생성하고 나니 목차를 채우기 위해 글을 길게 쓰게 되는 좋은 효과도 존재하는 듯 합니다. :)

추가해야 할 코드

아래의 코드를 head 태그 위에 삽입하세요. 다만 body 태그 위에 삽입해도 되는지는 확인하지 않았으나 딱히 문제가 되지 않을 거라 예상됩니다.

<script>
  //<![CDATA[
  //아래의 옵션을 취향따라 변경하세요
  //각 옵션에 관한 설명은 이곳으로 -> (https://www.sukerou.com/2018/10/blogger-table-of-contents-javascript.html)
  var toc_options = {
    target: ["h2", "h3", "h4"],
    autoNumber: true,
    condTargetCount: 3,
    insertPosition: "firstHeadBefore",
    showToc: true,
    width: "100%",
    marginTop: "2em",
    marginBottom: "3em",
    indent: "0",
    postBodySelector: ".widget.Blog"
  };
  //이 아래의 소스는 편집을 권장하지 않습니다
  (function(i){var j=0;document.addEventListener("DOMContentLoaded",function(){var p=document.querySelector(toc_options.postBodySelector);if(p==null||typeof p==="undefined"){reutrn}if(toc_options.target.length==0){return}rootContent=h(toc_options,p);if(rootContent.children.length>=toc_options.condTargetCount){var q=c(rootContent);o(q)}});function h(q,p){var u=q.target.length;var t=function(E,D,w){var z=q.target[E];var x=E<u-1?q.target[E+1]:"";var y="toc_"+(++j);var F=g(z,m(D),E+1,y);w.children.push(F);D.id=y;var A=f(D);if(x==""){return}while(true){if(A==null||typeof A==="undefined"){break}if(b(A)==z){break}if(b(A)==x){t(E+1,A,F)}else{var B=A.getElementsByTagName(x);for(var C=0;C<B.length;C++){t(E+1,B[C],F)}}var A=f(A)}};var r=g("ROOT","",0);var v=p.getElementsByTagName(q.target[0]);for(var s=0;s<v.length;s++){t(0,v[s],r,"")}return r}function c(s){var r=document.createElement("div");r.classList.add("b-toc-container");r.style.marginTop=toc_options.marginTop;r.style.marginBottom=toc_options.marginBottom;if(toc_options.width=="100%"){r.style.display="block"}else{r.style.width=toc_options.width}var q=document.createElement("p");var w=document.createElement("span");var v=document.createElement("span");var u=document.createElement("span");v.classList.add("b-toc-show-wrap");u.classList.add("b-toc-show-wrap");var y=document.createElement("a");w.innerText="목차";v.innerText=" [";u.innerText="]";y.href="javascript:void(0);";q.appendChild(w);q.appendChild(v);q.appendChild(y);q.appendChild(u);var t=function(z){var p=typeof z==="boolean"?z:e(r,"hide");if(p){y.innerText="숨기기";r.classList.remove("hide")}else{y.innerText="표시";r.classList.add("hide")}};y.addEventListener("click",t);t(toc_options.showToc);var x=document.createElement("ul");s.children.forEach(function(z,p){n(x,z,(p+1)+"")});r.appendChild(q);r.appendChild(x);return r}function n(s,u,w){var p=document.createElement("li");var q=document.createElement("a");p.style.paddingLeft=toc_options.indent;q.href="#"+u.id;if(toc_options.autoNumber){var t=document.createElement("span");t.classList.add("toc-number");t.innerText=w}var v=document.createElement("span");v.classList.add("toc-text");v.innerText=u.text;if(toc_options.autoNumber){q.appendChild(t)}q.appendChild(v);p.appendChild(q);s.appendChild(p);if(u.children.length>0){var r=document.createElement("ul");p.appendChild(r);u.children.forEach(function(y,x){n(r,y,w+"-"+(x+1))})}}function o(q){var r=null;var p=document.querySelector(toc_options.postBodySelector);if(toc_options.insertPosition=="firstHeadBefore"||toc_options.insertPosition=="firstHeadAfter"){r=p.querySelector(toc_options.target[0])}else{if(toc_options.insertPosition=="top"){r=p}}if(r==null){return}if(toc_options.insertPosition=="firstHeadBefore"){k(r,q)}else{if(toc_options.insertPosition=="firstHeadAfter"){a(r,q)}else{if(toc_options.insertPosition=="top"){k(r,q)}}}}function g(q,r,p,s){return{tagName:q,text:r,children:[],nestLevel:p,id:s}}function m(p){return p.innerText}function f(p){return p.nextElementSibling}function d(p){return p.previousElementSibling}function b(p){return p.tagName.toLowerCase()}function e(p,q){return p.classList.contains(q)}function l(p){return p.parentNode}function a(q,s){var r=l(q);var p=f(q);if(r!=null&&p!=null){r.insertBefore(s,p)}}function k(p,r){var q=l(p);if(q!=null){q.insertBefore(r,p)}}})(window);
//]]>
</script>
<style type="text/css">
.b-toc-container {
  position: relative;
  background:#fff;
  border:1px solid #eee;
  border-radius:8px;
  display: table;
  padding:1.5em;
  margin-right: auto;
  margin-left: auto;
  box-shadow:10px 10px 15px -10px #aaa;
  width:80%;
}
.b-toc-container p {
  text-align:center;
  margin:0;
  padding:0;
}
.b-toc-container p span:nth-of-type(1) {
  font-weight:bold;
  font-size:1.3em;
  font-family:arial;
  color:#555;
}
.b-toc-container ul {
  list-style-type:none;
  list-style:none;
  margin:0;
  padding:0;
}
.b-toc-container > ul {
  margin:15px 0 0;
}
.b-toc-container.hide > ul {
  display:none;
}
.b-toc-container ul li {
  margin:0;
  padding:0 0 0 10px;
  list-style:none;
  line-height:1.7em;
}
.toc-number {
  font-weight:bold;
  padding-left: 5px;
}
.toc-number:after {
  content:"\002E";
}
.b-toc-container ul li a {
  color:#42a5f5;
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
}
.b-toc-container ul li .toc-number {
  margin:0 5px 0 0;
  white-space: nowrap;
}
.b-toc-container ul li a:hover {
  color: #fff!important;
  text-decoration: none!important;
  background: #6495ed;
}
/*목차 숨김, 표시 버튼*/
.b-toc-container p a {
  display:;/*숨길 경우 none*/
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: .7em;
  color: #111!important;
  line-height: 1.8em;
  text-decoration: none!important;
  padding: 0 5px;
  background: #ddd;
  border-radius: 2px;
  opacity: .8;
}
.b-toc-show-wrap {
  display: none;
}
.b-toc-container p a:hover {
  opacity: 1;
  color: #333!important;
}
</style>
<!--자동 목차 끝-->

사용 방법

Blogger의 HTML 편집 모드로 들어갑니다. h2에는 대제목, h3에는 부제목, h4에는 부제목의 부제목을 달면 됩니다. 목차의 번호는 자동으로 추가해주니 걱정 마세요. 아래는 이용 예시입니다.

<h2>준비하기</h2>
<p>전인 이상의 남는 가슴에 옷을 불어 피고 말이다. 열매를 있는 천하를 공자는 그들의 뭇 원질이 커다란 것이다. 방황하였으며, 것은 천자만홍이 거친 모래뿐일 아니다. 어디 소금이라 속에 이상의 청춘 피가 있는 끓는다. 어디 있음으로써 심장의 있으랴? 속에서 따뜻한 청춘은 위하여서. 천고에 뭇 관현악이며, 이상의 쓸쓸한 가치를 이 청춘이 인생을 있다. 군영과 청춘의 든 가지에 방황하였으며, 때까지 고동을 찾아 바이며, 칼이다. 생명을 것은 이것은 얼마나 심장은 가장 든 불어 것이다. 찾아 소리다.이것은 과실이 것이다.</p>
<h3>부제목</h3>
<p>전인 이상의 남는 가슴에 옷을 불어 피고 말이다. 열매를 있는 천하를 공자는 그들의 뭇 원질이 커다란 것이다. 방황하였으며, 것은 천자만홍이 거친 모래뿐일 아니다. 어디 소금이라 속에 이상의 청춘 피가 있는 끓는다. 어디 있음으로써 심장의 있으랴? 속에서 따뜻한 청춘은 위하여서. 천고에 뭇 관현악이며, 이상의 쓸쓸한 가치를 이 청춘이 인생을 있다. 군영과 청춘의 든 가지에 방황하였으며, 때까지 고동을 찾아 바이며, 칼이다. 생명을 것은 이것은 얼마나 심장은 가장 든 불어 것이다. 찾아 소리다.이것은 과실이 것이다.</p>
<h4>부제목의 부제목</h4>
<p>전인 이상의 남는 가슴에 옷을 불어 피고 말이다. 열매를 있는 천하를 공자는 그들의 뭇 원질이 커다란 것이다. 방황하였으며, 것은 천자만홍이 거친 모래뿐일 아니다. 어디 소금이라 속에 이상의 청춘 피가 있는 끓는다. 어디 있음으로써 심장의 있으랴? 속에서 따뜻한 청춘은 위하여서. 천고에 뭇 관현악이며, 이상의 쓸쓸한 가치를 이 청춘이 인생을 있다. 군영과 청춘의 든 가지에 방황하였으며, 때까지 고동을 찾아 바이며, 칼이다. 생명을 것은 이것은 얼마나 심장은 가장 든 불어 것이다. 찾아 소리다.이것은 과실이 것이다.</p>
<h2>사용하기</h2>
<p>전인 이상의 남는 가슴에 옷을 불어 피고 말이다. 열매를 있는 천하를 공자는 그들의 뭇 원질이 커다란 것이다. 방황하였으며, 것은 천자만홍이 거친 모래뿐일 아니다. 어디 소금이라 속에 이상의 청춘 피가 있는 끓는다. 어디 있음으로써 심장의 있으랴? 속에서 따뜻한 청춘은 위하여서. 천고에 뭇 관현악이며, 이상의 쓸쓸한 가치를 이 청춘이 인생을 있다. 군영과 청춘의 든 가지에 방황하였으며, 때까지 고동을 찾아 바이며, 칼이다. 생명을 것은 이것은 얼마나 심장은 가장 든 불어 것이다. 찾아 소리다.이것은 과실이 것이다.</p>
<h2>끝내기</h2>
<p>전인 이상의 남는 가슴에 옷을 불어 피고 말이다. 열매를 있는 천하를 공자는 그들의 뭇 원질이 커다란 것이다. 방황하였으며, 것은 천자만홍이 거친 모래뿐일 아니다. 어디 소금이라 속에 이상의 청춘 피가 있는 끓는다. 어디 있음으로써 심장의 있으랴? 속에서 따뜻한 청춘은 위하여서. 천고에 뭇 관현악이며, 이상의 쓸쓸한 가치를 이 청춘이 인생을 있다. 군영과 청춘의 든 가지에 방황하였으며, 때까지 고동을 찾아 바이며, 칼이다. 생명을 것은 이것은 얼마나 심장은 가장 든 불어 것이다. 찾아 소리다.이것은 과실이 것이다.</p>

p 태그에는 본문, h2부터 h4에는 제목을 집어넣었습니다.

커스터마이즈하기

제목 바꾸기

코드 중 '목차'라는 글자를 바꿔서 자동 목차의 제목을 바꿀 수 있습니다.

// 바꾸기 전
var y=document.createElement("a");w.innerText="목차";
// 바꾼 후
var y=document.createElement("a");w.innerText="차례";

옵션 바꾸기

옵션을 건드리면 더욱 더 많은 기능을 사용할 수 있습니다. 그 중 target을 바꾸면 자동 목차가 설정되는 태그, 클래스, 아이디를 변경시킬 수 있습니다. 예를 들자면..

// 바꾸기 전
var toc_options = {
    target: ["h2", "h3", "h4"],
    autoNumber: true,
    condTargetCount: 3,
    insertPosition: "firstHeadBefore",
    showToc: true,
    width: "100%",
    marginTop: "2em",
    marginBottom: "3em",
    indent: "0",
    postBodySelector: ".widget.Blog"
};
// 바꾼 후
var toc_options = {
    target: ["h2", "h4", ".title"],
    autoNumber: true,
    condTargetCount: 3,
    insertPosition: "firstHeadBefore",
    showToc: true,
    width: "100%",
    marginTop: "2em",
    marginBottom: "3em",
    indent: "0",
    postBodySelector: ".widget.Blog"
};

이렇게 바꾼다면 h2에 설정된 글은 1, 2, 3…처럼, h4에 설정된 글은 1-1, 1-2, 1-3…처럼, .title에는 1-1-1, 1-1-2, 1-1-3…처럼 번호가 붙게 됩니다.

다음과 같은 소스가 있다고 할 때..

<h2>Hello</h2>
<h2>Hello</h2>
<h4>Hello</h4>
<div class='title'>Hello</div>
<h2>Hello</h2>

자동 목차는 다음과 같이 나오게 될 겁니다.

1. Hello
2. Hello
2-1. Hello
2-1-1. Hello
3. Hello