1. Ghost 블로그에 코드 복사 버튼과 목차 기능 추가하기

블로그를 운영하다 보니 코드 복사가 불편하고, 긴 포스트에서 원하는 섹션을 찾기 어려웠다. 그래서 두 가지 기능을 추가했다.

코드 블록 복사 버튼

왜 필요했나

코드를 복사하려면 마우스로 드래그해야 하는데, 특히 모바일에서는 불편했다. 다른 개발 블로그들처럼 복사 버튼이 있으면 좋겠다고 생각했다.

어떻게 구현했나

모든 pre code 요소를 찾아서 각각에 복사 버튼을 추가했다. navigator.clipboard API를 사용하고, 호버 시에만 버튼이 보이도록 했다. 복사 성공하면 체크 아이콘으로 바뀌어 피드백을 준다.

codeBlocks.forEach(function (codeBlock) {
  const copyButton = document.createElement("button");

  copyButton.addEventListener("click", function () {
    navigator.clipboard.writeText(codeBlock.textContent);
  });

  pre.appendChild(copyButton);
});

결과

코드 블록에 마우스를 올리면 우측 상단에 복사 버튼이 나타나고, 클릭하면 바로 복사된다.

코드 블록 호버 전/후복사 버튼 클릭 후 체크 아이콘

목차(Table of Contents) 기능

왜 필요했나

긴 포스트를 작성하다 보니 원하는 섹션을 찾기 어려웠다. 스크롤을 계속 해야 하고, 현재 위치를 파악하기도 어려웠다. 사이드바에 sticky 목차가 있으면 좋겠다고 생각했다.

어떻게 구현했나

포스트의 헤딩(H2, H3, H4)을 자동으로 감지해서 목차를 만든다. JavaScript로 헤딩을 순회하면서 계층 구조를 파악하고, 각 헤딩에 고유 ID를 부여한다. 포스트 URL을 기반으로 ID를 만들어서 같은 헤더 텍스트가 여러 포스트에 있어도 충돌이 없다.

.tag-sidebar-wrapper {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.table-of-contents-wrapper {
  position: sticky;
  top: 20px;
  width: 100%;
}

스크롤에 따라 현재 섹션을 하이라이트하고, URL 해시도 지원해서 특정 섹션을 공유할 수 있다.

결과

사이드바에 목차가 추가되어 포스트 구조를 한눈에 볼 수 있고, 원하는 섹션으로 바로 이동할 수 있다. 스크롤해도 목차가 상단에 고정되어 있어서 현재 위치를 파악하기 쉽다.

전체 레이아웃 (사이드바에 목차)Sticky 상태섹션 클릭 시 스크롤현재 섹션 하이라이트URL 해시

추가된 파일

assets/js/lib/
├── code-copy.js
└── table-of-contents.js
assets/css/misc/
├── code-copy.css
└── table-of-contents.css
partials/
└── table-of-contents.hbs

마무리

두 기능을 추가하면서 Ghost 테마 구조를 더 잘 이해하게 되었다.
앞으로도 불편한 점을 계속 개선해나갈 예정이다.