HTML 목차를 페이지 로딩시 자동으로 생성하는 것은 웹 페이지 로딩에 영향을 줍니다. 그리고, 목차가 늦게 나타나는 현상이 발생합니다. 이는 SEO에 나쁜 영향을 주므로, 블로그 글을 발행 전에 HTML을 이용해서 분석 후 목차를 포함한 HTML을 생성해 주는 기능을 제공합니다.
정적 HTML 목차 자동 생성기
정적 HTML 목차 자동 생성기는 SEO(검색엔진최적화)에 적합한 목차를 생성해 줍니다. 이 방법으로 목차를 생성하면 티스토리나 구글 블로그 글을 발생하기 전에 정적 HTML로 목차를 생성하기 때문에 글 로딩 속도 측면에서 빠릅니다.
또한, 검색 엔진의 봇들이 글을 가져갈 때에도 효율적이며 사용자도 페이지가 로딩 되자마자 확인할 수 있으므로, 로딩이 되고 나서 자동으로 생성되는 목차 생성 방식보다 효율적입니다.
사용 방법은 다음의 css와 javascript를 티스토리 블로그 혹은 구글 블로그의 html 편집 항목에서 추가해 놓으신 후 목차가 생성되길 원하는 위치에 <div id="toc"></div> 요소를 포함한 블로그 글 html을 입력하고 생성을 누르면 목차를 포함한 html이 출력됩니다.
만약 toc에 해당하는 id를 갖는 요소가 없는 경우 최상단에 목차가 생성됩니다.
css는 개인별 취향에 맞게 수정하셔도 됩니다.
Input HTML:
Output HTML:
정적 HTML 목차 자동 생성기 CSS
.tocstyle { border: 1px solid #595757; box-shadow: 1px 1px 0 #656565; background-color: #EFEDED; color: #656565; line-height: 1.4em; margin: 30px auto; padding: 20px 30px 20px 10px; font-family: oswald, arial; display: block; width: 80%; } .tocstyle ol, .tocstyle ul { margin: 0; padding: 0; } .tocstyle ul { list-style: none; } .tocstyle ul li::before { /* content: "> ";*/ content: "\f00c"; font-family: "Font Awesome 5 Free"; color: #0b9207; font-weight: 800; margin-right: 10px; } .tocstyle ol li, .tocstyle ul li { padding: 0 0 0; margin: 0 0 0 40px; font-size: 15px; } .tocstyle a { color: #656565; text-decoration: none; } .tocstyle a:hover { text-decoration: underline; } .tocstyle button { background: #EFEDED; font-family: oswald, arial; font-size: 20px; position: relative; outline: none; cursor: pointer; border: none; color: #656565; padding: 0 0 0 15px; } .tocstyle button:after { content: "\f424"; font-family: "Font Awesome 5 Free"; font-weight: 900; /* For solid style */ position: relative; left: 10px; font-size: 20px; } .tocstyle h2 { margin-top: 0; } .tocstyle h2:after { content: "\f424"; background: #EFEDED; font-family: "Font Awesome 5 Free"; font-weight: 900; /* For solid style */ position: relative; left: 10px; font-size: 20px; }
정적 HTML 목차 자동 생성기 Javascript
아래의 javascript는 html 편집 항목의 가장 마지막 부분에 넣으셔야 합니다.
예를 들면 </body> 바로 앞에 넣는다던가 아니면 </html> 앞에 넣으시면 됩니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> <link href=' https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <script type='text/javascript'> //<![CDATA[ function tocToggle() { var avs = document.getElementById('toc-static'); if (avs.style.display === 'none') { avs.style.display = 'block'; } else { avs.style.display = 'none'; } } // JavaScript를 사용하여 onclick 이벤트 처리 document.getElementById("toc-button").addEventListener("click", function () { var tocStatic = document.getElementById("toc-static"); if (tocStatic.style.display === "block") { tocStatic.style.display = "none"; } else { tocStatic.style.display = "block"; } }); //]]> </script>