SEO

[ 자동 글 목록 작성 ] 자동으로 글 목록 작성해주는 TOC 와 JS 사용 방법

by hubman | 최초 발행일: 2024. 10. 24. |

자동 글 목록 작성하는 방법과 비교

블로그 글을 작성할 때 자동으로 글 목록을 작성해주는 코드를 사용하면 편리하고 빠르게 글을 구조화 할수 있습니다. 대부분 자동 글 목록 작성에 많이 사용하는 TOC 와 직접 작성한 JS의 사용방법과 2가지의 코드를 비교하는 시간을 가져 보겠습니다.

자동 글 목록 작성 TOC JS 설치 방법

jQuery TOC JS 다운로드

먼저, 쉽게 글 목록을 작성해주는 jQuery TOC 플러그인 사용방법을 알아보겟습니다. 이 플러그인을 사용하기 위해 필요한 파일을 다운로드해야 합니다. 아래 링크에서 Download 버튼을 클릭하여 jquery.toc.min.js 파일을 다운로드합니다.

jquery.toc.min.js

0.00MB

HTML 설정

다운로드한 파일을 사용하기 위해, 티스토리의 스킨을 수정해야 합니다. 다음 단계에 따라 HTML을 설정합니다.

티스토리 관리 페이지로 이동하여 꾸미기 스킨 편집을 클릭합니다.
HTML 편집 버튼을 클릭한 후, 파일 업로드 메뉴에서 방금 다운로드한 jquery.toc.min.js 파일을 추가합니다.
HTML 메뉴에서 </head> 태그 바로 앞에 다음 코드를 추가합니다:

<script src="./images/jquery.toc.min.js"></script>

</body> 태그 바로 앞에 다음 스크립트를 추가하여 목차 기능을 활성화합니다:

<script>
$(document).ready(function() {
    var $toc = $("#toc");
    $toc.toc({
        content: ".tt_article_useless_p_margin",
        headings: "h2,h3,h4"
    });
});
</script>

CSS 추가

목차의 스타일을 설정하기 위해 CSS를 추가합니다. CSS 메뉴에서 아래 코드를 입력하여 글 제목의 스타일을 지정합니다:

/* 글 제목1,2,3 스타일 */

.index_toc p {
    color: lightslategray;
}
.index_toc {
    color: lightslategray;
    font-weight: bold;
}
#toc {
    padding-left: 25px;
}
#toc li > ul > li {
    list-style: none;
}
#toc li > ul {
    padding: 5px 0 20px 0;
}

서식 추가

목차를 표시하기 위한 서식을 추가합니다. 티스토리 설정에서 콘텐츠 > 서식 관리를 클릭한 후, 서식 쓰기를 선택하고 HTML 모드로 전환합니다. 아래 코드를 추가하고 저장합니다:

<div class="index_toc">
    <p data-ke-size="size16">목차</p>
    <ol id="toc" style="list-style-type: decimal;" data-ke-list-type="decimal"></ol>
</div>

글 작성

글쓰기 버튼을 클릭하여 서식에서 목차 서식을 불러온 후, 제목을 작성하면 자동으로 목차가 생성됩니다.

자동 글 목록 작성 JavaScript

JavaScript를 사용하여 목차를 생성하는 방법을 단계별로 설명합니다.

글 작성 페이지 설정

먼저, 목차를 표시할 위치에 아래 코드를 추가합니다. 이 코드에서는 목차를 담을 div와 ul 요소를 생성합니다.

<div id="toc">
    <ul></ul>
</div>

CSS 스타일 적용

목차의 외관을 꾸미기 위해 아래 CSS 코드 또는 개인의 취향에 맞게 스타일시트에 추가합니다:

#toc {
    background-color: #f9f9f9;
    border: 1px solid #909090;
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
    font-family: 'Noto Sans KR', sans-serif !important;!i;!;
}
#toc li {
    border-radius: 4px;
    transition: background-color 0.3s;
    position: relative;
    font-family: 'Noto Sans KR', sans-serif !important;
}

#toc li a {
    text-decoration: none;
    color: #333;
    /* font-weight: bold; */
    transition: color 0.3s;
    border-bottom: none;
    padding-left: 30px;
}

#toc li a.h1-link {
    font-size: 24px;
    padding-left: 40px;
}

#toc li a.h1-link::before {
    content: "•";
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
}

#toc li a.h2-link {
    font-size: 1.3rem;
    /* padding-left: 40px; */
}

#toc li a.h2-link::before {
    /* content: "•"; */
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
}

#toc li a.h3-link {
    font-size: 1.1rem;
    padding-left: 40px;
}

#toc li a.h3-link::before {
    content: "•";
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
}

