코드 한 줄로 더하는 Ghost 기능 세 가지
Ghost로 블로그를 운영하다 보면 목차, 읽기 진행 표시, 댓글처럼 있으면 좋을 기능이 아쉬울 때가 있습니다. 대부분은 테마 파일을 직접 고치거나 유료 서비스를 붙여야 해서 쉽게 손이 가지 않습니다. 그래서 테마는 건드리지 않고 설정의 코드 주입(code injection)만으로 붙는 작은 플러그인 세 가지를 만들었습니다. 셋 다 MIT 라이선스 오픈소스이며, 이 글에서 하나씩 소개합니다. 지금 이 글에 걸린 목차와 상단의 진행 바, 그리고 맨 아래 댓글이 바로 그 결과물입니다. 떠다니는 목차, ghost-toc-plugin 긴 글일수록 지금 어디쯤 읽고 있는지, 어떤 내용이 남았는지 한눈에 보이면 편합니다. ghost-toc-plugin은 본문의 h2, h3 제목을 읽어 화면 옆에 목차를 띄우고, 스크롤에 따라 현재 위치를 표시합니다. 화면이 좁아지면 자동으로 접혀서 본문을 가리지 않습니다. 설치는 스타일과 스크립트 한 쌍을 코드 주입에 넣는 것으로 끝납니다: <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-toc-plugin@1/toc.css" > <script src= "https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-toc-plugin@1/toc.min.js" data-content= ".gh-content" data-headings= "h2,h3" data-title= "목차" ></script> 위치와 폭, 강조색 같은 세부 옵션은 데모 페이지에서 직접 바꿔 보고 코드를 복사할 수 있습니다: https://ghost-toc-plugin.greedylabs.kr 읽기 진행 바, ghost-progress-plugin 글을 얼마나 읽었는지...