심플한 티스토리 자동 목차 스크립트 (자바스크립트 & CSS)

이 티스토리 블로그의 스킨을 티스토리의 공식 스킨 중 하나인 Odyssey로 변경한 후에 목차를 추가하지 않고 있었습니다. 기존에 만들어진 목차 스크립트를 활용하면 되지만 jQuery로 만들어진 것이 많아서 저는 자바스크립트로 허접하지만 심플한 목차 스크립트를 만들어 추가했습니다.

심플한 티스토리 자동 목차 스크립트

 별다른 기능은 없고 H2 태그가 2개 이상이면 목차를 첫 번째 H2 태그 위에 표시하도록 만들었습니다. 그리고 목차 항목에는 H2, H3, H4만 고려하도록 했습니다.

코드도 단순하여 사이트에 속도에도 영향을 거의 안 미치는 것 같습니다. 심플한 목차를 원하는 경우 이런 목차도 괜찮지 않을까 생각됩니다. 

제가 만든 허접하지만 심플한 목차 스크립트입니다.😁😁😁

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');

    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;
            anchor.href = '#' + headingId;
            anchor.innerText = sectionNumber + ' ' + heading.innerText;

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

            heading.id = headingId;
        });
        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 {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
}

#toc-label {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
}

#table-of-contents ul {
    list-style: none;
    padding: 0;
}

#table-of-contents ul li {
    margin-bottom: 5px;
}

#table-of-contents ul li.toc-h3 {
    margin-left: 10px; /* Adjust as needed for h3 items */
}

#table-of-contents ul li.toc-h4 {
    margin-left: 20px; /* Adjust as needed for h4 items */
}

목차 스크립트에 클릭 시 부드럽게 이동하도록 하는 함수가 추가되어 코드가 조금 더 길어졌습니다.😄😄

자바스크립트 코드는 티스토리의 HTML 편집 페이지에서 HTML 탭의 맨 하단에 있는 [**</body>**] 태그 바로 위에 추가하도록 합니다.

CSS 코드는 CSS 탭의 하단에 추가하시면 됩니다.

상기 JavaScript와 CSS 코드를 워드프레스에도 사용할 수 있습니다. 워드프레스에는 Easy TOC와 같은 훌륭한 무료 목차 플러그인이 있지만, 사이트 속도에 약간의 영향을 미칠 수 있습니다.

이 티스토리 블로그와 함께 워드프레스 블로그 중 하나에도 적용해 보았습니다. 예시:

모든 링크를 현재 창에서 열기 (애드센스 수익 증대) - 워드프레스

보다 구조화되도록 목차를 만들고 싶다면 상기 코드를 가지고 조금 복잡하게 수정하시면 될 것입니다.

외부 TOC 스크립트를 로드하여 구현하고 싶은 경우 다음 글에서 소개하는 방법을 응용할 수 있습니다.

https://avada.tistory.com/1784

티스토리 자동 목차: 블로그의 모든 글에 자동으로 목차 표시하는 방법

모바일웹에서 목차가 표시되지 않는 문제

모바일웹에서 목차가 표시되지 않는 경우에는 꾸미기 » 모바일에서 티스토리 모바일웹 자동 연결을 "사용하지 않습니다"를 선택하여 비활성화시기 바랍니다.

응용: 워드프레스에 적용하기

이 글에서 소개한 JS 스크립트를 워드프레스 사이트에도 적용해 보았습니다. 워드프레스에는 훌륭한 TOC(목차) 플러그인이 몇 가지 있지만, 플러그인을 사용하다 보면 아무래도 사이트에 약간의 영향을 미칠 수 있습니다. 이 스크립트가 적용된 워드프레스 블로그 글을 여기에서 확인할 수 있습니다.

참고

https://avada.tistory.com/3240

워드프레스를 티스토리 블로그처럼 쉽게 운영하는 방법

https://avada.tistory.com/3220

티스토리에서 강제 팝업 배너 노출을 규제하네요