-
티스토리 자동 목차 적용 방법IT-Information/Blog-operation 2024. 4. 26. 23:12
목차는 항상 글 맨 상단에 위치하도록 하는 제약이 있습니다. 필요에 따라 글 시작 후 중간부터 목차를 넣는 것도 가능합니다.
기존 목차 기능 적용하기
필요한 라이브러리 및 자바스크립트, CSS는 아래 글에서 다루었으므로 링크를 참고해주세요.
위의 포스팅에서 목차 서식 등록 전까지 적용하면 됩니다. 목차 서식까지 다 적용하면 선택적으로 적용이 가능합니다. 예를 들어 글에 서식을 적용하면 서식을 작성한 위치에 목차가 생성되고 서식을 적용하지 않으면 글 맨 위에 목차가 생성됩니다. 목차가 생성 되는 것을 원하지 않으면 글에 제목1, 제목2, 제목3 스타일을 안쓰면 됩니다.
기존 글 내용 중 제목이 아닌 내용에 제목1, 제목2, 제목3 스타일을 사용한 적이 있다면 수정해야 합니다.
스크립트 수정하기
티스토리 글에 자동으로 목차 넣기 위해 기존 스크립트를 수정하면 됩니다.
<script> // 목차 생성 $(document).ready(function() { var $toc = $("#toc"); if($toc.length == 0) { var firstContent = $('.tt_article_useless_p_margin').children().eq(0); var titleLength = $('.tt_article_useless_p_margin h2,h3,h4').length - $('.another_category h4').length - $('h3.tit_list_type').length; if(titleLength > 0 && firstContent.length > 0) { firstContent.before('<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>'); $toc = $("#toc"); } } if($toc.length > 0) { $toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"}); if($('.another_category').length > 0) { $toc.find('li:last').remove(); } } }); </script>
글 내에 목차 태그가 있는지 검사해서 없으면 글 맨 위에 넣어 주도록 수정한 코드 입니다. titleLength 구하는 부분은 스킨마다 다를 수 있습니다. 글 전체 h2, h3, h4 태그 개수에서 스킨에서 자체적으로 h2, h3, h4 태그를 쓰는 경우 또는 카테고리 다른 글 보기 플러그인을 적용하면 생성되는 h4 태그를 빼고 계산해 주기 위한 부분으로 적용할 때 유의해야 합니다. 기존 목차 생성 기능을 적용한 적이 있는 분은 위 코드로 대체하면 됩니다. 기존 코드는 제거해야 합니다.
결과
기존 글 중에 제목3(h4) 스타일을 적용하여 작성한 글이 있는데 이와 같이 제목으로 인식해 목차가 생성됩니다.
제목 스타일을 제거하고 다른 스타일을 적절히 적용하면 목차가 다시 사라진 것을 확인할 수 있습니다.
글에서 제목1, 제목2, 제목3 스타일을 사용하기만 하면 목차는 자동으로 생성되므로 글 작성이 수월해 집니다.
'IT-Information > Blog-operation' 카테고리의 다른 글
티스토리 목차 적용 방법 (1) 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 애드센스 CPC와 CPM은 무엇인가 (0) 2023.11.21 검색 엔진 최적화(SEO)를 위한 HTML에 몇 가지 태그 (0) 2023.11.21