티스토리 블로그를 하다가 약관 변경에 깜짝 놀라서 구글 블로그 (블로그스팟)으로 이동하는 분들이 많을 것입니다. 티스토리 블로그에서 자동목차 생성되는 것을 사용하던 분들은 블로그 스팟에도 그런 기능이 있는지 궁금해 할 것인데, 그 방법을 정리해 봅니다.
개인적으로 목차가 꼭 있어야 한다고는 생각하지 않지만, 그래도 많은 분들이 사용하고 있으니 목차가 필요하다고 생각하면 쓰시면 됩니다.
구글 블로그 자동목차 넣기
구글 블로그에 자동목차를 넣기 위해서는 2가지가 필요합니다.
- 자동목차를 생성해 주는 스크립트 (자바스크립트) 코드
- 자동목차를 넣을 위치에 넣는 코드
그럼 각각에 대해서 어떤 코드인지 살펴보겠습니다.
자동목차를 생성해주는 스크립트
자동목차를 생성해 주는 스크립트는 아래와 같습니다. 코드를 넣어주는 위치는 /body 태그 바로 앞에 넣으면 됩니다.
구글 블로그 테마 편집은 테마 메뉴에서 html 편집을 들어가면 됩니다. 티스토리보다 불편해 보이기도 하다가, 막상 해 보면 더 편하게 느껴지기도 합니다. 거기 맨 아래로 내려가면 html 태그가 끝나는 곳에 /body 가 보입니다. 그 윗줄에 넣으면 되겠습니다.
<!-- 자동 목차 생성 시작 --> <style> html{scroll-behavior:smooth;overflow-x:hidden} .pS details summary{list-style:none;outline:none} .pS details summary::-webkit-details-marker{display:none} details.k2Toc{padding: 10px 15px;background: #f3f3f3;color: black;font-weight: 600;margin: 10px 0px; border:2px solid; border-radius: 5px;box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;} details.k2Toc summary{display:flex;justify-content:space-between;align-items:baseline} details.k2Toc summary::after{content:attr(data-show);font-size:12px; opacity:.7;cursor:pointer} details.k2Toc[open] summary::after{content:attr(data-hide)} details.toc a:hover{text-decoration: none; color: #fe6c6c;}details.toc a:active{text-decoration: none; color: #fe6c6c;}details.toc a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; color:inherit} details.toc ol{list-style:none;padding:0;margin:0; line-height:1.6em; counter-reset:toc-count} details.toc ol ol ol ol{display:none} details.toc ol ol, .tocIn li:not(:last-child){margin-bottom:5px} details.toc li li:first-child{margin-top:5px} details.toc li{display:flex;flex-wrap:wrap; justify-content:flex-end} details.toc li::before{flex:0 0 1px; content:counters(toc-count,'.')'. ';counter-increment:toc-count} details.toc li a{flex:1 0 calc(100% - 23px)} details.toc li li::before{flex:0 0 2px; content:counters(toc-count,'.')} details.toc li li a{flex:1 0 calc(100% - 28px)} details.toc li li li::before{flex:0 0 3px} details.toc li li li a{flex:1 0 calc(100% - 45px)} details.toc .toc >ol{margin-top:1em} details.toc .toc >ol >li >ol{flex:0 0 calc(100% - 23px)} details.toc .toc >ol >li >ol ol{flex:0 0 calc(100% - 45px)} details.toc .toc >ol >li >ol ol ol{flex:0 0 calc(100% - 35px)} </style> <script>/<![CDATA[/ /* Table of Contents / class TableOfContents { constructor({ from, to }) { this.fromElement = from; this.toElement = to; this.headingElements = this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6"); this.tocElement = document.createElement("div"); }; getMostImportantHeadingLevel() { let mostImportantHeadingLevel = 6; for (let i = 0; i < this.headingElements.length; i++) { let headingLevel = TableOfContents.getHeadingLevel(this.headingElements[i]); mostImportantHeadingLevel = (headingLevel < mostImportantHeadingLevel) ? headingLevel : mostImportantHeadingLevel; } return mostImportantHeadingLevel; }; static generateId(headingElement) { return headingElement.textContent.replace(/\s+/g, "_"); }; static getHeadingLevel(headingElement) { switch (headingElement.tagName.toLowerCase()) { case "h1": return 1; case "h2": return 2; case "h3": return 3; case "h4": return 4; case "h5": return 5; case "h6": return 6; default: return 1; } }; generateToc() { let currentLevel = this.getMostImportantHeadingLevel() - 1, currentElement = this.tocElement; for (let i = 0; i < this.headingElements.length; i++) { let headingElement = this.headingElements[i], headingLevel = TableOfContents.getHeadingLevel(headingElement), headingLevelDifference = headingLevel - currentLevel, linkElement = document.createElement("a"); if () { headingElement.id = TableOfContents.generateId(headingElement); } linkElement.href = #${headingElement.id}; linkElement.textContent = headingElement.textContent; if (headingLevelDifference > 0) { for (let j = 0; j < headingLevelDifference; j++) { let listElement = document.createElement("ol"), listItemElement = document.createElement("li"); listElement.appendChild(listItemElement); currentElement.appendChild(listElement); currentElement = listItemElement; } currentElement.appendChild(linkElement); } else { for (let j = 0; j < -headingLevelDifference; j++) { currentElement = currentElement.parentNode.parentNode; } let listItemElement = document.createElement("li"); listItemElement.appendChild(linkElement); currentElement.parentNode.appendChild(listItemElement); currentElement = listItemElement; } currentLevel = headingLevel; } this.toElement.appendChild(this.tocElement.firstChild); } } /]]>*/</script> <script>document.addEventListener('DOMContentLoaded', () => new TableOfContents({ from: document.querySelector('#post-body'), to: document.querySelector('#toContent') }).generateToc() );</script> <!-- 자동 목차 생성 끝 -->자동목차를 넣는 스크립트
자동목차를 사용하기 위해서는 아래 코드를 넣고자 하는 곳에 넣으면 됩니다. 많은 분들이 본문 최상단에 넣기도 하고, 첫 디스크립션이 끝난 이후에 넣기도 합니다.
원하는 위치에 html 코드만 넣으면 되는 것입니다.
<details class="k2Toc toc" open=""> <summary data-hide="숨기기" data-show="보기">목차</summary> <div class="toc" id="toContent"></div> </details> <br />위 코드들을 활용하면 구글 블로그에서 자동목차를 사용할 수 있습니다.