초간단 티스토리 자동 목차 만들기 (심플한 자바스크립트)

티스토리에는 목차 기능이 탑재되어 있지 않기 때문에 외부 TOC 스크립트를 로드하여 수동 또는 자동으로 목차를 삽입하는 경우가 많습니다. 저는 티스토리 블로그에 심플한 자바스크립트와 CSS 코드로 직접 만든 목차(TOC)를 사용하고 있습니다.

초간단 티스토리 자동 목차 만들기

워드프레스에는 다양한 무료 및 유료 목차 플러그인이 있습니다. 이 워드프레스 블로그에는 현재 Fixed TOC라는 유료 목차 플러그인이 사용되고 있습니다.

제 티스토리 블로그에는 심플한 자바스크립트(JavaScript)와 CSS로 된 목차가 적용되어 있습니다.😄

외부 목차 스크립트를 로드하여 커스텀하는 방식을 이용하다 스킨을 오디세이(Odyssey)로 바꾸면서 간단한 목차 스크립트를 만들어 보았습니다.

다음의 자바스크립트와 CSS 코드가 사용되었습니다.

JS 코드:


<script>
document.addEventListener("DOMContentLoaded", function() {
    function smoothScrollTo(element) {
        document.querySelector(element).scrollIntoView({
            behavior: 'smooth'
        });
    }

    var toc = document.createElement('nav');
    toc.id = 'table-of-contents';
    toc.setAttribute('aria-label', 'Table of Contents');
    toc.setAttribute('itemscope', '');
    toc.setAttribute('itemtype', 'http://schema.org/SiteNavigationElement');

    var tocLabel = document.createElement('div');
    tocLabel.id = 'toc-label';
    tocLabel.innerText = '목차';
    toc.appendChild(tocLabel);

    var ul = document.createElement('ul');
    var counter = { h2: 0, h3: 0, h4: 0 };

    var headings = document.querySelectorAll('.contents_style h2, .contents_style h3, .contents_style h4');
    if (headings.length > 1) {
        Array.prototype.forEach.call(headings, function(heading) {
            var headingLevel = heading.tagName.toLowerCase();
            if (headingLevel === 'h2') {
                counter.h2++;
                counter.h3 = 0;
                counter.h4 = 0;
            } else if (headingLevel === 'h3') {
                counter.h3++;
                counter.h4 = 0;
            } else if (headingLevel === 'h4') {
                counter.h4++;
            }

            var sectionNumber = counter.h2 + (counter.h3 ? '.' + counter.h3 : '') + (counter.h4 ? '.' + counter.h4 : '');
            var anchor = document.createElement('a');
            var headingId = 'heading' + sectionNumber.replace(/\./g, '-'); // 점(.)을 하이픈(-)으로 대체
            anchor.href = '#' + headingId;
            anchor.innerText = sectionNumber + ' ' + heading.innerText;
            anchor.setAttribute('itemprop', 'url');

            var li = document.createElement('li');
            if (headingLevel === 'h3') {
                li.classList.add('toc-h3');
            } else if (headingLevel === 'h4') {
                li.classList.add('toc-h4');
            }
            li.setAttribute('itemprop', 'name');
            li.appendChild(anchor);
            ul.appendChild(li);

            heading.id = headingId;
            heading.setAttribute('itemprop', 'name');
        });
        toc.appendChild(ul);

        var firstH2 = document.querySelector('.contents_style h2');
        if (firstH2) {
            firstH2.parentNode.insertBefore(toc, firstH2);
        }
    }

    var tocLinks = document.querySelectorAll('#table-of-contents a');
    tocLinks.forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            var href = this.getAttribute('href');
            smoothScrollTo(href);
        });
    });
});
</script>

CSS 코드:

/* TOC */
#table-of-contents {
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#toc-label {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 22px;
  color: #333;
  position: relative;
  display: inline-block;
    padding-bottom: 5px;
   border-bottom: 4px solid #007bff;
}

#table-of-contents ul {
  list-style: none;
  padding: 0;
  margin-left: 20px;
}

#table-of-contents ul li {
  margin-bottom: 10px;
  position: relative;
}

#table-of-contents ul li a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}

#table-of-contents ul li a:hover {
  color: #007bff;
}

#table-of-contents ul li.toc-h3 {
  margin-left: 15px;
}

#table-of-contents ul li.toc-h4 {
  margin-left: 30px;
}

동일한 코드를 워드프레스 사이트에도 적절히 변경하여 사용하고 있습니다.