TOC (table of contents) 적용

마크다운은 쓰지도 못하고 글이라고 체계적으로 쓰지도 못하고 것도 길게 쓰지도 못하면서 왜 toc 목차를 적용했냐면 그냥. 😓 된다길래 해봤다.

참고 :: tistory-table-of-contents

프라치노 스킨에 맞는 선택자 #article 등을 찾는 데는 티스토리 블로그에 TOC 추가하기 에서, toc card의 top위치 top: calc(15vh + 165px)는 티스토리 프라치노 공간 스킨에 TOC(목차) 추가하는 방법 에서 도움을 받았다.

https://freewind.kr/545

한 가지 도저히 해결 못했던 건 스크립트 파일에서 (블로그 상단 헤더에 해당하는 선택자) .area_head 대신 넣을 프라치노 스킨 선택자를 찾지 못했다는 거.. global-navigation도 아니고 gnb-inner도 아니고 나름 넣을 수 있는 거 다 넣었는데 안돼서 포기하고, 스크립트 파일의 197줄에 기재된 숫자를 수정했다. 모로 가도 서울로만 가면 되지 뭐.

top: target.offsetTop - 70, /* 10을 70으로 수정 */

그 외, toc card의 크기를 줄이고 좁히고 footer가 아니라 댓글 영역(?)에 들어서면 사라지게 등등 자잘하게 수정했다.

211122 추가)

모바일 등과 같은 작은 해상도에서는 상단에 toc가 출력된다.

참고 :: 티스토리(tistory) 블로그에 위키백과처럼 목차, 차례가 나오도록 만들기

사실 toc가 모바일에서 보일 필요는 없다고 생각했는데 toc를 쓴다는 것은 글이 길어진다는 것일 테고 그렇다면 상단에 출력될 소제목들이 그 글의 흐름을 알 수 있게 한다는 게 나쁘지 않아 보였다.

+ 적용방법 중 3. toc-elements-in-article 추가 에서, 프라치노 스킨에서 검색되는 두 번째 ##_article_rep_desc_## 위에 기재했다.

++ toc.js버전이 달라서 공개/추가된 소스와 비교하며 수정했다. 빠진 소스가 있을 수 있다-.-.-
+++ 소제목을 이사만루bold체로 바꿨다.