Ghost 테마에 링크 공유 버튼 만들기

Ghost를 이전할 블로그 플랫폼으로 선택하고 알아보는 중에 제일 중요하다고 생각하는 기능이 없었다. 바로 '링크 공유 버튼' 이다. 특히나 Ghost는 특정 글의 링크는 제목으로 구성되기 때문에 주소가 길다. 남에게 공유할 때 쉽게 입력할 수 없단 말이다. 그러므로 당연히 현재 글 링크를 복사하여 공유해야 한다는 것이다.

그래서 이번 글에서는 링크 공유 버튼을 만드는 과정을 소개하고 완성한 벙법도 소개하도록 하겠다.

실패한 방법

기본으로 제공되는 여러 테마를 찾아보았는데 모두 글 주소를 복사하는 버튼이 없다. 그래서 직접 만드는 수 밖에 없는 것 같아서, Ghost Admin에 있는 Code Injection을 통해서 <script>을 넣어봤다.

그런데, 진짜 사이트의 Header 부분에 들어가는 것이 아니겠냐... 많이 당황했다. 그럼 자동으로 footer에 넣는 것도 의미가 없는 것이니 다른 방법을 찾았다. 바로 테마를 직접 수정하는 것이다.

테마 직접 수정

준비물

• 기반이 될 테마 파일
• VSC 같은 파일 에디터
• Node, Yarn

수정하기

나는 Ghost에서 기본으로 제공하는 테마인 Journal이라는 테마를 사용했다. 이 테마는 Github에 소스도 공개되어 있다. 그리고 MIT 라이선스이다. 그래서 이 소스를 기반으로 수정했다.

테마들은 handlebars라는 템플릿 엔진을 기반으로 만들어졌다. 마치 Java에서 Thymeleaf와 Mustache와 닮아보인다. 그래서 handlebars의 문법만 안다면 간단하게 변경할 수 있는 것이다.

나는 제목 밑과 글 제일 아래에 공유 아이콘과 함께 복사 버튼을 만드는 것이 목표였다. 공유 아이콘은 Bootstrap을 사용했다.

핵심은 post.hbs 파일에 있다. 이 파일이 글을 보여주는데 템플릿으로서 사용되고 있는 것이다.

<script>
    function copyCurrentPostLink() {
        const postUrl = window.location.href;
        navigator.clipboard.writeText(postUrl).then(() => {
            alert("현재 글 링크가 복사되었습니다.");
        }).catch(err => {
            console.error("링크 복사에 실패하였습니다.\n에러:", err);
        });
    }
</script>

위 코드를 pages.hbs 최하단에 넣는다.

<div class="copy-link-container" style="text-align: right; margin-top: 20px;">
  <button class="copy-link-btn" onclick="copyCurrentPostLink()" style="background: none; border: none; cursor: pointer;">
    <i class="bi bi-share-fill" style="font-size: 24px; color: black;"></i>
  </button>
</div>

그 다음 위 코드를 공유 버튼을 삽입하고 싶은 위치에 삽입하는 것이다.

제목 밑에 삽입하고 싶다면 위와 같은 위치에 삽입하면 된다.

본문 밑에 삽입하고 싶다면 위와 같은 위치에 삽입하면 된다. 만일, 수정한 파일 전체를 보고 싶다면 여기에서 확인하면 된다.

그리고 실제 사이트에 적용하고 싶다면, zip으로 압축하면 된다.

yarn install
yarn zip

압축하게 되면 dist/<테마 이름>.zip으로 만들어지고 이 zip 파일을 Ghost에 업로드하면 적용된다.