지금 이 블로그는 CMS 중 고스트라는 툴로 운영되고 있습니다. 글쓰기에만 집중할 수 있어서 참 재미있어요. 워드프레스와는 또다른 매력이 있는 듯 합니다. 고스트 블로그(Ghost blog)에 목차를 넣고 싶은데 한국어로 된 자료가 별로 없어서 Ghost 공식 튜토리얼의 How to add a table of contents to your Ghost site를 참조했습니다.

고스트 블로그 목차

어떤 방법을 선택할 것인가?

고스트 튜토리얼에 따르면 목차를 넣는 방법은 두 가지입니다.

  1. 관리자 화면의  Code injection에서 추가하는 방법
  2. 테마 파일을 수정한 뒤 업로드 하는 방법

처음에는 테마파일을 수정해보려고 했는데 생각처럼 잘 되지 않아서 관리자 화면에서 Code inection을 추가하고 출력할 위치를 테마파일에서 수정 후 업로드 하는 방식을 사용했어요.

toc 라이브러리 추가하기

먼저 toc 라이브러리를 추가해야 합니다. toc은 Table of contents(목차)의 줄임말입니다. 저는 고스트 튜토리얼의 안내에 따라 cdnjs의 tocbot을 추가했어요.

4.12.2 버전의 tocbot 라이브러리를 추가할 수 있습니다. 원하는 버전이 있다면 버전 정보를 변경하셔도 좋아요. tocbot.min.js 파일과 tocbot.css 의 주소를 복사합니다. 코드 스니펫 </> 을 복사하는게 아닙니다.

tocbot 라이브러리 주소 복사

하단의 코드를 code injection의 Site Header 섹션에 붙여넣을 수 있습니다. 사용 전에는 버전을 꼭 확인해주세요.

<!-- toc link tag -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.2/tocbot.css" />

스크립트 코드는 Site Footer 섹션에 붙여넣습니다.

<!-- toc script tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.2/tocbot.min.js"></script>

위의 코드를 각각 Header 와 Footer 에 붙여넣었다면 Save를 눌러 저장합니다.

라이브러리 활성화 하기

toc 라이브러리를 추가하고 난 뒤에는 라이브러리를 활성화해야 합니다. tocbot 스크립트 코드 아래에 다음의 코드를 추가합니다.

<script>
    tocbot.init({
        tocSelector: '.toc',
        contentSelector: '.post-content',
        hasInnerContainers: true
    });
</script>

contentSelector에서 지정한 .post-content 는 어떤 콘텐츠 내용을 선택해서 목차에 보여줄 것인지를 정하는 부분입니다. 사용하는 테마에 따라 다를 수 있지만 제가 현재 사용하는 Ruby테마나 고스트 기본 테마인 Casper 등의 구조에서는 글의 본문 위치가 .post-content 입니다. 해당 div 클래스의 이름은 웹 브라우저 상의 개발자 도구를 통해 쉽게 알 수 있습니다.

Ghost Ruby 테마 본문 코드

목차 표시하기

이제 목차를 어디에 표시할 것인지를 정해야 하는데요. 테마를 수정하고 싶지 않다면 글 작성시 원하는 위치에 HTML 카드를 추가해서 목차 표시 코드를 삽입할 수 있습니다.

<aside class="toc"></aside>

지금 사용중인 Ruby 테마는 본문의 레이아웃이 왼쪽에 관련글 피드가 나오고 오른쪽에 태그 위젯과 최근 포스트 목록 위젯이 보이는 구조입니다. 본문의 폭이 좁은 편이라서 본문 내에 목차를 삽입하는 방식은 마음에 들지 않더라고요. 하나하나 글마다 넣는 것도 번거로운 일이고요.

그래서 사이드바 위젯 상단에 목차를 넣기로 결정했습니다. 테마 수정을 위해서 먼저 사용중인 테마를 다운로드 합니다. 고스트 관리자 화면에서 Design 메뉴에 들어가면 하단에 사용중인 테마를 찾을 수 있어요. 다운로드를 하고 압축파일을 해제한뒤 post.hbs 파일을 수정합니다. {{> widgets/widgets}} 코드를 검색하여 해당 코드 위에  목차 표시 코드를 넣습니다.

<div class="sidebar-column col-lg-3 hidden-xs hidden-sm hidden-md">
    <aside class="toc"></aside>
    {{> widgets/widgets}}
</div>

파일을 저장한 뒤 테마 폴더 내의 모든 파일을 선택하여 압축합니다. 파일명은 처음 다운로드 했던 테마 zip 파일과 동일하게 설정한 뒤 Design 메뉴 하단의 Upload a theme 를 선택하여 압축파일채로 업로드 하세요. 파일명이 동일하다면 활성화 되어있는 테마에 덮어씌워 바로 적용됩니다.

기본 테마인 Casper를 사용하고 있다면 튜토리얼의 안내대로 설정하시면 쉽게 목차를 넣을 수 있습니다.

요약하기

Site Header에 코드 추가

Code injection에서 다음의 코드를 Site Header에 추가합니다.

<!-- toc link tag -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.2/tocbot.css" />
<style>
  .toc {
    margin-bottom: 10px; /* 목차 하단 여백 설정 */
  }
.is-active-link::before {
    background-color: #E0BFE6; /* 목차 앞에 표시되는 바 색상 변경(선택) */
}
</style>

Site Footer에 코드 추가

Code injection에서 다음의 코드를 Site Footer에 추가합니다.

<!-- script tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.2/tocbot.min.js"></script>
<script>
    tocbot.init({
        tocSelector: '.toc',
        contentSelector: '.post-content',
        hasInnerContainers: true
    });
</script>

목차 표시 코드 추가

원하는 위치에 목차 표시 코드를 추가합니다.

<aside class="toc"></aside>

마치며

고스트 블로그에 목차를 넣으니 더 마음에 드는 디자인이 되었습니다. Ghost.org에서 제공하는 튜토리얼과 가이드를 학습하면 테마 디자인을 원하는대로 수정하는데 도움이 될 것입니다.