• 홈
  • Uncategorized

[자동목차] 목차만들기 과정

가나톡ganaTOK
가나톡ganaTOK

블로그스팟 자동 목차 만들기: 완벽한 가이드

블로그 글의 길이가 길어지면 독자들이 원하는 내용을 쉽게 찾을 수 있도록 돕는 자동 목차가 매우 유용합니다. 이번 가이드에서는 블로그스팟(Blogger)에서 자동 목차를 만드는 방법을 단계별로 자세히 설명하겠습니다. 이 가이드를 따르면, 포스트의 제목과 소제목들을 기반으로 자동으로 목차를 생성할 수 있으며, 이를 세련된 디자인으로 꾸밀 수 있습니다.

1. 블로그스팟 관리자 모드로 이동

먼저, 블로그스팟 관리자 모드로 로그인해야 합니다.

  1. 블로그스팟에 로그인합니다.
  2. 좌측 메뉴에서 **테마(Theme)**를 클릭합니다.
  3. 테마 화면 하단에서 HTML 편집(Edit HTML) 버튼을 클릭합니다.

2. HTML 편집기에서 목차 위치 지정

목차가 삽입될 위치를 지정하기 위해 HTML 코드를 수정해야 합니다.

  1. HTML 편집기가 열리면, 블로그 포스트가 표시되는 <data:post.body/> 태그를 찾습니다.

  2. 이 태그 바로 위에 목차가 표시될 위치를 지정하기 위한 div 요소를 추가합니다. 

  3. 예: html코드

<div id="table-of-contents"></div>
<data:post.body/>
이렇게 하면 목차가 본문 상단에 삽입됩니다.   이말은 <data:post.body/>를 ctrl-f로 찾아서 그위에  <div id="table-of-contents"></div>를 추가하라는 말입니다.  어렵조!!!

3. 세련된 목차를 위한 CSS 코드 추가


목차의 스타일을 지정하기 위해 CSS 코드를 추가합니다.

  1. HTML 편집기 내에서 <head> 태그 안에 다음 CSS 코드를 추가합니다:

<style>
#table-of-contents {
    border: 1px solid #e0e0e0;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #f9f2ec;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    position: relative;
}

#table-of-contents h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-left: 30px;
    position: relative;
}

#table-of-contents h2::before {
    content: "\f0c9";
    font-family: FontAwesome;
    position: absolute;
    left: 10px;
    top: 0;
    font-size: 18px;
}

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

#table-of-contents li {
    margin: 8px 0;
}

#table-of-contents a {
    text-decoration: none;
    color: #0066cc;
    font-weight: normal;
    transition: color 0.3s ease;
}

#table-of-contents a:hover {
    text-decoration: underline;
    color: #004499;
}

#table-of-contents .collapse-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

#table-of-contents.collapsed ul {
    display: none;
}

#table-of-contents.collapsed h2::after {
    content: "\f0d7";
    font-family: FontAwesome;
    position: absolute;
    right: 10px;
}

#table-of-contents h2::after {
    content: "\f0d8";
    font-family: FontAwesome;
    position: absolute;
    right: 10px;
}
</style>

이 CSS 코드는 목차에 부드러운 배경색, 경계선, 글꼴, 패딩, 텍스트 색상, 마우스 오버 시의 스타일링을 추가합니다. 또한 접기/펼치기 아이콘도 포함됩니다.

4. JavaScript 코드 추가


목차를 자동으로 생성하고 접기/펼치기 기능을 구현하기 위해 JavaScript 코드를 추가합니다.

  1. HTML 편집기 내에서 </body> 태그 바로 위에 다음 JavaScript 코드를 추가합니다:

<script>
document.addEventListener("DOMContentLoaded", function() {
    var toc = document.getElementById("table-of-contents");
    if (!toc || toc.querySelector("ul")) return; // 목차가 이미 생성된 경우 추가하지 않음

    // 본문 영역에서만 H1, H2, H3 태그 선택
    var contentArea = document.querySelector(".post-body"); // 본문의 클래스나 ID 지정
    if (!contentArea) return;

    var headers = contentArea.querySelectorAll("h1, h2, h3");
    if (headers.length === 0) return;

    // 목차 타이틀이 없을 경우에만 추가
    if (!toc.querySelector("h2")) {
        var tocTitle = document.createElement("h2");
        tocTitle.textContent = "목차";
        toc.appendChild(tocTitle);
    }

    var ul = document.createElement("ul");

    headers.forEach(function(header, index) {
        // 목차 항목에 중복된 내용이 포함되지 않도록 확인
        if (header.textContent.trim() !== "목차") {
            var li = document.createElement("li");
            var a = document.createElement("a");

            var id = "toc-header-" + index;
            header.id = id;

            a.href = "#" + id;
            a.textContent = header.textContent;
            li.appendChild(a);
            ul.appendChild(li);
        }
    });

    toc.appendChild(ul);

    // Collapse/Expand functionality
    var collapseButton = document.createElement("span");
    collapseButton.className = "collapse-button";
    collapseButton.innerHTML = "&#x25BC;"; // Down arrow symbol
    toc.appendChild(collapseButton);

    collapseButton.addEventListener("click", function() {
        toc.classList.toggle("collapsed");
    });
});
</script>

코드 설명


  • 목차 중복 생성 방지: 이미 목차가 생성된 경우 중복 생성되지 않도록 코드를 구성했습니다.
  • 목차 타이틀 중복 방지: 목차 타이틀이 이미 존재할 경우 추가하지 않도록 조건을 설정했습니다.
  • 본문 내 헤더만 선택: 블로그의 본문 영역 내에서만 h1, h2, h3 태그를 선택해 목차를 생성합니다.
  • 중복 항목 제거: "목차"라는 단어가 헤더로 잡혀서 다시 목차에 추가되지 않도록 필터링했습니다.
  • 접기/펼치기 기능: 목차를 접고 펼칠 수 있는 기능을 추가하여, 목차가 더 깔끔하고 사용하기 쉽게 구현되었습니다.

5. 저장 및 테스트


모든 코드를 추가하고 나면, 저장 버튼을 클릭하여 변경 사항을 저장합니다. 블로그 포스트를 열어 자동 목차가 올바르게 표시되고, 접기/펼치기 기능이 정상적으로 작동하는지 확인합니다.

이제 블로그스팟에서 자동 목차가 성공적으로 작동하며, 세련된 디자인과 더불어 접기/펼치기 기능도 사용할 수 있습니다. 이 가이드를 통해 방문자들이 블로그 글을 더 쉽게 탐색할 수 있게 되었을 것입니다. 목차가 제대로 표시되는지 확인하고, 필요에 따라 스타일과 기능을 추가로 조정할 수 있습니다.  여러분의 성공적인 블로깅을 응원합니다. 언제나 메섹톡이었습니다. 감사합니다.



첨부파일은 

위의 css, 자바스크립트코드입니다.

1)css

https://drive.google.com/file/d/1e83W25VABDKn4xK4fVgAeI2ERzF-rp9d/view?usp=drive_link

2)script

https://drive.google.com/file/d/1flFTMNeDqMunj5iWurXL5tpwF3LaxIFd/view?usp=drive_link