[티스토리] 블로그 자동 목차 생성 (TOC), 코드블럭 디자인 변경

티스토리 블로그 자동 목차 생성 사용방법

티스토리에서 코드와 관련된 포스팅을 올리면서 왜 제 다른 블로그와 다를까 하는 의문이 있습니다. 제 포스팅 코드도 이렇게 예쁘게 나왔으면 좋겠는데 라는 바램이 있죠. 티스토리 블로그에 자동 목차를 깨끗하게 출력하는 방법은 간단합니다. 아래 단계를 따라해서 HTML 편집란에 자바스크립트 코드만 넣어주면은 바로 완성됩니다.

티스토리 블로그 자동 목차 생성을 위한 HTML 수정 - head 값 수정

티스토리 블로그 자동 목차 생성하기 위해 HTML head 부문에 아래의 값을 추가해줍니다. 이는 티스토리 스킨 중에 Book Club 의 스킨을 기준으로 하에 만들어졌습니다. 

<!-- TOC Start -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
<!-- TOC End -->

티스토리 블로그 자동 목차 생성을 위한 HTML 수정 - Body 값 수정

HTML body 값에도 마찬가지로 아래의 값을 추가해 줍니다. </body> 의 맨 끝부분까지만 복사 붙여넣기로 넣어서 정리해서 처리하면 됩니다. 

<!-- TOC Script Start--> 
<script type="text/javascript"> 
$(document).ready(function () {
  if (!location.pathname.startsWith("/entry/")) {
    return
  }
  var content = document.querySelector(".entry-content");
  var headings = [...content.querySelectorAll("h1, h2, h3, h4, h5, h6, h7")].filter(e => !e.parentElement.classList.contains('another_category'));
 
  if (headings.length <= 1) {
    return
  }
 
  let tocHead = document.createElement('div');
  tocHead.className = 'toc-head';
  content.prepend(tocHead);
 
  var headingMap = {};
  headings.forEach(function (heading) {
    var id = heading.id
      ? heading.id
      : heading.textContent
        .trim()
        .toLowerCase()
        .split(" ")
        .join("-")
        .replace(/[\!\@\#\$\%\^\&\*\(\):]/gi, "");
    headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
    if (headingMap[id]) {
      heading.id = id + "-" + headingMap[id];
    } else {
      heading.id = id;
    }
  });
 
  tocbot.init({
    tocSelector: ".toc-head",
    contentSelector: ".entry-content",
    headingSelector: "h1, h2, h3",
    hasInnerContainers: false,
    activeLinkClass: 'toc-head-active-link',
    disableTocScrollSync: false,
    collapseDepth: 3,
    ignoreSelector: '.another_category h4',
  });
});
</script> 
<!-- TOC Script End--> 
</body>

티스토리 블로그 자동 목차 생성을 위한 CSS 수정 - CSS값 수정

CSS도 마찬가지로 복사 붙여넣기로 넣어줍니다. 저는 CSS 맨 마지막 줄에 해당 값을 복사 붙여넣기로 넣었습니다. 

/* TOC */ 
.toc-absolute {
	position: absolute;
	margin-top: 10px;
}
.toc-fixed {
	position: fixed;
	top: 30px;
}
.toc-none {
	display: none;
}
.toc {
 	right: calc((100% - 915px) / 2 - 170px);
	width: 330px;
 	padding: 10px;
 	box-sizing: border-box;
}
.entry-content .toc-head {
	background-color: #fafafa;
	opacity: 0.8;
}
.toc-head {
	font-size: 1em;
	font-weight: 500;
	margin-bottom: 40px;
	padding-bottom: 10px;
	padding-top: 10px;
	border: 1px solid #999;
}
.toc-head:before {
	content: "목 차";
	display: block;
	text-align: center;
	padding: 4px 0 10px;
	margin: 0px auto 0;
}
.is-active-link::before {
	background-color: #0000ff !important;
}
.toc-head > ol {
	list-style: none;
}
.toc-head > ol > li > ol {
	list-style: none;
	margin: 10px 0;
}
.toc-head ol > li {
	margin: 10px 0;
	text-indent: 0px;
}
.toc-head > ol > li {
	color: black;
}
.toc-head a:before {
	background-color: #fff0;
}
.toc-head-active-link {
	font-weight: 500;
}
.toc-list > li {
	margin-top: 10px !important;
	font-size: 0.9em;
}
.toc > .toc-list li {
	margin-bottom: 10px;
}
.toc > .toc-list li:last-child {
	margin-bottom: 0;
}
.toc > .toc-list li a {
	text-decoration: none;
}
 
.toc-title {
	font-weight: 500;
	font-size: 1.2em;
	color: dimgray;
	padding: 10px;
	background-color: #f1f1f1;
	text-align: center;
}
 
@media screen and (max-width: 950px) {
	.toc {
		display: none;
	}
}

티스토리 블로그 코드블럭 디자인 변경하기

마지막으로 코드블럭도 이쁘게 꾸며줍니다. 

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/androidstudio.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style>
  pre { padding: 0px; }
</style>

티스토리 블로그 진행바 추가 넣어보기

저는 아래에 진행바로 head 부문에 추가하여 진행했습니다. (깔끔하게 보이는지는 확인해봐야될 것 같아요.)

<!--진행바 스크립트 시작-->
<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script>
<script type="text/javascript">
    $(function() {
        $("body").prognroll({
            height: 5,
            color: "#555"
        });
        $(".content").prognroll({
            custom: true
        });
    });
</script>
<!--진행바 스크립트 종료-->