<div id="readability-page-1" class="page">





<del id="measuring" aria-hidden="true">
<span><span></span></span>
</del>
<del id="gpu-support" aria-hidden="true">
<span></span>
<span></span>
</del>
<nav id="global-navigation">


</nav>
<main id="wrap" aria-hidden="false">



<div>






	
<header id="global-header">



<div>
<h2 aria-level="1" aria-live="polite">티스토리 블로그에 TOC 추가하기</h2>
<ul>
<li aria-level="2" role="text" aria-label="2021년 09월 30일 03시 12분에 작성된 글.">2021.09.30 03:12</li>
<li><a href="/category/Web" aria-label="Web">Web</a></li>
</ul>
</div>

<del aria-hidden="true"></del>
</header>
<article id="article" aria-level="3" aria-live="polite">



<div>            <p data-ke-size="size16">마크다운으로 글을 작성하다보면 글이 계층화되어진다. 제목의 크기로 계층을 확인할 수 있지만, 좀 더 가시적으로 보여줄 무언가가 필요했고, TOC를 적용하기로 결정했다.</p>
<h2>TOC란?</h2>
<p data-ke-size="size16">TOC는 목차(<b>T</b>able <b>O</b>f <b>C</b>ontent)라는 뜻으로 웹 문서에서는 헤더 태그들을 모아서 계증화하여 보여주고, 클릭 시 해당 헤더 태그로 자동으로 이동해주는 역할을 하는 부분을 뜻한다. TOC를 아주 잘 사용한 사이트로는 나무위키가 있겠다. 나무위키는 설명하고자하는 내용이 계층화되어 있어서 이를 자동으로 목차화해준다. 그리고 위에 언급한 것처럼 클릭시 해당 헤더 태그로 이동하게 된다.</p>
<figure data-origin-width="999" data-origin-height="880" data-ke-mobilestyle="widthOrigin"><span data-url="https://blog.kakaocdn.net/dn/IDCM2/btrgjF8TKns/tK328XRk0JOkC8AXDcl1f0/img.png" data-lightbox="lightbox" data-alt="쿠키런: 킹덤 나무위키 목차"><img src="https://blog.kakaocdn.net/dn/IDCM2/btrgjF8TKns/tK328XRk0JOkC8AXDcl1f0/img.png" data-origin-width="999" data-origin-height="880" data-ke-mobilestyle="widthOrigin"></span><figcaption>쿠키런: 킹덤 나무위키 목차</figcaption></figure>
<h2>TOC 적용하기</h2>
<blockquote data-ke-style="style1">
<p data-ke-size="size16">아래 소개할 적용 방식은 프라치노 공간 스킨으로 진행한 내용으로, 본인의 스킨에 따라 다르게 적용해야할 수 있습니다.</p>
</blockquote>
<h2 data-ke-size="size26">Tocbot</h2>
<p data-ke-size="size16">TOC 관련 스크립트를 모두 짜는 건 어렵기 때문에 <a href="https://tscanlin.github.io/tocbot/">Tocbot</a>이라는 npm 라이브러리를 이용한다.</p>
<h3 data-ke-size="size23">Tocbot 스크립트, CSS 가져오기</h3>
<p data-ke-size="size16">우선 Tocbot의 라이브러리 스크립트와 CSS를 가져오는 코드를 head 태그 안에 넣어준다.</p>
<pre><code>&lt;!-- tocbot --&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css"&gt;
&lt;!-- tocbot --&gt;</code></pre>
<h3 data-ke-size="size23">TOC가 들어갈 위치 정하기</h3>
<p data-ke-size="size16">CSS에서 상대위치를 사용하기 때문에 티스토리 글의 본문이 시작하는 부분에 TOC가 들어가는 것이 제일 좋다. 본문이 시작하는 부분은 티스토리 스킨마다 다른데 s_permalink_article_rep 라는 태그를 모두 찾아서 해당 태그 안의 첫번째 위치에 다음 태그를 넣었다. 제대로 안된다면 넣은 태그를 하나씩 지워가면서 확인해보자.</p>
<pre data-ke-language="html"><code>&lt;div class='toc'&gt;&lt;/div&gt;</code></pre>
<figure data-origin-width="540" data-origin-height="88" data-ke-mobilestyle="widthOrigin"><span data-url="https://blog.kakaocdn.net/dn/Efgiz/btrgqGkx2gD/ilOEyR5dOmpd2TzeUA0uK0/img.png" data-lightbox="lightbox" data-alt="TOC의 위치"><img src="https://blog.kakaocdn.net/dn/Efgiz/btrgqGkx2gD/ilOEyR5dOmpd2TzeUA0uK0/img.png" data-origin-width="540" data-origin-height="88" data-ke-mobilestyle="widthOrigin"></span><figcaption>TOC의 위치</figcaption></figure>
<p data-ke-size="size16">태그는 꼭 여는 태그와 닫는 태그 둘 다 작성해야한다. 다음과 같이 썼을 때는 원하는 대로 나오지 않는 오류가 발생했다.</p>
<pre data-ke-language="html"><code>&lt;div class='toc'/&gt;</code></pre>
<h3 data-ke-size="size23">TOC 스크립트</h3>
<p data-ke-size="size16">body 태그 안의 마지막에 들어가는 Tocbot 스크립트이다. 코드에서 <b>#article</b> 에 해당하는 부분은 article 태그의 <b>class</b> 혹은 <b>id</b>에 따라 달라지기 때문에 티스토리 스킨의 article 태그에 맞게 수정해서 사용해야한다.</p>
<pre data-ke-language="html"><code>&lt;script&gt;
  var content = document.querySelector('#article')
  var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
  var headingMap = {}

  Array.prototype.forEach.call(headings, function (heading) {
      var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
                 .split(' ').join('-').replace(/[\!\@\#\$\%\^\&amp;\*:]/ig, '')
      headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
      if (headingMap[id]) {
        heading.id = id + '-' + headingMap[id]
      } else {
        heading.id = id
      }
    })

  tocbot.init({
    tocSelector: '.toc',
    contentSelector: '#article',
    headingSelector:'h1, h2, h3',
    hasInnerContainers: false
  });

  $(document).ready(function(){
            $('.toc').addClass('toc-absolute');
            var toc_top = $('.toc').offset().top - 165;
            $(window).scroll(function() {
                if ($(this).scrollTop() &gt;= toc_top) {
                    $('.toc').addClass('toc-fixed');
                    $('.toc').removeClass('toc-absolute');
                } else {
                    $('.toc').addClass('toc-absolute');
                    $('.toc').removeClass('toc-fixed');
                }
            });
        });
&lt;/script&gt;</code></pre>
<h3 data-ke-size="size23">TOC 스타일링</h3>
<p data-ke-size="size16">Tocbot의 스타일링을 위해 CSS도 추가해주자. 다른 스킨과 달리 프라치노 공간은 전체 화면을 덮는 커버를 가지고 있어서 <b>.toc-absolute</b> 부분을 수정해야했다. TOC의 가로 위치는 <b>.toc</b>의 right 값을 수정하면 된다.</p>
<pre><code>/* tocbot */
.toc-absolute {
  position: absolute;
  margin-top: calc(100vh + 165px);
}

.toc-fixed {
  position: fixed;
  top: 165px;
}

.toc {
  right: calc((100% - 850px) / 2 - 500px);
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
}

.toc-list {
  margin-top: 10px !important;
  font-size: 0.9em;
}

.toc &gt; .toc-list li {
  margin-bottom: 10px;
}

.toc &gt; .toc-list li:last-child {
  margin-bottom: 0;
}

.toc &gt; .toc-list li a {
  text-decoration: none;
}</code></pre>
<h2>참고자료</h2>
<ul data-ke-list-type="disc">
<li><a href="https://dailyheumsi.tistory.com/135?category=800540">https://dailyheumsi.tistory.com/135?category=800540</a></li>
<li><a href="https://pwnbit.kr/89">https://pwnbit.kr/89</a></li>
</ul>            </div>
</article>



<hr>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>






















</div>

</main>

<nav id="pagination">

</nav>












	            
            
            
                        
                                
        
</div>

빠리의 택시 운전사

마크다운으로 글을 작성하다보면 글이 계층화되어진다. 제목의 크기로 계층을 확인할 수 있지만, 좀 더 가시적으로 보여줄 무언가가 필요했고, TOC를 적용하기로 결정했다.
TOC란?
TOC는 목차(Table Of Content)라는 뜻으로 웹 문서에서는 헤더 태그들을 모아서 계증화하여 보여주고, 클릭 시 해당 헤더 태그로 자동으로 이동해주는 역할을 하는 부분을 뜻한다. TOC를 아주 잘 사용한 사이트로는 나무위키가 있겠다. 나무위키는 설명하고자하는 내용이 계층화되어 있어서 이를 자동으로 목차화해준다. 그리고 위에 언급한 것처럼 클릭시 해당 헤더 태그로 이동하게 된다.
TOC 적용하기
아래 소개할 적용 방식은 프라치노 공간 스킨으로 진행한 내용으로, 본인의 스킨에 따라 다르게 적용해야할 수 있습니다.
Tocbot
TOC 관련 스크립트를 모두 짜는 건 어렵기 때문에 Tocbot이라는 npm 라이브러리를 이용한다.
Tocbot 스크립트, CSS 가져오기
우선 Tocbot의 라이브러리 스크립트와 CSS를 가져오는 코드를 head 태그 안에 넣어준다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">

TOC가 들어갈 위치 정하기
CSS에서 상대위치를 사용하기 때문에 티스토리 글의 본문이 시작하는 부분에 TOC가 들어가는 것이 제일 좋다. 본문이 시작하는 부분은 티스토리 스킨마다 다른데 s_permalink_article_rep 라는 태그를 모두 찾아서 해당 태그 안의 첫번째 위치에 다음 태그를 넣었다. 제대로 안된다면 넣은 태그를 하나씩 지워가면서 확인해보자.
<div class='toc'></div>
태그는 꼭 여는 태그와 닫는 태그 둘 다 작성해야한다. 다음과 같이 썼을 때는 원하는 대로 나오지 않는 오류가 발생했다.
<div class='toc'/>
TOC 스크립트
body 태그 안의 마지막에 들어가는 Tocbot 스크립트이다. 코드에서 #article 에 해당하는 부분은 article 태그의 class 혹은 id에 따라 달라지기 때문에 티스토리 스킨의 article 태그에 맞게 수정해서 사용해야한다.
<script>
  var content = document.querySelector('#article')
  var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
  var headingMap = {}
  Array.prototype.forEach.call(headings, function (heading) {
      var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
                 .split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*:]/ig, '')
      headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
      if (headingMap[id]) {
        heading.id = id + '-' + headingMap[id]
      } else {
        heading.id = id
      }
    })
  tocbot.init({
    tocSelector: '.toc',
    contentSelector: '#article',
    headingSelector:'h1, h2, h3',
    hasInnerContainers: false
  });
  $(document).ready(function(){
            $('.toc').addClass('toc-absolute');
            var toc_top = $('.toc').offset().top - 165;
            $(window).scroll(function() {
                if ($(this).scrollTop() >= toc_top) {
                    $('.toc').addClass('toc-fixed');
                    $('.toc').removeClass('toc-absolute');
                } else {
                    $('.toc').addClass('toc-absolute');
                    $('.toc').removeClass('toc-fixed');
                }
            });
        });
</script>
TOC 스타일링
Tocbot의 스타일링을 위해 CSS도 추가해주자. 다른 스킨과 달리 프라치노 공간은 전체 화면을 덮는 커버를 가지고 있어서 .toc-absolute 부분을 수정해야했다. TOC의 가로 위치는 .toc의 right 값을 수정하면 된다.
/* tocbot */
.toc-absolute {
  position: absolute;
  margin-top: calc(100vh + 165px);
}
.toc-fixed {
  position: fixed;
  top: 165px;
}
.toc {
  right: calc((100% - 850px) / 2 - 500px);
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
}
.toc-list {
  margin-top: 10px !important;
  font-size: 0.9em;
}
.toc > .toc-list li {
  margin-bottom: 10px;
}
.toc > .toc-list li:last-child {
  margin-bottom: 0;
}
.toc > .toc-list li a {
  text-decoration: none;
}
참고자료
https://dailyheumsi.tistory.com/135?category=800540
https://pwnbit.kr/89

티스토리 블로그에 TOC 추가하기

댓글