카테고리 없음

코드 한 줄로 더하는 Ghost 기능 세 가지

GreedyLabs Demo 2026. 7. 5. 13:36

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-toc-plugin: Floating table of contents for Ghost

 

ghost-toc-plugin.greedylabs.kr

 

읽기 진행 바, ghost-progress-plugin

글을 얼마나 읽었는지 알려주는 얇은 진행 바입니다. ghost-progress-plugin은 본문의 높이를 기준으로 스크롤 위치를 계산해, 화면 위(또는 아래)에 채워지는 바로 보여줍니다. 색은 기본적으로 테마 강조색을 따르므로 별도 설정 없이도 사이트와 자연스럽게 어울립니다.

 

코드 주입에 넣을 스니펫은 다음과 같습니다:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.css">
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.min.js"
        data-content=".gh-content"
        data-position="top"></script>

 

바의 위치(위/아래), 두께, 색은 데모에서 바꿔 볼 수 있습니다: https://ghost-progress-plugin.greedylabs.kr

 

ghost-progress-plugin: Reading progress bar for Ghost

 

ghost-progress-plugin.greedylabs.kr

 

원하는 위치의 댓글, ghost-giscus-plugin

giscus는 GitHub Discussions를 댓글로 쓰는 좋은 도구지만, Ghost 테마에서는 댓글이 붙을 자리를 잡기가 번거롭습니다. ghost-giscus-plugin은 공식 giscus 스크립트는 그대로 두고, 댓글이 마운트될 위치만 코드 한 줄로 지정합니다. 본문 바로 뒤에 두거나, 테마의 기존 댓글 영역을 그대로 대체할 수 있습니다.

한 가지 순서만 지키면 됩니다. 이 플러그인이 giscus보다 먼저 나와야 합니다. 자리를 먼저 만들어 두어야 giscus가 그 자리에 댓글을 얹기 때문입니다:

<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
        data-target=".gh-content"
        data-place="after"
        data-class="gh-comments gh-canvas"
        data-padding-bottom="48"></script>

<script src="https://giscus.app/client.js"
        data-repo="[저장소]"
        data-repo-id="[REPO ID]"
        data-category="[카테고리]"
        data-category-id="[CATEGORY ID]"
        data-mapping="pathname"
        data-theme="preferred_color_scheme"
        crossorigin="anonymous"
        async></script>

 

giscus 값 발급과 위치 옵션은 데모에서 확인할 수 있습니다: https://ghost-giscus-plugin.greedylabs.kr

 

ghost-giscus-plugin: place giscus comments anywhere

 

ghost-giscus-plugin.greedylabs.kr

 

세 가지를 함께 설치하기

셋은 서로 독립적이라 필요한 것만 골라 써도 되고, 한꺼번에 붙여도 충돌하지 않습니다. Tistory 관리자의 꾸미기, 스킨 편집, html 편집 순서로 들어가 아래 스니펫을 붙여 넣으면 이 블로그처럼 목차와 진행 바, 댓글이 모두 동작합니다. giscus 태그의 값만 본인 저장소 정보로 바꿔 주세요. 다음 코드는 실제로 이 블로그의 <footer> 맨 처음에 적용된 코드입니다.

<!-- 목차 -->
<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=".article-view" data-headings="h2,h3" data-title="목차"></script>

<!-- 읽기 진행 바 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.css">
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.min.js"
        data-content=".article-view" data-position="top"></script>

<!-- 댓글 위치 지정 + 공식 giscus -->
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
        data-target="#entry1Comment"
        data-place="replace"
        data-padding-bottom="48"></script>
<script src="https://giscus.app/client.js"
        data-repo="GreedyLabs/giscus-comment"
        data-repo-id="R_kgDOTHbOrw"
        data-category="ghost-plugins"
        data-category-id="DIC_kwDOTHbOr84DAhRe"
        data-mapping="specific"
        data-term="plugin-tistory-demo"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="ko"
        data-loading="lazy"
        crossorigin="anonymous"
        async></script>

 

마치며

세 플러그인 모두 테마 수정 없이, 빌드 과정 없이, 코드 주입 한 번으로 붙는 것을 목표로 만들었습니다. jsDelivr CDN으로 배포되어 별도 호스팅도 필요 없습니다. 소스와 이슈는 GitHub의 GreedyLabs 조직에 공개되어 있으니 버그 제보나 제안은 언제든 환영합니다. 도움이 되었다면 커피 한 잔 부탁드려요.

'카테고리 없음'의 다른글

  • 현재글코드 한 줄로 더하는 Ghost 기능 세 가지

티스토리툴바