예전에 사용하던 JB스킨에는 TOC(Table Of Content) 목차가 기본적으로 지원되어서 On/Off 기능을 통해 쉽게 적용할 수 있었는데, 새로 구매한 프라치노 공간 스킨은 TOC가 없다는 게 정말 아쉬웠습니다. 그래서 프라치노 공간 스킨과 흡사한 hELLO 스킨을 바탕으로 따라 해보려고 했는데 계속되는 실패.. 운이 좋게도 구글링을 해보니 프라치노 공간 스킨에 적용된 TOC를 발견할 수 있어서 호다닥 적용을 해봤습니다.
우측에 적용된 메뉴가 바로 TOC 입니다. 원래 오른쪽 사이드에 애드센스를 배치해두었었는데, TOC 배치를 위해 광고는 왼쪽으로 빼두고 광고가 있던 자리에 TOC를 배치해두었습니다. TOC 목차를 적용해놓으면 소제목이 많은 글에서 방문자가 쉽게 필요로 하는 정보를 찾을 수 있을 뿐만 아니라 나무위키처럼 정돈된 느낌도 받을 수 있다는 장점이 있는데요. 복붙만 하면 되는 TOC 적용! 어렵지 않으니 프라치노 공간 스킨을 사용하시는 분들이라면 꼭 한번 사용해보시길 바래요.
HTML 수정
<!-- tocbot -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">
<!-- tocbot -->
HTML 영역에서 <head> 아래에 다음과 같은 코드를 넣어줍니다.
<div class='toc'></div>
마찬가지로 HTML 영역에서 <s_permalink_article_rep>를 검색하면 4개의 결과물이 검색되는데, 그 코드 아래에 다음의 코드를 넣어줍니다. 4개의 결과물 아래에 모두, 총 4번 넣어주시면 되겠습니다.
<script>
var content = document.querySelector('#article')
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',
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>
마지막으로 최하단 </body> 코드 위에 다음과 같은 스크립트를 삽입해줍니다. 여기까지만 해주시면 HTML 영역에서 해야 할 일은 끝입니다.
CSS 수정
/* tocbot */
.toc-absolute {
position: absolute;
margin-top: calc(15vh + 165px);
}
.toc-fixed {
position: fixed;
top: 165px;
}
.toc {
right: calc((100% - 850px) / 2 - 500px);
width: 300px;
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;
}
.is-active-link::before {
background-color: #FF4B49;
}
이제 CSS에 다음과 같은 코드를 넣어줍니다. 여기서 주의하셔야 할 부분은 프라치노 공간 스킨의 메인타이틀인데, 글을 눌렀을 때 전체 화면 방식을 사용하시는 분들은 최상단의 margin-top: calc(15vh + 165px); 코드를 margin-top: calc(100vh + 165px);로 수정해서 사용하시면 되고, 일반형을 사용하시는 분들은 그대로 사용하시면 됩니다. 혹시라도 TOC의 색상 변경이 필요하신 분들은 최하단의 background-color: #FF4B49; 코드를 변경해주시면 끝입니다.
'@ Etc' 카테고리의 다른 글
| 아이폰 13 프로 Apple ProRAW로 촬영한 RAW 파일 PC로 옮기는 방법 (0) | 2021.11.15 |
|---|---|
| 윈도우11 내컴퓨터(내PC) 바탕화면으로 꺼내놓는 방법 (0) | 2021.11.03 |
| 윈도우11 정품인증 제품키 무료 등록 방법 (3) | 2021.10.31 |
| 윈도우11 저사양 PC TPM 2.0 조건 무시하고 설치하는 방법 (1) | 2021.10.30 |
| 사진 노이즈 제거 프로그램 토파즈 디노이즈 AI 무료 설치 방법 (2) | 2021.10.16 |
| 오토캐드 2021 한글판 무료 다운로드 및 정품인증 방법 (58) | 2021.10.05 |
| 후지 X-T4 호환 배터리(NP-W235), 충전기(BC-W235) 알리 직구 (0) | 2021.09.15 |
| 후지필름 X-T4 바디 & 렌즈 펌웨어 업그레이드 방법 (0) | 2021.08.16 |