티스토리에 목차 (ToC) 넣기 + 수정하기

티스토리에 목차 (ToC) 넣기 + 수정하기

Review & How-to 2023. 1. 21. 01:29
반응형
🕓 5 mins read

엄연히 티스토리 이용후기..?니까 리뷰 카테고리에 넣어봤습니다.

목차- ToC (Table of Contents) 아니 이런 기본 기능이.. 플러그인에 없다고..?

github pages 쓰다가 pro 계정 만료 돼서 이참에 용량도 넉넉하고 오래전부터 쓰던 티스토리로 갈아타야지 하고 옮겼는데,

15년도 넘은 대한민국 대표❤️ 블로그 플랫폼에
목.차. 기.능.도. 없.네.요. (보고 있나 티스토리??)

검색 좀 해보니 Tocbot 을 많이들 이용하시는 듯하더군요.
마침 jekyll + github pages 조합에서도 쓰던 tocbot 모듈인 데다, HTML 스킨 편집을 제공하는 티스토리라서 간단하게 가져와서 붙여 봤습니다.

개발자가 아니어도 적용 자체는 간단합니다. (간단? 한 것 같아요)

1. 소스 가져오기

Tocbot 라이브러리 스크립트와 CSS를 가져와야 합니다.
티스토리 스킨 편집 > HTML 수정에서 <head> 태그 안에 다음과 같은 두 줄 추가해줍니다.

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

2. 목차를 삽입할 곳 지정하기

Tocbot은 동적으로 콘텐츠를 DOM parsing 해서 생성하므로, 미리 목차가 삽입될 위치에 <div>를 심어 줘야 합니다.
CSS상에서 상대적 위치를 이용하기 때문에 티스토리에서는 글 본문이 시작하는 곳이 좋습니다.

<div class="toc"></div>  <div class="toc hidden-xs hidden-sm"></div> 

항상 사용하려면 첫 번째 기본 클래스만 사용

모바일이나 태블릿에서는 화면이 상대적으로 작으니 목차를 없애고 싶다면 두 번째 줄을 사용

사용하는 기본 스킨/커스텀 스킨의 HTML 마다 다를 텐데, 티스토리 기본 스킨이라면 <s_permalink_article_rep> 이라는 태그로 케이스별 본문 위치를 지정하고 있습니다.

팁. 눈으로 HTML 소스 쉽게 탐색

목차 삽입할 위치 찾는 것을 포함하여 앞으로 언급할, "사용 중인 스킨마다 다를 수 있는 부분"을 찾는 간단한 방법도 배워봅시다. (꼭 티스토리가 아니어도 내가 만들지 않은 HTML을 편집할 때, 소스 탐색하는데 용이합니다.)

크롬 브라우저에서 F12를 눌러서 소스 보기 모드로 들어갑니다.
(다른 브라우저라면 크롬 브라우저를 쓰세요.. 단점도 많지만, 장점이 더 많습니다 ㅎㅎ)

아래 빨간색 동그라미로 표시해둔 아이콘을 클릭하면 UI 내에서 마우스가 올려진 위치의 소스 element 값을 볼 수 있습니다.

빨간 동그라미친 아이콘을 클릭

이제 본문 전체를 감싸고 있는 <div>를 찾아주고 그 이름을 기억하면 됩니다.

article_content 겠네요

3. Toc 동작 스크립트 추가

이제 body 태그에 들어갈 Tocbot 스크립트를 추가해줍니다.

아래 코드에서 ".article_view"에 해당하는 명칭은 목차를 형성하고자 하는 대상이 되는 본문 태그인데, 스킨마다 class나 id 명이 달라지므로 본인의 스킨에서 content 내지는 article 태그가 무엇인지 확인하고 해당하는 값으로 채워 줍시다.
(Letter 스킨을 기준으로 작성)

