-
티스토리 Letter 스킨 자동 목차IT-Information/Blog-operation 2024. 5. 10. 01:20
티스토리의 Letter 스킨에서 자동 목차 기능을 적용해보려고합니다.
Tocbot이라는 라이브러리를 사용해 자동 목차를 생성합니다.
<head></head> 안에 코드 넣기
head 부분 안에 적용해야 할 것이 2가지 코드가 있습니다.
<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>CSS와 js파일을 연결하는 것입니다.
<body></body> 태그 안 <s_permalink_article_rep> 밑 class 추가
<div class="toc toc-fixed" ></div><s_permalink_article_rep> 밑에 위의 구문을 추가합니다.
</body>바로 위에 스크립트 추가
<script> let content = document.querySelector('.article_view') let headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7') let headingMap = {} Array.prototype.forEach.call(headings, function (heading) { let 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'); let toc_top = $('.toc').offset().top; $(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>바디 태그가 끝나는 지점 바로 위에 스크립트 구문을 추가해줍니다.
CSS 추가
/*tocbot*/ .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; } .toc-list-item .is-collapsed{ max-height: 3000px;이렇게 작성이 되면 자동 목차가 완료됩니다.
'IT-Information > Blog-operation' 카테고리의 다른 글
티스토리 팀블로그 기능 (0) 2024.05.14 티스토리 목차 적용 방법 (1) 2024.04.26 티스토리 자동 목차 적용 방법 (0) 2024.04.26 유튜브 영상 youtube.com에서 연결을 거부시 어떻게 해야할까 (0) 2024.02.01 구글 드라이브에 이미지를 웹페이지로 불러오기 (0) 2024.01.18 yahoo 검색엔진에 사이트맵을 제출하는 방법 (0) 2023.12.17 Active View CPM은 무엇인가? (0) 2023.11.24 CPM 성과를 높이는 방법 (3) 2023.11.22