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>
.png)
