Jekyll 블로그 게시물에 목차를 추가하는 방법

목차는 세부 정보가 많은 긴 블로그 게시물에 포함할 때 유용한 구성 요소입니다. 독자가 블로그 게시물을 탐색하여 원하는 내용을 정확하게 찾을 수 있는 쉬운 방법을 제공합니다.

저는 이 Jekyll 블로그의 대부분의 블로그 게시물에 목차를 사용하는데 추가하기가 매우 쉬웠습니다.

이 게시물에서는 Jekyll에서 블로그 게시물에 목차를 설정하고 추가하는 과정을 안내합니다.

목차의 구조

이전에 블로그 게시물의 시작 부분에서 목차를 본 적이 있을 것입니다.

기본적으로 블로그 게시물 전체에 사용된 모든 제목을 가져와 한 곳에 다음과 같이 넣습니다.

블로그 게시물의 전체 구조와 콘텐츠에 대한 감각 제공

블로그 게시물의 다른 섹션으로 이동할 수 있습니다.

다음은 내 이전 블로그 게시물의 목차 예입니다. The 7 Step Process I Used To Build A Landing Page To Promote My Book

Jekyll에서 목차 설정하기

이 연습에는 목차 기능을 구성한 다음 실제로 관련 게시물에 목차를 추가하는 두 부분이 있습니다. 이 섹션의 첫 번째 부분을 살펴보겠습니다.

이 기능을 구현하는 가장 쉬운 방법은 플러그인을 추가하는 것입니다. 즉: jekyll-toc

Jekyll 프로젝트에 이 플러그인을 추가하려면 Gemfile에 다음을 추가하세요.

gem 'jekyll-toc'

다음으로 _config.yml 파일에 다음을 추가합니다.

plugins:
    - jekyll-toc

# TOC Settings
toc:
 min_level: 1
 max_level: 3
 list_class: toc
 list_class: toc__list
 sublist_class: toc__sublist

readme file in the jekyll-toc repo에서 TOC 설정에 대한 자세한 내용을 읽을 수 있지만 이것이 내가 사용하는 구성입니다.

이 코드 줄을 추가했으면 다음을 실행합니다.

bundle install
그러면 프로젝트에 필요한 종속성이 추가됩니다.

실제로 목차의 스타일을 지정하기 위해 다음은 내 styles.css에 추가한 내용입니다.

.toc__list:before {
 content: "Table Of Contents";
 font-weight: bold;
 font-size: 1.5rem;
}

.toc__list {
 border: 2px solid #eee;
 border-radius: 4px;
 line-height: 1.8rem;
 padding: 1rem 1.5rem;
 font-weight: 600;
}

.toc__sublist li {
 padding-left: 1.25rem;
}

.toc-h2:first-child {
 margin-top: 1rem;
}  

#toc a {
 color: #BE185D;
 text-decoration: underline;
}

#toc a:hover {
 color: #9D174D;
}

여기에서 마일리지가 다를 수 있으므로 원하는 대로 자유롭게 스타일을 지정할 수 있습니다. 구성 파일에서 목차 코드에 CSS 클래스를 추가하기 위해 'list_class' 및 'sublist_class'를 사용했음을 알 수 있습니다.

이를 통해 이러한 요소를 구체적으로 지정하여 스타일을 지정할 수 있었습니다.

블로그 게시물에 목차 추가

좋습니다. 목차 플러그인을 따라왔다면 이제 구성해야 합니다.

실제로 블로그 게시물에 목차를 추가할 때입니다.

여기서 첫 번째 단계는 목차를 표시하려는 위치에 액체 태그를 추가하는 것입니다.

제 경우에는 블로그 게시물에 사용하는 레이아웃인 _layouts/article.html 파일이 있습니다. 여기에 다음 코드를 배치합니다.

{% toc %}

다음 단계는 목차를 표시할 게시물을 플러그인에 알리는 것입니다. 이는 각 블로그 게시물의 머리말에서 수행됩니다.

서문에 포함해야 할 내용은 다음과 같습니다.

toc: true

그러면 해당 블로그 게시물의 목차가 표시됩니다.

모든 것이 설정되고 준비가 되어 있어야 하므로 Jekyll 프로젝트를 시작하고 어떻게 작동하는지 확인하기만 하면 됩니다. 지정한 블로그 게시물에 목차가 추가된 것을 볼 수 있습니다.

물론 config.yml의 toc 구성과 필요에 맞게 CSS 스타일을 조정할 수 있지만 이 구현은 저에게 아주 잘 맞습니다.

마무리

이 연습이 Jekyll 웹사이트에 목차를 추가하는 데 도움이 되었기를 바랍니다. 질문이나 의견이 있으면 알려주세요!

이 문서는 원래 내 웹사이트에 게시되었습니다: How To Add A Table Of Contents To Jekyll Blog Posts