길이가 긴 글을 쓰지 않으면 필요없는 기능이지만 언제나 짧게만 쓸 수는 없으니..
들어가며
글에 TOC 창이 따라다니도록 하고 싶었다. 많은 코드들이 있지만, 내가 적용한 것을 정리해 보겠다. 결과화면은 다음과 같다. 왼쪽 화살표 부분이 추가한 toc 가 되겠다.
include/toc.html 추가하기
진짜 고민이 많다. 하지만 깃허브 페이지에서 기본으로 제공하는 것만을 쓰는 것이 나의 목표이니 플러그인이나 js 를 최대한 안쓰면 좋을 것 같아서 열심히 구글링 하였다. 테마를 잘 썼다면 그냥 되는 기능인데, 기본 테마를 가지고 하다 보니 기능을 하나씩 찾아서 추가해야 하네. 무튼 선정된 검색 결과는,
A Jekyll TOC without Plugins or JavaScript
- TL;DR - The code is available on GitHub: allejo/jekyll-toc
README.md를 잘 읽어봐야 하지만 그냥 쉽게, 여기 toc.html 내용을 복사해서 자신의 include/ 밑에 toc.html 을 만들어 넣는다.
CSS 미리 준비하기
코드에 사용하게 될 CSS 코드를 아래 것을 참고해서 자신의 css 파일에 추가해 둔다.
layout/post.html toc 블럭 추가
toc 를 넣고 싶은 페이지나 템플릿 레이아웃에 아래와 같은 코드를 추가하면 된다. 설명은 길게 하지 않지만 왠만하면 대충 잘 돌아 간다.
본문의 오른편에 딱 붙어서 toc 블록이 따라다니도록 구현되어 있다. 코드는 gist 코드를 추가한다.
주의할 점은 반드시 {{ content }} 가 포함된 div 바로 밑에 두도록 해라. 그래야 본문이라고 불리는 곳의 오른쪽에 딱 붙어 다닌다.
마무리
코드 설명은 toc.html 이 엄청 복잡해 보인던데, 나머지는 딱 보면 아는 수준이라 딱히 설명할 부분은 없어 보인다. toc.html 은 content html을 소스를 입력받아서 <h 태그로 시작하는 부분을 찾아내서 toc 테이블을 만드는 소스로 보인다. 여러가지 옵션이 있으니 편리하게 사용이 가능하다. 장점은 따로 지킬 플러그인 설치나 js 의 힘을 빌리지 않아도 된다는 것!
친절하지 않은 글이지만 큰 힘 안들이고 남긴 흔적이 도움이 될 때도 있을 것이라 기대한다.
ps) 마크다운 파일 내에서 toc 보기
마크다운 문서내에서 toc 보려면 너무 간단하다. 아래와 같이 적으면 그 부분에 toc 블럭으로 대체되어서 턱 나타난다. 마크다운 렌더링 엔진이 알아서 쭉쭉!
- toc
{: toc }