티스토리 북클럽 스킨 목차 자동 생성 스크립트

티스토리 북클럽 스킨 목차 자동 생성 스크립트

티스토리 북클럽 스킨에서 본문 내용의 제목 태그(h2, h3, h4)를 자동으로 감지하여, 페이지 상단에 목차(TOC)를 생성하는 JavaScript 스크립트입니다.

목차

• 개요
• 코드 분석
• 사용 예제
• 주의사항 및 팁

개요

이 스크립트는 티스토리 북클럽 스킨의 특정 본문 영역(.entry-content > .tt_article_useless_p_margin)을 선택하여, 그 안에 있는 h2, h3, h4 태그를 찾아냅니다. 각 제목 태그에 고유한 ID를 부여하고, 제목 텍스트를 추출하여 동적으로 목차를 생성합니다. 생성된 목차는 본문 내용의 가장 첫 부분에 삽입됩니다.

참고

이 스크립트는 HTML과 CSS를 따로 수정할 필요 없이, 티스토리 스킨의 script.js 파일이나 별도의 JavaScript 파일에 추가하여 사용할 수 있습니다.

코드 분석

제공된 JavaScript 코드를 각 부분별로 자세히 설명합니다.

변수 및 상수 정의

목차 생성에 필요한 변수와 상수를 초기화합니다.

JavaScript

let arr_id = [];
let arr_title = [];
const headers = ['h2', 'h3', 'h4'];
const contentElement = document.querySelector('.entry-content > .tt_article_useless_p_margin');

• arr_id, arr_title: 제목 태그의 ID와 텍스트를 저장할 배열입니다.
• headers: 목차로 만들 HTML 제목 태그를 정의합니다.
• contentElement: 스크립트가 동작할 본문 영역을 선택합니다.

제목 태그 찾기 및 ID 부여

지정된 제목 태그를 찾아서 고유 ID를 부여하고, ID와 제목을 배열에 저장합니다.

JavaScript

headers.forEach(tag => {
    const elements = contentElement.querySelectorAll(tag);
    elements.forEach((element, index) => {
        const newId = ${tag}${index};
        element.id = newId;
        arr_id.push(newId);
        arr_title.push(element.innerText);
    });
});

• forEach: headers 배열을 순회하며 각 제목 태그(h2, h3, h4)를 처리합니다.
• querySelectorAll(tag): 현재 처리 중인 제목 태그를 모두 찾아냅니다.
• element.id = newId: h20, h31 등 고유한 ID를 부여하여 목차 링크가 이동할 기준점을 만듭니다.

목차 HTML 생성 및 삽입

저장된 ID와 제목으로 HTML 목차 리스트를 만들고, 본문 맨 앞에 삽입합니다.

JavaScript

const liItems = arr_id.map((id, index) =>
    `<li><a href="#${id}">${arr_title[index]}</a></li>`
).join("");
const tocList = <ul class="list_box_de">${liItems}</ul>;
contentElement.insertAdjacentHTML('afterbegin', tocList);

• map, join: arr_id 배열을 순회하며 <li><a> 형태의 HTML 문자열을 생성하고, 이를 합쳐 하나의 문자열로 만듭니다.
• insertAdjacentHTML('afterbegin', ...): contentElement의 시작 부분에 생성된 목차 HTML을 삽입합니다.

사용 예제

아래 코드를 티스토리 스킨 편집기의 HTML 탭 맨 아래 <script> 태그 내부에 붙여넣으면 됩니다. 이 스크립트는 페이지 로드 후 자동으로 실행됩니다.

HTML

<!-- 스킨 편집기 </HTML> 바로 앞에 추가 -->
<script>
    window.onload = function() {
        let arr_id = [];
        let arr_title = [];
        const headers = ['h2', 'h3', 'h4'];
        const contentElement = document.querySelector('.entry-content > .tt_article_useless_p_margin');

        if (contentElement) {
            headers.forEach(tag => {
                const elements = contentElement.querySelectorAll(tag);
                elements.forEach((element, index) => {
                    const newId = ${tag}${index};
                    element.id = newId;
                    arr_id.push(newId);
                    arr_title.push(element.innerText);
                });
            });

            const liItems = arr_id.map((id, index) =>
                `<li><a href="#${id}">${arr_title[index]}</a></li>`
            ).join("");

            if (liItems) {
                const tocList = <ul class="list_box_de">${liItems}</ul>;
                contentElement.insertAdjacentHTML('afterbegin', tocList);
            }
        }
    };
</script>

주의사항 및 팁

• CSS 스타일링: 생성된 목차는 <ul class="list_box_de"> 클래스를 가집니다. 스킨 편집기의 CSS 파일에서 이 클래스를 사용하여 목차의 디자인을 자유롭게 꾸밀 수 있습니다.
• 제목 태그 커스터마이징: 목차에 포함하고 싶은 제목 태그가 h2, h3, h4 외에 다른 태그라면, 코드의 const headers = ['h2', 'h3', 'h4']; 부분을 수정하여 사용하세요.
• 본문 영역 변경 시: 티스토리 스킨이 업데이트되어 본문 영역을 나타내는 클래스명이 변경될 경우, document.querySelector('.entry-content > .tt_article_useless_p_margin') 부분을 새로운 클래스명으로 수정해야 합니다.

주의

이 스크립트는 `window.onload`를 통해 문서 전체 로딩이 끝난 후 실행됩니다. 다른 스크립트와 충돌이 발생할 경우, 실행 시점을 조정해야 할 수도 있습니다.