ghost cms 에 목차(toc) 넣기
- 정광섭
큰 문서는 목차(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" />
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>
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>
이제 post 를 작성할 때 상단에 html 을 하나 삽입합니다.
그리고 html 에 다음 내용을 추가하고 저장합니다.
<aside class="toc"></aside>
그러면 상단에 다음과 같이 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>
그리고 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>
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>
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;
}
예로 toc.css 를 만들었으면 default.hbs 의 head 에 다음 내용을 추가합니다.
<head>
<link rel="stylesheet" type="text/css" href="{{asset "css/toc.css"}}" />
{{ghost_head}}
</head>