[Ghost] 목차를 보기 좋게 Ghost에서 Tocbot을 사용해보자

<section class="gh-content gh-canvas">
  {{! The TOC will be inserted here }}
  <aside class="gh-sidebar"><div class="gh-toc"></div></aside>
  
  {{content}}
</section>

<!-- Tocbot CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.32.2/tocbot.css">

<!-- Tocbot Additional Styles -->
<style>
  .gh-sidebar {
    display: none;
  }
  
  .gh-content {
    position: relative;
    grid-template-columns: [full-start] minmax(4vw,auto) [wide-start] minmax(auto,290px) [main-start] min(720px,calc(100% - 8vw)) [main-end] minmax(auto,290px) [wide-end] minmax(4vw,auto) [full-end];
  }
  
  .gh-toc > .toc-list {
    position: relative;
  }
  
  .toc-list {
    overflow: hidden;
    list-style: none;
    padding-left: 0;
  }
  
  .toc-list > .toc-list-item {
    padding-left: 0;
  }

  .toc-list > .toc-list-item > .toc-list {
    padding-left: 35px;
  }
  
  .toc-list-item > a {
    text-decoration: none;
  }
  
  .toc-link::before {
    content: none;
  }
  
  .is-collapsible {
    overflow: hidden;
    max-height: 1000px;
    transition: all 0.5s cubic-bezier(1, 0, 1, 0);
  }
  
  .is-collapsed {
    max-height: 0;
    transition: all 0.5s cubic-bezier(0, 1, 0, 1);
  }

  /* 화면 넓이가 1300px 이상일 때만 목차 표시 */
  @media (min-width: 1300px) {
    .gh-sidebar {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      margin-top: 4vmin;
      grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
    }

    .gh-toc {
      position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
      top: 4vmin;
      font-size: 1.5rem;
    }

    .gh-toc::before {
      content: "On this page";
      display: flex;
      font-weight: bold;
      margin-bottom: 12px;
    }
  }
</style>

<!-- Tocbot JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.32.2/tocbot.min.js"></script>

<!-- Initialize Tocbot after you load the script -->
<script>
  // Change header IDs to toc-head-
  let id = 1;
  $('.gh-content').children('h1, h2, h3, h4').each(function () {
      let hyphenated = 'toc-head-' + id;
      $(this).attr('id', hyphenated);
      id++;
  });
  
  tocbot.init({
    // Where to render the table of contents.
    tocSelector: '.gh-toc',
    // Where to grab the headings to build the table of contents.
    contentSelector: '.gh-content',
    // Which headings to grab inside of the contentSelector element.
    headingSelector: 'h1, h2, h3, h4',
    // How many heading levels should not be collapsed.
    collapseDepth: 3, // 0~6
    // For headings inside relative or absolute positioned containers within content.
    hasInnerContainers: true,
    // To handle fixed headers with tocbot. For example, the options needed for a 40px
    headingsOffset: 40,
    scrollSmoothOffset: -40
  });
</script>