티스토리 블로그에 자동 목차(TOC)적용 - Book Club 스킨

북클립 스킨에 자동으로 목차를 달기위해

진짜 많은 블로그들을 찾아 보았지만 

간편하게 설명을 해 주는 곳이 없어서 혹시나 나처럼 

불편함을 겪지 않았으면 하는 마음에 이 글을 작성 해 본다.

 

북클립 뿐만 아니라 대부분 스킨에서 적용 가능하며

초보자를 위해 아주 간단히 설명하겠다.

그냥 따라하기만 하면 된다.

아주간단. 3살 어린이도 컨트롤 C와 V만 알면

바로 적용시킬 수 있게 글을 적어본다.

---

 TOC(목차) 적용방법

---

1. 블로그 관리 ▷ 스킨 편집 ▷ html 편집 이동

 

위의 경로를 따라, 티스토리 스킨의 html 코드가 있는 페이지로 이동한다.

 

 

2. HTML 의 아무곳이나 클릭 후 Ctrl+f 를 누른후 </head> 검색

 

 

3. 검색된 </head> 윗부분에 밑의 텍스트를 붙여넣기 한다. 

 

<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">

 

 

4. 다시 ctrl+f 를 누른후 <s_permalink_article_rep> 를 검색

 

 

 

5. 검색한 <s_permalink_article_rep> 밑에 아래의 텍스트를 붙여넣는다.

 

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

 

 

6.  ctrl+ f 를 누른 후 </body> 를 검색한다.

 

 

7.  검색한 </body> 위에 밑의 텍스트를 붙여넣는다. 

 

<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>

 

 

8. HTML 옆에 CSS를 들어간후 맨 아래에 밑의 텍스트를 추가한다.

 

.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;

}

9.적용을 누른 후 아무 글이나 클릭해보면

자동으로 목차가 적용된 것을 확인 할 수 있다.

---

 핵심내용 요약 

---

1. 블로그관리 → 스킨편집 →html편집이동

 

2. /head 검색후 /head 윗부분에 아래코드 붙여넣기

<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">

 

3. <s_permalink_article_rep>검색후 그 밑에 아래코드 붙여넣기

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

 

4. /body 검색후 그 위에 아래 코드 붙여넣기

<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>

 

5. CSS들어가서 맨밑에 아래 코드 붙여넣기

.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;

}

 

6. 적용 후 새로고침 하면 제목 tag를 쓰는 모든 경우에서

적용된 것을 확인 할 수 있다.

---

 참고 

---

TOC(목차)를 우측 혹은 좌측으로 변경하고 싶다면.

아래 사진처럼 right 부분을 left 로 혹은 그 반대로 변경하면 된다.

 

---

 마지막으로 

---

이런 저런 방식의 목차 만드는 블로그를 따라 해 보았지만

개인적으로 글을 쓸때마다 html 코드를 붙여넣기 하여 목차를 선택적 생성 하는 것

보다는 무조건 목차가 나오게 하는게 좋다고 생각되어 해당 방법을 사용함.

 

구글 검색 로직에도 목차가 있으면 상위에 뜬다고하니...

뭐 개인의 입맛대로 목차를 반자동 생성하거나 

필자처럼 자동 생성 해서 사용하면 될 것 같다.

 

배워가며 하나씩 하나씩 적용해 보는 블로거가 되려 노력한다.

아직도 나아갈 길이 멀고 험난하다..

다들 힘내길.