자기계발서나 전공서적이나 항상 목차부터 읽지 않으면 내용이 이해되지 않는 목차 덕후로서, tistory에는 없는 velog나 github blog의 TOC가 너무 탐이 났었다.
그래서 찾아보니 TOCBOT이란 것을 통해 티스토리에도 TOC를 달 수 있었다. 글 내부의 h2, h3 등 태그를 읽어 TOC로 만들어주는 기능을 제공하고 있는 서비스인데, 어차피 기존에도 글을 업로드 할 때 마크다운으로 작성 후 markdown-tistory 모듈을 사용해 업로드하고 있었어서 이미 목차가 들어간 글이 올라가있는 상태였기 때문에 기존 글과의 호환성에 대해서는 별 고민 없이 작업을 진행할 수 있었다.
무작정 한 작업이라 기억나는 중요한 파편만 정리했다.
TOCBOT 코드 추가
먼저 위와 같이 html에 tocbot css, js 를 위한 코드를 작성하고, 사이드바 div 맨 하단에 toc 모듈을 위한 코드를 넣어준다.
사이드바 관련 설정
원래는 본문 영역에서 우측에는 사이드바, 좌측에는 TOC를 넣으려고 했는데, 노트북 화면 크기로 보니 우측 사이드바만으로도 화면이 꽉 차길래 (본문 너비를 조금 늘린 탓도 있음) 어쩔 수 없이 블로그 글 본문이 나오는 화면에서는 사이드바를 표시하지 않도록 하고 TOC를 표시하기로 했다.
기본 설정
뭔가 여러 방법이 있을 것 같아서 이걸 어떻게 구현하지,, 고민하다가 사이드바의 기본 css 설정을 display:none 으로 두고 본문 영역 div인 markdown-body 가 없을 때만 사이드바 css를 display:block 으로 바꿔주도록 했다.
모바일 뷰 고려
근데 이렇게 하면 모바일 뷰에선 어차피 TOC가 표시되지 못하는데 상단 메뉴를 눌러서 사이드바도 볼 수 없게 되어 너무 불편할 것 같았다. 그래서 matchMedia() 를 사용해 모바일 화면에서는 표시하고 있는 화면과 관계 없이 기존 사이드바가 표시되도록 했다.
반응형 고려
반응형 스킨이고, 위 설정은 페이지를 새로 불러올 때만 적용되므로 중간에 너비가 바뀌면 설정 값이 반영되지 않는 문제가 있어서 resize() 이벤트를 설정해 너비 값이 바뀔 때도 상황에 맞게 사이드바 혹은 TOC를 표시해주도록 코드를 추가했다.
TOC 위치 설정
TOC가 어디에 위치할 것인지, 스크롤되면 어떻게 처리할지도 문제였다. 그래서 최초에는 동적(absolute)으로 페이지에 붙어있게하고, 스크롤을 내리면 정적(fixed)으로 특정 위치에 붙어있도록 하여 스크롤 시 자연스럽게 TOC를 확인하고 원하는 목차로 이동할 수 있게 했다.
