Ghost 블로그에 목차(TOC)를 통합하면 긴 기사를 원활하게 탐색할 수 있어 독자의 경험이 크게 향상됩니다. 이 튜토리얼은 게시물에 있는 제목에서 TOC를 자동으로 생성하는 JavaScript 플러그인인 TOCBOT을 사용하여 모든 Ghost 테마에 TOC를 추가하는 과정을 안내합니다.
Ghost에 TOCBOT 통합
TOCBOT은 게시물 제목에서 TOC를 효율적으로 구성합니다. 설치를 위해 다음 간단한 단계를 따르세요.
- Ghost 관리자 대시보드에 로그인하고 이동하세요
Settings > Code injection. - 해당 영역에
Site Header필요한 TOCBOT 스크립트와 스타일시트를 삽입합니다.
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.css"rel="stylesheet">
- 다음으로, 섹션에서
Site Footer다음 스크립트를 사용하여 TOCBOT을 초기화합니다.
<script>
document.addEventListener('DOMContentLoaded', function() {
tocbot.init({
tocSelector: '.toc',
contentSelector: '.post-content',
headingSelector: 'h1, h2, h3, h4',
scrollSmooth: true
});
});
</script>
contentSelector게시물 콘텐츠에 지정된 클래스와 일치하는지 확인하세요 . 일반적으로 사용되는 클래스에는 .post-content, .gh-content, 또는 가 있습니다 .c-content.
- 마지막으로
Code injection설정의 변경 사항을 저장합니다.
게시물에 TOC 플레이스홀더 삽입
기사 내에서 TOC를 보여주려면 원하는 위치에 플레이스홀더를 넣어야 합니다.
- TOC를 포함하려는 게시물을 편집하세요.
/html편집기에 입력하여 원하는 위치에 HTML 카드를 추가하세요 .- HTML 카드에 다음 코드를 포함하세요.
<div class="toc"></div>
이 코드 조각은 TOC를 위한 공간을 설정합니다. 게시물에 액세스하면 TOCBOT이 콘텐츠 제목에서 파생된 동적으로 생성된 TOC로 이 공간을 채웁니다.
TOC 모양 사용자 지정
TOC의 모양을 개인화하여 테마 디자인과 더 잘 일치시킬 수 있습니다.
Site Header아래 에서 태그Settings > Code injection로 묶인 사용자 정의 CSS 스타일을 추가합니다<style>.
<style>
. toc {
padding: 20px;
border: 1px solid #e0e0e0;
background-color: #f9f9f9;
border-radius: 5px;
}
. toc a {
text-decoration: none;
color: #333;
}
. toc a:hover {
text-decoration: underline;
}
</style>
귀하의 선호도에 맞게 이러한 스타일을 자유롭게 조정하세요.
다양한 테마에 맞게 수정
테마가 콘텐츠 섹션에 대해 다른 클래스 이름을 사용할 수 있으므로 contentSelectorTOCBOT 설정의 클래스 이름이 테마의 콘텐츠 클래스와 일치하는지 확인하세요.
- 열려 있는 게시물을 먼저 살펴보고 테마를 검사하세요.
- 게시물 내용을 마우스 오른쪽 버튼으로 클릭하고
Inspect브라우저의 개발자 도구를 선택하세요. - 게시물 내용이 포함된 요소와 연관된 클래스 이름(예: )을 찾으세요
.post-content.
contentSelector찾은 내용을 토대로 TOCBOT 스크립트 를 업데이트하세요 .
스티키 TOC 만들기
독자가 스크롤하는 동안 TOC가 보이도록 하려면 TOC를 고정으로 설정할 수 있습니다.
- 에서 태그
Site Header내에 이 CSS를 추가하세요<style>:
<style>
. toc {
position: sticky; top: 20px;
}
</style>
이렇게 하면 TOC가 뷰포트와 관련하여 배치되어 사용자가 게시물을 스크롤할 때에도 계속 표시됩니다.
이러한 지침을 구현하면 Ghost 블로그에 기능적인 목차를 추가하여 게시물 전체에서 탐색 기능과 독자 상호 작용을 향상시킬 수 있습니다.
답글 남기기