블로그 목록 자동 생성 방법- jQuery TOC와 JS의 장단점 비교

-블로그 자동 목록 생성하는 방법
-자동 목록 생성하는 TOC JS와 JavaScript 비교

블로그 글을 작성할 때 자동으로 글 목록을 생성해주는 기능을 활용하면, 콘텐츠를 구조적으로 쉽게 구성할 수 있어 매우 유용합니다. 특히, 긴 글을 작성할 때 방문자들이 원하는 정보를 빠르게 찾을 수 있도록 돕는 효과적인 방법이죠. 이번 글에서는 두 가지 방법을 소개하려고 합니다.

첫 번째는 jQuery TOC 플러그인을 사용한 자동 글 목록 생성 방법이고, 두 번째는 수동으로 JavaScript를 작성해 글 목록을 만드는 방법입니다. 두 방법을 비교하면서, 각 방법의 장점과 설정 방법에 대해 자세히 알아보겠습니다. 이를 통해 블로그에서 보다 효율적으로 목차를 생성할 수 있을 것입니다.

블로그 목록 자동 생성 방법: jQuery TOC와 JS 활용방법

자동 목록 작성에 많이 사용하는 TOC 와 직접 작성한 JS의 사용방법과 2가지의 코드를 비교하는 시간을 가져 보겠습니다

jQuery TOC JS 로 글목록 자동생성방법

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

jquery.toc.min.js

0.00MB

1. 목록을 자동으로 형성되게 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>

2. 자동으로 형성되는목록 디자인을 위해 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;
}

3. 목록이 자동으로 표시될 위치에 코드를 추가

목록을 표시하기 위한 서식을 추가합니다. 티스토리 설정에서 콘텐츠서식 관리를 클릭한 후, 서식 쓰기를 선택하고 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>

4. 목록 서식을 활용해서 자동 목록 생성하기

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

JavaScript로 목록 자동 생성하기

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

1. 목록을 표시할 위치에 코드 추가하기

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

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

2.목록 디자인을 위한 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;
}

3. 목록을 동적으로 생성하기 위해 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>

4. 웹 페이지를 새로고침 후 자동으로 생성되는 목록을 확인

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

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

티스토리 블로그 스킨 꾸미기 블로그 수정에 유용한 코드와 팁 자료 모음

티스토리 블로그 스킨 꾸미기와 SEO 최적화 자료티스토리 블로그를 더 풍성하게 꾸미는 유용한 코드들티스토리 블로그를 운영하면서 가장 중요한 요소 중 하나는 바로 블로그의 개성과 디자인

everydayhub.tistory.com

자동 목록 생성 TOC 플러그인 과 JavaScript 비교

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

자동 글 목록 생성을 위해 TOC 플러그인 사용 시

장점

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

단점

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

자동 글 목록 생성을 위해 JavaScript 사용시

장점

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

단점

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

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

'SEO' 카테고리의 다른 글

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