<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, collapseDepth: 3 }); $(document).ready(function(){ $('.toc').addClass('toc-absolute'); let 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> </s_t3> </body>

취향껏 옵션을 넣고 빼고 수정하실 수 있게 간단히만 부연설명을 하면,

Array.. 는 heading에 id 속성이 없는 경우에 대한 처리를

tocbot.init 내에서 파라미터로 옵션을 추가로 제어할 수 있는데, 상세 옵션은 여기에서
https://tscanlin.github.io/tocbot/#options

참고로 collapseDepth 는 h3 보다 하위 목차만 숨겼다가 펼치는 기능인데, 기본 값은 0으로 되어있어서, h1 외엔 전부 접히는 것이 기본 설정입니다. 메뉴가 안 보이다가 스크롤이 해당 지점까지 가면 하위 목차가 펼쳐지는 것이죠.

4. CSS 추가

티스토리 기본 스킨에 맞게 적당한 위치나 스타일을 지정해 줍니다.
(스킨 편집 CSS에 적당히 추가해줍니다.)

목차의 가로 위치는 .toc.right을 통해 계산하고 있으니 스킨에 따라 목차가 본문 위로 침범한다면, 수정이 필요할 수 있습니다. (Letter는 기본적으로 좌우로 여백이 광활해서... 그냥 쓰면 됩니다)

/*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 생성 되는것 까진 했는데요.

제목을 항상 밋밋하게 작성하지 않고 앞에 "| 제목입니다", "# 제목입니다" 혹은 "[말머리] 제목입니다" 와 같이 특정 패턴이나 스타일로 작성하고 싶을 수 도 있겠죠?

아니면, 역으로 제목에는 그냥 문구만 작성하고, 목차를 생성할때 목차 링크에 스타일을 입히고 싶을 수도 있겠네요.

예시) "제목입니다" -> "⚽️ 제목입니다"

이렇게 본문에 작성된 헤더와 자동 생성되는 TOC의 문구를 다르게 가져가고 싶을때 아래와 같이 toc 초기화 함수에 파라미터로 callback 함수를 하나 추가 해주면 됩니다.

tocbot.init({ tocSelector: '.toc', contentSelector: '.article_view', headingSelector:'h1, h2, h3', hasInnerContainers: false, collapseDepth: 3, ignoreHiddenElements: true, headingLabelCallback: function (heading) { return heading.trim().replace(/^#+\s?/, ''); } });

위의 "동작 스크립트 추가"에서 편집한것 처럼 스킨편집 > HTML 편집 > HTML 소스보기에서 맨 아래에 tocbot.init() 함수 호출 하는곳에 위의 코드와 같이 headingLabelCallback 파라미터를 추가해줍니다.

저는 문자열 heading을 입력으로 받아서, 공백 제거후, heading 앞에 붙은 #과 공백을 전부 제거하는 함수를 추가 했습니다.
이 callback 함수는 문자열 입력을 받아서 문자열만 리턴하면 되는 함수입니다. 즉, 본문의 헤더를 받아서, TOC에 실제 넣을 텍스트를 출력 해주는것이죠.

위에 소스를 추가하면 아래와 같이 적용됩니다. (link)

## 이 제거 되었습니다

참고 링크

https://pwnbit.kr/89

https://tscanlin.github.io/tocbot/#options
반응형

저작자표시 비영리 변경금지

'Review & How-to' 카테고리의 다른 글

서울대학교 라쿠치나 예식장 후기 (0) 2018.01.20
관련글 관련글 더보기
- 서울대학교 라쿠치나 예식장 후기
댓글

ABOUT ME

dev_naubull2 dev_naubull2

1. 소스 가져오기

2. 목차를 삽입할 곳 지정하기

팁. 눈으로 HTML 소스 쉽게 탐색

3. Toc 동작 스크립트 추가

4. CSS 추가

완성도

# (보너스) 목차 헤더 수정하기

참고 링크

'Review & How-to' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1. 소스 가져오기

2. 목차를 삽입할 곳 지정하기

팁. 눈으로 HTML 소스 쉽게 탐색

3. Toc 동작 스크립트 추가

4. CSS 추가

완성도

# (보너스) 목차 헤더 수정하기

참고 링크

'Review & How-to' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바