블로그스팟 본문 시작지점 목차 추가하기 - 블로소득(Blogger)

최근에 소개해드린 Fiksioner v4 테마의 경우 본문에 목차가 없습니다.

사실 목차가 SEO에 좋은 것은 아니지만, 검색자를 위한 약간의 배려라고 할까요..

대부분의 테마에 있는 기능이라 그런지 없으면 뭔가 섭섭한 느낌입니다.

블로그스팟 본문 시작지점 목차 추가하기

아주 간단한 코드를 추가해서 블로그스팟 본문에 목차를 추가해보도록 하겠습니다.

이 목차는 기본적으로 접혀있는 형태이고, H2와 H3 소제목만 반영되도록 만들었습니다.

목차 코드를 추가하면 이렇게 본문 시작 전에 Contents 라는 목록이 표시됩니다. 버튼 같이 보이기도 하는데 Contents 글자를 누르거나 🔽 화살표 아래를 눌러도 목록이 펼쳐집니다.

이렇게 목차를 클릭하게 되면 펼쳐지면서 H2, H3 소제목이 모두 보여지게 됩니다. 뿐만아니라 목차의 글자를 클릭하게 되면 해당 부분으로 이동하는 기능도 포함되어 있습니다.

블로그스팟 목차 코드

우선 아래의 블로그스팟 목차 코드를 전체 복사합니다.

<script>
//<![CDATA[
function insertTOC() {
// 목차를 삽입할 위치 찾기
var postBody = document.querySelector('.post-body');
if (!postBody) return; // 포스트 본문이 없으면 종료

// 목차 컨테이너 생성
var toc = document.createElement('div');
toc.className = 'toc';
toc.innerHTML = '<div class="toc-header"><b>목차</b><span class="toc-toggle">▼</span></div><div class="toc-content"><ul></ul></div>';

// 헤딩 요소 찾기
var headings = postBody.querySelectorAll('h2, h3, h4');
var tocList = toc.querySelector('ul');

// 목차 항목 생성
headings.forEach(function(heading, index) {
var anchor = 'toc-' + index;
heading.id = anchor;
var li = document.createElement('li');
var a = document.createElement('a');
a.textContent = heading.textContent;
a.href = '#' + anchor;
if (heading.tagName === 'H3') li.style.marginLeft = '20px';
if (heading.tagName === 'H4') li.style.marginLeft = '40px';
li.appendChild(a);
tocList.appendChild(li);
});

// 목차 토글 기능
var tocHeader = toc.querySelector('.toc-header');
var tocToggle = toc.querySelector('.toc-toggle');
var tocContent = toc.querySelector('.toc-content');
tocHeader.addEventListener('click', function() {
tocContent.style.display = tocContent.style.display === 'none' ? 'block' : 'none';
tocToggle.textContent = tocContent.style.display === 'none' ? '▼' : '▲';
});

// 초기 상태 설정
tocContent.style.display = 'none';
tocToggle.textContent = '▼';

// 목차 삽입
postBody.insertBefore(toc, postBody.firstChild);
}

// 페이지 로드 완료 후 실행
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', insertTOC);
} else {
insertTOC();
}
//]]>
</script>

<style>
.toc {
background-color: #f8f9fa;
border: 1px solid #d3d3d3;
border-radius: 8px;
padding: 10px 13px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.6;
}
.toc-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
}
.toc h2 {
margin: 0;
font-size: 18px;
}
.toc-toggle {
font-size: 16px;
}
.toc ul {
list-style-type: none;
padding-left: 0;
margin: 10px 0 0;
}
.toc ul li {
margin-bottom: 5px;
}
.toc a {
text-decoration: none;
color: #0645ad;
}
.toc a:hover {
text-decoration: underline;
}
</style>

복사한 후에 블로그스팟 테마 메뉴로 들어갑니다. 거기서 HTML 편집을 누릅니다.

컨트롤+F키를 눌러 검색창에서 </head>를 찾습니다. 

</head>를 찾았다면 위 코드를 </head> 앞에 붙여넣기 합니다.

붙여넣기 했다면 오른쪽 상단의 저장(💾) 버튼을 클릭하고, 메인화면 돌아옵니다. 그리고 왼쪽 아래의 블로그 보기 버튼을 클릭하여 정상적으로 목차가 나오는지 확인하시면 됩니다.