구글 블로거에 글 작성 시 자동으로 목차 생성하는 방법입니다.
테마 html 수정
아래 소스를
블로거 관리화면 테마 -> 맞춤설정 -> HTML편집에서 <head> 와
</head> 사이에 넣어주세요
<!-- 자동목차 시작-->
<script type='text/javascript'>
//<![CDATA[
//*************Table of Content (TOC) plugin by anantvijaysoni.in
function avsTOC() {
var avsTOC = i = headlength = gethead = 0;
var currentH2 = null; // 현재 처리 중인 h2 요소를 저장하기 위한 변수
// h2와 h3 요소 처리
var headings = document.querySelectorAll("#post-toc h2, #post-toc h3"); // h2와 h3 요소 선택
var tocHTML = ""; // 목차의 HTML을 저장할 변수
for (i = 0; i < headings.length; i++) {
gethead = headings[i].textContent;
if (headings[i].tagName === "H2") {
// 새로운 h2 요소를 만난 경우
if (currentH2 !== null) {
tocHTML += "</ul>"; // 이전 h2의 하위 목차 종료
}
currentH2 = headings[i];
currentH2.setAttribute("id", "point" + i);
tocHTML += "<li><a href='#point" + i + "'>" + gethead + "</a><ul>"; // h2 아래에 하위 목차 시작
} else if (headings[i].tagName === "H3" && currentH2 !== null) {
// h3 요소를 만나고, 현재 처리 중인 h2가 존재하는 경우
headings[i].setAttribute("id", "subpoint" + i);
tocHTML += "<li><a href='#subpoint" + i + "'>" + gethead + "</a></li>";
}
}
if (currentH2 !== null) {
tocHTML += "</ul>"; // 마지막 h2의 하위 목차 종료
}
document.getElementById("avsTOC").innerHTML = tocHTML;
}
function avsToggle() {
var avs = document.getElementById('avsTOC');
if (avs.style.display === 'none') {
avs.style.display = 'block';
} else {
avs.style.display = 'none';
}
}
// TOC 초기화
window.onload = avsTOC;
//]]>
</script>
<!-- 자동목차 종료-->
<div id='post-toc'><data:post.body/></div> 이렇게 변경해
주세요
본문 글 작성
제목(h2), 부제목(h3)이 들어가는 본문은 아래 코드 사이에 위치해야 합니다
<div class="avsTOC"><ol id="avsTOC"></ol></div>
본문 글은 여기에 적어주세요
<script>avsTOC();</script>
댓글 쓰기