SQL 공부하다 보니 블로그 내 목차의 중요성을 느꼈다.
내 경우 기록용으로 작성 해 두었기 때문에 더 찾아보기 편해야 겠다 싶어졌다.
목차가 있으면 좀 더 편하지 않을까? 싶어 찾아보다 보니 생각보다 다양한 목차의 세계를 볼 수 있었다.
엄청 다양한게 많았지만, 가장 간단해 보였던 건으로 Tocbot으로 셋팅.
https://tscanlin.github.io/tocbot/
그외 실제로 보고 참고한 사이트는 하단 작성해 두었다.
1. Tistory 내 HTML 편집기 OPEN
1-1. '설정' 페이지에서 '꾸미기' > '스킨편집' 클릭
들어가는 초입이 작성되어 있지 않은 포스트들이 있어 블로그 초입인 내 경우 처음엔 좀 당황했다.
때문에 초입부터 캡쳐 해 둔다.
1-2. HTML 설정 페이지 진입
html 편집 클릭하면 html 을 편집 할 수 있는 편집기가 블로그 우측에 나온다.
2.<head> 에 CDN 으로 JS, CSS 호출
CDN(Content Delivery Network)를 통해 올려진 JS와 CSS 기능을 추가한다.
<head>
...
<!-- tocbot -->
<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">
<!-- tocbot -->
...
</head>
내 경우 GA TAG 셋팅이 되어 있어 그 하단에 작성해 두었다.
3. <body> 안에 script 적용
참고사이트 내 스크립트를 보고 베껴썼는데 블로그를 찾아본 결과 하단github 내 소스에 추가적으로 add 한 내용으로 보인다.
(어떤 분이신지 정말 은인이십니다.)
https://github.com/tscanlin/tocbot/blob/master/src/utils/make-ids.js
.....
<!-- tocbot-->
<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>
<!-- tocbot-->
</body>
</html>
contentSelector 내부는 본문이 되는 class 명을 작성해야 한다.
스킨별로 class 명이 다른데, 내 경우 처음 참고한 사이트와 스킨이 다른지라 크롬 개발자 도구를 사용하여 본문을 찾았다.
poster 스킨을 쓰고 있다면, 상단과 동일하게 작성하여도 된다.
4. 목차용 div 작성
사실 이 글을 작성하게 된 이유였다. 왠만하면 적용하고 말려고 했는데 나중에도 또 뒤져볼 것 같아서..
도저히 목차용 div 를 작성할 위치를 못 찾겠어서 해당 스킨을 사용하는 블로거들을 뒤져보았다.
결론은 <s_permalink_article_rep> 뒤에 삽입하는 것.
그것도 <div class="hgroup"> 앞에 (보호용 X)
....
<s_permalink_article_rep>
<!-- tocbot -->
<div class='toc'></div>
<!-- tocbot -->
<div class="hgroup">
....5. CSS 적용
CSS 탭에 최하단에 하단 스크립트 적용
.toc-absolute {
position: absolute;
margin-top: 24px;
}
.toc-fixed {
position: fixed;
top: 165px;
}
.toc {
left: calc((100% - 1020px) / 2 - 250px);
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;
}6. 완성!
상단 내역을 진행하면, 문법에 맞게 작성했다면 모든 블로그내에서 목차가 적용된 것을 볼 수 있다.
7. 단점
7-1. H3가 목차로 생성이 안된다 ㅠ
블로그 내 그런글을 보긴 했지만, 정말 생성이 안된다.
7-2. 블로그 사이즈가 변경되면 (Ex 개발자도구만 열어도) 가려져서 안보인다.
모바일에서도 안보이는 것으로 보여 시간이 나면 이 부분은 수정해야 겠다.
참고 사이트 :
https://5-ssssseung.tistory.com/59
티스토리 사이드 목차 TOC(Table of Contents) 추가하기 (오디세이 스킨, 자동 목차 생성)
TOC Table of Contents 즉, 목차이다. 내가 작성한 markdown 형식의 파일에서 헤더 태그를 목차로 엮어 보기 쉽게 제공한다. 적용 방법 티스토리의 html과 css를 편집하여 TOC 기능을 추가할 수 있다. tocbot에
5-ssssseung.tistory.com
[tistory] 티스토리 목차 자동으로 만드는 방법(+Tocbot)
티스토리 블로그를 하다보니 목차를 가지고 글이 어떤 내용을 가지는지 알 수 있으면 좋겠다는 생각을 했습니다. 목차를 게시글마다 추가하려니 이제까지 작성한 게시글을 모두하기에는 시간
otrodevym.tistory.com
https://fromitot.tistory.com/40#1.-%3Ca-href%3E-%ED%99%9C%EC%9A%A9
티스토리 블로그 목차 만들기 (부드러운 스크롤, 목차 따라오기, Tocbot)
필자가 조사한 바에 따르면 티스토리 블로그에서 목차 (내부링크, TOC - Table Of Contents)를 만드는 방법은 HTML모드로 들어가 코드를 건드리는 것뿐이다. 그러므로 필자를 포함한 초심자들은 목차를
fromitot.tistory.com
'환경설정' 카테고리의 다른 글
| Google API - OAuth 2.0 인증 (0) | 2023.03.19 |
|---|---|
| Google API - Google Service Account 를 사용(Analytics API) (0) | 2023.03.17 |
| Google API - POSTMAN 내 OAuth 2.0 인증 (0) | 2023.03.14 |
| WSL2- 우분투 검은 화면 부팅 (0) | 2022.12.27 |
| WSL2(Windows Subsystem for Linux) 포트포워딩 방법 (1) | 2022.09.26 |
