서기록

2023-07-18 화요일 / seogilang

 글에 수동으로 목차를 만들어서 넣는 것은 꽤나 번거로운 일이다.

 하지만 그럼에도 매번 목차를 수동으로 넣고자 한다면 아래의 생성기를 사용하여 그나마 조금은 편하게 수동으로 목차를 만들어서 넣는것이 가능하다.

 (반자동 같은 느낌이랄까???)

 

블로그 수동으로 목차 생성하기

1. 글의 html에 div 태그 추가.

 작성 중인 글의 html 편집 상태에서 목차를 추가하고자 하는 부분에 <div id=”toc”></div> 태그를 추가하자.

 

2. 목차 생성하기.

 태그를 추가했다면 글의 전체 html을 복사한 뒤 [입력 에어리어]에 붙여 넣고 [TOC 생성하기] 버튼을 클릭하면 [출력 에어리어]에 목차가 추가된 글의 html이 생성된다.

 

※ 참고사항

 목차는 <div id=”toc”></div> 부분에 추가되기 때문에 html에는 해당 태그가 반드시 있어야 하며, h2, h3, h4 태그를 기준으로 목차를 만들기 때문에 목차에서 해당 위치로 이동하기 위한 id 값이 추가 된다.

 

사용 스크립트

 해당 페이지를 통해 목차를 만들어도 되지만 필요한 부분이 있다면 아래의 코드를 이용하여 수정 후 자신의 홈페이지나 블로그에 페이지를 만들어서 사용해도 된다.

<textarea id="textInput1" rows="10" style="width:100%"></textarea>
<button id="generateTOC">TOC 생성하기</button>
<textarea id="textInput2" rows="10" style="width:100%"></textarea>

<script>
document.getElementById("generateTOC").addEventListener("click", function () {
    var textArea1 = document.getElementById("textInput1");
    var textArea2 = document.getElementById("textInput2");
    var content = document.createElement("div");
    content.innerHTML = textArea1.value;
    var headings = content.querySelectorAll("h2,h3,h4");

    if (headings.length > 0) {
        var list = document.createElement("ul");
        var counter = { h2: 0, h3: 0, h4: 0 };

        headings.forEach(function (heading) {
            var tagName = heading.tagName.toLowerCase();
            counter[tagName]++;

            var anchor = document.createElement("a");
            var listItem = document.createElement("li");
            var id = tagName + "-title" + counter[tagName];

            // h2, h3, h4 태그에 id를 추가합니다.
            heading.setAttribute("id", id);
            anchor.setAttribute("href", "#" + id);
            anchor.textContent = heading.textContent;

            listItem.appendChild(anchor);

            if (tagName === "h2") {
                list.appendChild(listItem);
            } else if (tagName === "h3") {
                var lastH2 = list.lastElementChild;
                var sublist = lastH2.querySelector("ul");

                if (!sublist) {
                    sublist = document.createElement("ul");
                    lastH2.appendChild(sublist);
                }

                sublist.appendChild(listItem);
            } else if (tagName === "h4") {
                var lastH3 = list.lastElementChild.querySelector("ul").lastElementChild;
                var sublist = lastH3.querySelector("ul");

                if (!sublist) {
                    sublist = document.createElement("ul");
                    lastH3.appendChild(sublist);
                }

                sublist.appendChild(listItem);
            }
        });

        var toc = "<p><b>목차(Contents)</b></p>" + list.outerHTML;

        // content에서 "toc" 인 div를 찾습니다.
        var tocDiv = content.querySelector("#toc");

        // 목차를 tocDiv에 삽입합니다.
        tocDiv.innerHTML = toc;

        // 결과를 textArea2에 설정합니다.
        textArea2.value = content.innerHTML;
    } else {
        alert("h2, h3, h4 요소가 없습니다.");
    }
});
    </script>

 

그 외 내용

– 목차를 넣는 방법은 크게 자바스크립트나 워드프레스의 플러그인 등을 이용하여 자동으로 생성하는 방법과 사용자가 글을 쓰면서 수동으로 직접 넣는 방법이 있다.

 자동으로 목차가 생성되도록 스크립트나 플러그인을 사용한다면 편하다는 장점이 있지만 스크립트 코드로 인하여 페이지 속도에 영향을 줄 수 있다는 단점이 있으며, 수동으로 목차를 생성하면 글을 쓸때마다 목차를 직접 만들어야 하기 때문에 불편하다는 단점이 있지만 스크립트를 페이지 속도에 영향을 주지 않는다는 장점이 있다.

 운영하는 홈페이지나 블로그의 속도가 빠르다면 스크립트를 사용하여 자동으로 목차를 생성해도 무방하며 속도가 그리 빠르지 않다면 수동으로 목차를 만들어서 넣는 것이 좋다.

 

– 목차의 디자인을 하고자 한다면 css에서 #toc에 디자인을 하면 된다.

 아래는 간단히게 만들어본 목차 디자인으로 실제로도 사용중인 디자인이다.

목차 이미지 예시