블로그스팟에 에 자동 목차를 넣는 가장 간단한 방법을 개선했습니다. - 구글 블로그 꾸미기 17

가젯 추가를 활용한 자동목차 넣는 방법

가젯을 활용한 자동 목차

html 수정없이 가장 간단하게 자동목차를 구현할 수 있는 방법을 기존에 포스팅 했습니다.

구글 블로그 꾸미기 2 - 블로그스팟에 에 자동 목차를 넣는 가장 간단한 방법 (레이아웃에 가젯 추가로 간단하게 꾸미기)

저도 위의 가젯을 직접 제 구글 블로그에 삽입하고 활용해왔었죠.
그런데 어느 순간에서인가부터 불만이 생겼습니다.
로딩 속도가 느리다. 라는 불만이었습니다.기존에 공유 드렸던 코드는 이랬습니다.

가젯 추가로 구현하는 자동 목차 코드 (클릭하여 상자 열기)

window.addEventListener("load", function () {

const content = document.querySelector(".post-body, .entry-content");

const postTitle = document.querySelector(".post-title, .entry-title");

if (!content || !postTitle) return;

const headings = content.querySelectorAll("h2, h3");

if (headings.length === 0) return;

const wrapper = document.createElement("div");

wrapper.style.border = "1px solid #ddd";

wrapper.style.borderRadius = "8px";

wrapper.style.padding = "1em";

wrapper.style.marginBottom = "2em";

wrapper.style.backgroundColor = "#f9f9f9";

wrapper.style.fontSize = "14px";

const tocTitle = document.createElement("div");

tocTitle.textContent = "목차";

tocTitle.style.fontWeight = "bold";

tocTitle.style.marginBottom = "0.5em";

tocTitle.style.fontSize = "16px";

wrapper.appendChild(tocTitle);

const tocList = document.createElement("ul");

tocList.style.listStyle = "none";

tocList.style.padding = "0";

tocList.style.margin = "0";

let h2Index = 0;

let h3Index = 0;

headings.forEach((heading, index) => {

const id = `toc-${index}`;

heading.setAttribute("id", id);

// scroll-margin-top으로 헤더와 겹치지 않게 처리

heading.style.scrollMarginTop = "100px";

const li = document.createElement("li");

li.style.marginBottom = "0.5em";

const link = document.createElement("a");

link.setAttribute("href", `#${id}`);

link.style.textDecoration = "none";

link.style.color = "#333";

const text = heading.textContent.trim().replace(/\s+/g, ' ');

if (heading.tagName === "H2") {

h2Index++;

h3Index = 0;

link.textContent = `${h2Index}. ${text}`;

li.style.marginLeft = "0";

} else if (heading.tagName === "H3") {

h3Index++;

link.textContent = `${h2Index}.${h3Index} ${text}`;

li.style.marginLeft = "3em";

link.style.fontSize = "13px";

}

li.appendChild(link);

tocList.appendChild(li);

});

wrapper.appendChild(tocList);

// 제목 다음이 아닌 본문 최상단에 목차 삽입

content.insertBefore(wrapper, content.firstChild);

});

</script>

이 가젯의 속도를 개선 했습니다.
이제는 포스팅 된 글을 클릭하면 바로 바로 목차가 디스플레이 됩니다.

가젯 추가로 구현하는 자동 목차 코드 - 속도 개선 (클릭하여 상자 열기)

document.addEventListener("DOMContentLoaded", function () {