티스토리 목차 자동 생성 방법(간단하고 깔끔하게)

티스토리에 목차를 자동생성하는 방법을 깔끔하게 알려드리겠습니다.

1번 제목

2번 제목

3번 제목

 

요렇게 치고 발행을 누르시면 아래와 같이 목차가 생성됩니다.

그럼 알려드리겠습니다.

 

 

---

CSS와 JavaScript를 활용한 자동 목차 생성 

글을 작성할때 제목에는 <h2>,<h3>태그를 사용합니다.

예를들어 

1번 제목

2번 제목

3번 제목

으로 넣고 싶으시면  html모드에서 아래와 같이 타이핑 하시면 됩니다.

• <h2>: 1번 제목</h2>
• <h2>: 2번 제목</h2>
• <h3>: 3번 제목</h3>

그리고 다시 기본모드로 바꿔서 나머지 글을 써주시면 됩니다.

 

 

---

스킨편집 html 코드 수정하기

 

스킨 편집모드로 들어가서 </body> 전에 다음과 같이 코드를 적어 넣습니다.

화일은 다운 받으신 후 코드를 붙여 넣으시면 됩니다.

스킨편집 코드.zip

0.00MB

 

<script>
document.addEventListener("DOMContentLoaded", function () {
    var contentArea = document.querySelector(".entry-content, .post-content, .article"); // 본문 영역 선택
    if (!contentArea) return; // 본문이 없으면 실행하지 않음

    var toc = document.createElement("ul");
    toc.id = "toc";
    
    contentArea.querySelectorAll("h2, h3").forEach(function (heading, index) {
        var id = "section" + (index + 1);
        heading.id = id; 

        var li = document.createElement("li");
        var a = document.createElement("a");
        a.href = "#" + id;
        a.textContent = heading.textContent;

        li.appendChild(a);
        toc.appendChild(li);
    });

    var firstHeading = contentArea.querySelector("h2, h3");
    if (firstHeading) {
        firstHeading.parentNode.insertBefore(toc, firstHeading);
    }
});
</script>

---

 

CSS 에 문서스타일 저장

 

그리고 옆에 있는 CSS로 가서 문서스타일을 추가합니다.

 

#toc {
    background: #f8f9fa;
    padding: 10px;
    border: 1px solid #ddd;
    list-style: none;
}

#toc li {
    margin-bottom: 5px;
}

#toc a {
    text-decoration: none;
    color: #007bff;
}

아래에 있는 화일을 다운 받으셔서 코드를 복사하신 후 넣으시면 됩니다.

문서스타일.zip

0.00MB

 

 

---

 

마무리

 

그리고 발행을 누르시면 목차가 생성되는 것을 확인하실 수 있습니다.

글쓰기때는 목차가 생성이 안됩니다.

꼭 발행을 누르셔야 HTML 태그들이 적용되서 목차가 생성됩니다.

감사합니다.