Type Here to Get Search Results !

정적 HTML 목차 자동 생성기 - 티스토리 | 구글 블로거(블로그스팟, 구글 블로그)

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>

Tags