본문 바로가기
코딩, 개발 꾸준히 하면 볕날선생만큼 한다.

티스토리 목차 삽입 및 소제목 css js 넣는 법

by 볕날선생 2021. 8. 31.
728x90
반응형

js 기준 

<script>
jQuery( document ).ready(function() {
	const html_toc = '<div class="toc"><div class="title">목차</div><ol id="toc"></ol></div>';
	if ( $( ".entry-content h2" ).length > 1 ) {
		$('.entry-content h2:first-of-type').before(html_toc);
	}
	$("#toc").toc( {content: ".entry-content", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
});
</script>

 

자동목차 js

css 자동목차

/* toc */

.toc {
	margin: 40px 20px 30px 20px;
	background: #f3f5f7;
	padding: 15px 20px;
	border: 1px solid #e1e5ed;
	max-width: none;
}
@media only screen and (min-width: 768px) {
	.toc  {
		margin: 60px 0 30px 0;
		max-width: 360px;
	}
}
.toc .title {
	font-weight: bold;
	font-size: 1rem;
}
.toc ol {
	list-style-type: decimal;
	margin-inline-start: 20px;
	font-size: 1rem;
}

 

씨에스에스 자동목차 /* toc */ .toc { margin: 40px 20px 30px 20px; background: #f3f5f7; padding: 15px 20px; border: 1px solid #e1e5ed; max-width: none; } @media only screen and (min-width: 768px) { .toc { margin: 60px 0 30px 0; max-width: 360px; } } .toc .title { font-weight: bold; font-size: 1rem; } .toc ol { list-style-type: decimal; margin-inline-start: 20px; font-size: 1rem; }

728x90
반응형