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

참고사이트 :: tistory-table-of-contents

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

freewind.kr/545

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

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

211122 추가)
스크롤 때 toc card가 블로그 상단 헤더를 침범(?)해서 고정하겠다고 60으로 수정했던 것 같은데 10으로 다시 수정해도 달라지는 게 없다. 뭐지-.-.- 암튼, 다시 10으로 롤백.

그 외, 미디어 쿼리를 83.75rem에서 76.25rem (1220px)으로 수정하고, toc card의 크기를 줄이고 좁히고 footer가 아니라 댓글 영역(?)에 들어서면 사라지게 등등 자잘하게 수정했다.


211122 추가)

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

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

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

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

.
.
</s_if_var_author>
<div id="wrap_toc"><div id="toc-elements-in-article"></div></div>
[##_article_rep_desc_##]
.
.

++ toc.js버전이 달라서 공개/추가된 소스와 비교하며 수정했다. 빠진 소스가 있을 수 있다-.-.-

+++ 소제목을 이사만루bold체로 바꿨다.