[오디세이 스킨] 목차(TOC) 추가 방법

목차란?

목차는 "제목"스타일로 작성한 글을 모아놓은 기능입니다. 

 

목차 생성 방법

오디세이 스킨은 목차기능을 제공하고 있지 않습니다. 그래서 스킨편집창에서 css와 javascript 코드를 직접 추가해야 합니다.

 

TOC 라이브러리 추가 추가

목차 라이브러리(TOC) 설정을 head태그 아래에 추가합니다.

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

 

TOC코드 추가

</body>태그 바로 위에 TOC코드를 추가합니다. TOC코드는 "제목"스타일을 조회하여 목차를 만들어줍니다. 오디세이스킨은 ".article-view" class 안에 "제목"스타일이 존재합니다.

<script>
    // .article-view class를 기준으로 조회
    // 만약 .article-view class가 아니라면 다른 class이름으로 교체
	var content = document.querySelector('.article-view')
	var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
	var headingMap = {}

	Array.prototype.forEach.call(headings, function (heading) {
			var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
									.split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '')
			headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
			if (headingMap[id]) {
				heading.id = id + '-' + headingMap[id]
			} else {
				heading.id = id
			}
		})

	tocbot.init({
		tocSelector: '.toc',
		contentSelector: '.article-view',
		headingSelector:'h1, h2, h3',
		hasInnerContainers: false
	});

	$(document).ready(function(){
		$('.toc').addClass('toc-absolute');

		var toc_top = $('.toc').offset().top - 165;
		$(window).scroll(function() {
			if ($(this).scrollTop() >= toc_top) {
				$('.toc').addClass('toc-fixed');
				$('.toc').removeClass('toc-absolute');
			} else {
				$('.toc').addClass('toc-absolute');
				$('.toc').removeClass('toc-fixed');
			}
		});
	});
</script>

 

TOC를 표시하는 코드 추가

TOC를 화면에 보여주는 코드를 추가합니다. ".area-main"아래에 추가합니다.

<div class='toc'></div>

 

CSS추가

디자인을 꾸며주는 CSS를 추가합니다.

.toc-absolute {
  position: absolute;
  margin-top: 24px;
}
.toc-fixed {
  position: fixed;
  top: 165px;
}

.toc {
  left: calc((100% - 1020px) / 2 - 350px);
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
}

.toc-list {
  margin-top: 14px !important;
  font-size: 0.9em;
}

.toc > .toc-list li {
  margin-bottom: 14px;
}

.toc > .toc-list li:last-child {
  margin-bottom: 0;
}

.toc > .toc-list li a {
  text-decoration: none;
}