조기 은퇴를 위한 재테크 공부하자

파이프라인 만들기 도전/블로그로 돈 벌기

북클럽 스킨 toc 자동목차 만드는 방법 및 단점

N잡 회사원 2023. 2. 17.

 

포스팅의 목차가 나오고 목차를 클릭하면 그 글로 이동하는 자동목차. 북클럽 스킨 toc 자동목차를 만들었어요 ㅎㅎ 다운로드하고 업로드/ 복붙만 하면 자동목차 쉽게 만들 수 있는데, 치명적인 단점이 있어 현재는 자동목차를 사용 안 하고 있어요.

 

대부분의 목차는 스킨편집을 하고 포스팅마다 목차 서식을 삽입시켜야했어요. 기존 포스팅을 다 수정해야 하는 번거로움이 있어 저는 포스팅 수정 없이 자동으로 만들어지는  TOC 목차를 적용했어요. 참고로 저는 현재 북클럽 스킨을 이용하고 있어 북클럽 스킨인 분들은 조금 더 쉽게 따라 하실 수 있을 것 같아요 ㅎㅎ

 

 

티스토리 자동 목차란?

티스토리 자동목차

자동목차란 이렇게 포스팅한 글의 사이드쪽에 자동 목차가 생각은 걸 말해요. 화면 스크롤과 함께 목차가 따라가서 포스팅을 볼떄 편하게 편하게 목차를 확인하고 원하는 문단으로 빠르게 이동이 가능해요.

 

목차를 사용할때, 대제목(제목 1) > 중제목(제목 2) > 소제목(제목 3) 순으로 써야 해요. 저는 예전에 블로그에서 제목을 쓸 때 차례대로 1,2,3 순으로 쓰라고 해서.. 그렇게 썼는데 그렇게 하니 목차가 제가 원하는 대로 나오지 않아 글을 다시 수정해야 해요..ㅠㅠ

 

자동목차를 만들고 포스팅에 제목1/2/3을 적절히 쓰고 원하는 방향으로 잘 나오는지 꼭!! 확인해 주세요.

 

 

자동목차 만들기

자동목차는 포스팅을 수정할 필요는 없지만, TOC 다운로드와 블로그 스킨편집을 해야 해요.

 

1. toc 다운

jquery.toc.zip
0.00MB

TOC는 위의 파일을 다운로드해 주세요.

 

 

2. 블로그 스킨편집 html

1) 블로그 스킨편집 <파일업로드>

다운로드한 파일 중 min으로 끝나는  'jquery.toc.min'를 파일 업로드를 합니다.

블로그 스킨편집 → html → 파일업로드 →  추가 → jquery.toc.min 

티스토리 자동목차 만들기

 

 

2) 블로그 스킨편집  <html>

(1) 블로그 스킨편집 html → cntrl & f (찾기) →  <head>

<head>~</head> 사이에 아래 코드를 삽입해 줍니다.

*저는 /head 앞에 삽입했는데, head 뒤에 삽입해도 상관없어요~

자동목차 만들기

<!--  목차 만들기 1 시작 -->
 <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">
<!--  목차 만들기 1 끝 -->

 

 

(2) cntrl & f (찾기) →/body 찾기  →  </body> 앞에 아래 코드 삽입

 

<!--  자동 목차 만들기2 시작-->
 <script>
 var content = document.querySelector('.entry-content')
 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: '.entry-content',
	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>

<!--  자동 목차 만들기2 끝-->

 

 

(3) 목차 위치 지정

 <s_permalink_article_rep> 찾기 → 2개 나옴 → 밑에 있는 곳에 붙여 넣기

<s_permalink_article_rep> 와 <div class="article-header" style="background-image:none"> 사이에 코드 삽입

 

* 북클럽 스킨의 경우 두 개가 나오는데, 다른 스킨은 하나만 나오는 것 같아요. 

 