#toc li a.h4-link {
    font-size: 1rem;
    padding-left: 60px;
}

#toc li a.h4-link::before {
    content: "•";
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
}

JavaScript 설정

HTML 문서의 <head> 섹션에 다음 JavaScript 코드를 추가하여 목차를 동적으로 생성합니다:

<script>
document.addEventListener("DOMContentLoaded", function() {
    const toc = document.querySelector('#toc ul');
    const toplist = document.querySelector('.toplist');
    const headings = document.querySelectorAll('.tt_article_useless_p_margin.contents_style h2, .tt_article_useless_p_margin.contents_style h3, .tt_article_useless_p_margin.contents_style h4');

    let hasSubheadings = false;

    headings.forEach((heading, index) => {
        if (!heading.id) {
            heading.id = `heading-${index}`;
        }

        if (heading.tagName === 'H2' || heading.tagName === 'H3' || heading.tagName === 'H4') {
            hasSubheadings = true;
        }

        const listItem = document.createElement('li');
        const link = document.createElement('a');
        link.href = `#${heading.id}`;
        link.textContent = heading.textContent;

        if (heading.tagName === 'H2') {
            link.classList.add('h2-link');
        } else if (heading.tagName === 'H3') {
            link.classList.add('h3-link');
        } else if (heading.tagName === 'H4') {
            link.classList.add('h4-link');
        }

        listItem.appendChild(link);
        toc.appendChild(listItem);
    });

    if (!hasSubheadings) {
        toc.style.display = 'none';
        toplist.style.display = 'none';
    }
});
</script>

결과 확인

이제 웹 페이지를 새로고침하면, 설정한 위치에 목차가 생성되고, 제목에 대한 링크가 자동으로 추가됩니다. 사용자는 이 링크를 클릭하여 원하는 제목으로 빠르게 이동할 수 있습니다.

이와 같은 방식으로 Vanilla JavaScript를 사용하여 목차를 생성하면, 추가 라이브러리 없이도 효율적이고 유연하게 콘텐츠를 탐색할 수 있는 기능을 구현할 수 있습니다.

TOC 플러그인 과 JavaScript 비교

이제 TOC 플러그인과 JavaScript를 사용한 목차 생성 방법의 장단점을 비교해보겠습니다.

TOC 플러그인 사용

장점

자동화: 제목이 추가되거나 변경될 때 목차가 자동으로 업데이트됩니다.
유연성: 다양한 제목 레벨을 쉽게 처리하며, 제목의 구조를 유지할 수 있습니다.
스타일링: 외부 CSS를 통해 간편하게 스타일을 변경할 수 있습니다.

단점

의존성: jQuery와 플러그인에 의존하므로, 해당 라이브러리가 필요합니다.
성능: 많은 제목이 있을 경우, 렌더링 성능에 영향을 줄 수 있습니다.

JavaScript로 직접 생성

장점

경량화: 추가 라이브러리 없이 순수 JavaScript로 작성되어 가볍습니다.
제어성: 코드의 모든 부분을 직접 관리할 수 있어 필요한 기능을 쉽게 조정할 수 있습니다.
성능: 간단한 구조에서는 성능이 더 나을 수 있습니다.

단점

유지 관리: 제목이 변경될 때마다 코드 수정을 필요로 하며, 더 많은 수작업이 요구됩니다.
제한적 기능: 복잡한 기능을 구현하려면 추가적인 코드 작성이 필요합니다.

간단한 블로그: 제목이 자주 변경되지 않는 경우나 단순한 블로그라면 Vanilla JavaScript 방법이 더 적합할 수 있습니다.
복잡한 콘텐츠: 제목이 자주 추가되거나 변경되는 경우, jQuery TOC 플러그인을 사용하는 것이 효율적입니다.

728x90

'SEO' 카테고리의 다른 글

[ 검색엔진 최적화 ] 너무 길거나 짧은 Meta Description의 문제 (1)	2024.10.25
검색 최적화 로딩 속도 향상 방법 [ DNS-prefetch ]를 사용 방법 (0)	2024.10.25
HTTP 상태 코드 404,301,200.. 코드등 전체 에러 코드의 종류와 설명 (0)	2024.10.25
[ 애드센스 404 ]사이트 및 에드센스 접속시 404 에러 발생 원인과 해결 방법 (1)	2024.10.24
블로그 꾸미기 제목에 색 넣고 글을 CSS로 개성적있게 글 꾸미기 (0)	2024.10.24
[ 검색엔진 최적화 ] 이미지 최적화 자동 LAZY 속성 추가 방법 (0)	2024.10.24
[ 검색엔진 평가 확인법 ] 내 글의 평가를 확인하는 3가지 방법 (0)	2024.10.22