큰 문서는 목차(table of contents) 를 제공하면 독자가 전체 구조를 파악하고 필요한 부분만 읽는등 더 쉽게 접근할 수 있습니다.

고스트는 목차 기능이 별도로 제공되지 않아서 다음 방법으로 직접 설정해야 합니다.


코드

사이트 header 에 추가

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.13.5/tocbot.min.css" integrity="sha512-SFw7k74K3983tyOlJIHa8atr9Ppef3Kix5cmifwzU7ZdtU2E0FRuOVRtd3ENpMJ8sNCie5hlb/0j23efcdQJXA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
XML


code inject js

<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.13.5/tocbot.min.js" integrity="sha512-Pb1ryJBQ8yanWB5d4BaW6AyQsPNkB3m9dVNLpwYeyQA3jxM/NJtLXsB0DU4VOD0EBbJBXm8LOnwsVnQCdClwgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
XML


footer 에 다음 내용을 추가합니다. contentSelector 는 theme 종류에 따라 다를 수 있는데 기본 테마인 casper 는 post-content 이고 제가 사용하는 theme 는 gh-content 였습니다. 

자세한 건 chrome 개발자 모드에서 해당 selector 를 확인해 보세요.

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


이제 post 를 작성할 때 상단에 html 을 하나 삽입합니다.

그리고 html 에 다음 내용을 추가하고 저장합니다.

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

그러면 상단에 다음과 같이 toc 가 추가된 것을 볼 수 있습니다.


theme 에 넣기

위 방법은 빠르게 목차를 넣을 수 있지만 예쁘지 않고 customizing 이 불가능하므로 더 유연하게 만들려면 직접 테마를 수정해야 합니다.

사용하는 테마의 default.hbs 의 head 영역에 css link url 을 추가합니다.

<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.13.5/tocbot.min.css" integrity="sha512-SFw7k74K3983tyOlJIHa8atr9Ppef3Kix5cmifwzU7ZdtU2E0FRuOVRtd3ENpMJ8sNCie5hlb/0j23efcdQJXA==" 	crossorigin="anonymous" referrerpolicy="no-referrer" />

	{{ghost_head}}
</head>
XML

그리고 default.hbs 의 body 영역에 css link url 을 추가합니다.

<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.13.5/tocbot.min.js" integrity="sha512-Pb1ryJBQ8yanWB5d4BaW6AyQsPNkB3m9dVNLpwYeyQA3jxM/NJtLXsB0DU4VOD0EBbJBXm8LOnwsVnQCdClwgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        tocbot.init({
            tocSelector: '.toc',
            contentSelector: '.post-content',
            /*contentSelector: '.gh-content', */
            hasInnerContainers: true
        });
    </script>

    {{{block "scripts"}}}
</body>
XML


post.hbs 에서 content 영역을 찾은 후에 그 위에 toc class 를 추가합니다. (content 영역은 테마마다 다를 수 있으니 크롬 개발자 모드에서 영역을 확인해 보세요)

<article class="{{post_class}} single">
    {{> post-header tag="h1" show_meta=true single=true}}
    {{> post-media same_height=false with_caption=true}}
	{{!-- 추가 --}}
    <aside class="toc-container">
        <div class="toc"></div>
    </aside>
    <div class="post-content kg-canvas u-text-format">
        {{content}}
    </div>

    {{> post-tags}}
</article>
CODE


toc 에 사용할 css 파일(예: toc.css)을 만들어 주고 테마의 assets/css/ 폴더에 저장합니다.

.post-content h2,
.post-content h3 {
    outline: none;
}
body {
    overflow: visible;
}
.post-full-content {
    display: grid;
    grid-template-columns: 1fr 0.2fr;
    padding: 0 0 6vw;
    margin: 0;
}
.toc-container {
    order: 1;
}
.toc-container .toc {
    position: sticky;
    top: 70px;
    min-width: 260px;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    	Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    font-size: 1.6rem;
    line-height: 1.6em;
    padding: 0 0.8em;
}
.is-active-link::before {
    background-color: #3eb0ef;
}
ol.toc-list {
    margin: 0;
}
CSS


예로 toc.css 를 만들었으면 default.hbs 의 head 에 다음 내용을 추가합니다.

<head>
	<link rel="stylesheet" type="text/css" href="{{asset "css/toc.css"}}" />

    {{ghost_head}}
</head>
XML


Ref