<!--  목차 만들기3 시작 -->
					<div class='toc'></div>
					<!--  목차 만들기3 끝 -->

 

3) 블로그 스킨편집 CSS

상단메뉴 CSS → 제일 하단 / 검색 (.revenue_unit_wrap.position_list) → 코드 삽입

* 저의 경우 제일 하단으로 이동하기가 힘들어서 .revenue_unit_wrap.position_list 를 검색해서 코드를 삽입했어요. 검색 후 제일 하단이 맞는지 확인하고 하단에 아래 코드를 붙여 넣어주세요.

사진을 보면 형광펜으로 right를 밑줄 쳤는데, 이 부분은 목차의 좌우 위치를 지정해 주는 수식어로, 만약 왼쪽에 목차를 만들고 싶으시면 left를 입력하면 된다고 해요.

하지만... 제 코드가 뭐가 문제인지, left를 시험 삼아 입력했는데, 그렇게 하니 본문영역으로 목차가 넘어와 지저분하더라고요.... 오른쪽에 목차를 둔다면 이 방법으로 쭉 따라 해도 되지만, 그게 아니라 왼쪽에 목차를 두실 분들은 코드를 수정하거나 다른 방법으로 다셔야 할 것 같아요.

/* 자동목차 만들기 스타일 4 */
.toc-absolute {
	position: absolute;
	margin-top:165px;
}
.toc-fixed {
	position: fixed;
	top: 165px;
}
.toc {
	right: calc((100% - 850px) / 2 - 300px);
	width: 250px;
	padding: 10px;
	box-sizing: border-box;
}
.toc-list {
	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;
}

 

 

자동목차 만들기 문제점

제가 적용한 자동목차는 화면을 이동해도 따라가는 목차라 블로그 속도에 악영향을 줘요. 편하긴 하지만... 그만큼 속도도 느려져 블로그 속도가 느리다면 안 하시는 게 좋을 것 같아요. 

 

자동목차 속도

왼쪽 15점은 자동목차를 적용한 사진이고/ 오른쪽 28점은 자동목차를 적용하지 않았을 때 속도예요. 목차에서 한 가지만 주석처리하고 한 거라 속도 측정 시간은 1~2분 정도의 차이로 속도를 측정했어요. 속도 측정은 시간에 따라 점수가 달라지기도 하는데, 시간차이가 거의 나지 않아 자동목차를 한다면 저 정도의 속도 차이가 생긴다고 생각하시면 좋을 것 같아요.

 

티스토리 내 자동광고를 해지해서 티스토리 홈 cls를 개선했는데, 포스팅 cls는 아직도 많이 낮은 편이라 아쉽게도 저는 목차를 적용하지 않기로 했어요. 화면을 따라오지 않는 목차는 cls에 큰 영향을 줄 것 같지 않지만, 포스팅을 하나하나 다 수정해야 한다는 부담감이 있어 앞으로도 쭉 목차를 적용하지 않을 생각이에요.

 

 

↓ 티스토리 손쉬운 속도 향상/ 광소 설정 후기 ↓

티스토리 미넴스킨 후기 속도올리기 광고설정 최적화 Good

 

 

 

저작자표시 비영리 변경금지

'파이프라인 만들기 도전 > 블로그로 돈 벌기' 카테고리의 다른 글

[티스토리 애드센스 수익 올리기 ] 수수료 줄이기  (0) 2023.11.01
티스토리 미넴스킨 후기 속도올리기 광고설정 최적화 Good  (1) 2023.06.07
티스토리 쉽고 효과좋은 속도개선 CLS 0.1초과 문제 해결  (0) 2023.01.26
티스토리 속도 개선 오프스크린 이미지 로딩 지연 설정 방법(캡처 위주 설명)  (0) 2023.01.18
크롤러 호스팅 서버 과부하/ 호스팅 서버에 연결할 수 없음  (1) 2023.01.12

댓글

티스토리툴바