GitHub Pages 블로그 - toc

GitHub Pages에서 Table of Contents를 보여주는 toc를 설정하고 커스텀하는 법

기본 설정

모든 포스트에 toc를 적용하고 싶다면 _config.yml의 defaults에 아래와 같이 추가하면 된다.

# Defaults
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      author_profile: true 
      read_time: true
      comments: # true
      share: # true
      related: true
      show_date: true #여기서부턴 내가 추가
      toc: true # toc 사용
      toc_sticky: true # toc가 스크롤에 따라 따라옴, 이걸 sticky라고 함
      toc_label: Table of Contents # toc의 제목
      toc_icon: " " # toc의 제목옆의 아이콘

_config.yml 말고도 각 포스트의 YML에 이 설정들을 넣으면 포스트마다 설정이 가능하기도 하다.

toc 스타일 설정

_navigation.scss을 아래와 같이 수정하면 커스텀이 가능하다.

_navigation.scss

.toc { // 전반적인 toc 목록 커스텀
  font-family: $amphasis;
  color: $gray;
  background-color: $background-color; 
  //border: 1px solid $border-color; // 세로줄 없앰
  border-radius: $border-radius;
  -webkit-box-shadow: $box-shadow;
  box-shadow: $box-shadow;

  .nav__title { // toc 제목 커스텀
    color: rgb(183, 183, 183); // 0, 0, 0 -> 183, 183, 183
    font-size: $type-size-6;
    background: $background-color; // $primary-color -> $background-color
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
  }

  // Scrollspy marks toc items as .active when they are in focus
  .active a {
    @include yiq-contrasted($active-color); // 그  toc에 갔을 때 컬러
  }

…

font-family 추가, 너비 조정

.toc__menu {
  margin: 0;
  padding: 0;
  width: 150%; // 100% -> 150%, _config.yml에서의 width에 영향X, 오른쪽으로 커짐
  list-style: none;
  font-size: $type-size-6;

  @include breakpoint($large) {
    font-size: $type-size-7;
  }

  a {
    display: block;
    padding: 0.25rem 0.75rem;
    color: $muted-text-color;
    font-weight: bold;
    line-height: 1.5;
    border-bottom: 1px solid $border-color;
    font-family: $amphasis;

    &:hover {
      color: $text-color;
    }
  }

  li ul > li a {
    padding-left: 1.25rem;
    font-weight: normal;
    font-family: $sans-serif;
  }

Header를 toc에서 제외시키기

Header 밑에 {: .no_toc }를 추가하면 됨.