티스토리 Letter스킨 자동 목차 생성하기

카테고리 없음 2022. 7. 18. 16:42

728x90

벨로그와 다른 블로그를 사용했을 때, 편리했던 기능 중 하나인 자동 목차 기능을 티스토리에 적용해보자.

나는 티스토리의 Letter 스킨을 사용하고 있다.

Tocbot이라는 라이브러리 사용하여 자동 목차를 생성할 것이다.

1. <head></head> 안에 적용하기

head부분 안에 적용해야 할 것이 2개가 있다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>

css와 js파일을 연동시켜줘야 한다.

2. <body></body> 안에서 <s_permalink_article_rep> 밑에 추가하기

<div class="toc toc-fixed" ></div>

<s_permalink_article_rep> 밑에 위의 구문을 추가하자.

3. </body> 바로 위에 스크립트 추가하기

<script>
  let content = document.querySelector('.article_view')
  let headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
  let headingMap = {}

  Array.prototype.forEach.call(headings, function (heading) {
      let id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
                 .split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '')
      headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
      if (headingMap[id]) {
        heading.id = id + '-' + headingMap[id]
      } else {
        heading.id = id
      }
    })

  tocbot.init({
    tocSelector: '.toc',
    contentSelector: '.article_view',
    headingSelector:'h1, h2, h3',
    hasInnerContainers: false
  });

  $(document).ready(function(){
    $('.toc').addClass('toc-absolute');

    let toc_top = $('.toc').offset().top;
    $(window).scroll(function() {
      if ($(this).scrollTop() >= toc_top) {
        $('.toc').addClass('toc-fixed');
        $('.toc').removeClass('toc-absolute');
      } else {
        $('.toc').addClass('toc-absolute');
        $('.toc').removeClass('toc-fixed');
      }
    });
  });
</script>
</body>

바디 태그가 끝나는 지점 바로 위에 스크립트 구문을 추가해준다.

4. CSS 추가하기

/*tocbot*/

.toc-absolute {
  position: absolute;
  margin-top:165px;
}
.toc-fixed {
  position: fixed;
  top: 165px;
}

.toc {
  right: calc((100% - 850px) / 2 - 300px);
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
}

.toc-list {
  margin-top: 10px !important;
  font-size: 0.9em;
}

.toc > .toc-list li {
  margin-bottom: 10px;
}

.toc > .toc-list li:last-child {
  margin-bottom: 0;
}

.toc > .toc-list li a {
	text-decoration: none;
}

.toc-list-item .is-collapsed{
	    max-height: 3000px;
        } //스크롤 해야만 자동 목차가 보이는 현상 고치기

를 추가해주자.

위와 같이 진행했음에도 자동 목차가 생기지 않았다면,

아래와 같이 해보자.

자동 목차가 생기지 않았다면?

자바스크립트 부분

  let content = document.querySelector('.entry-content')
  
  contentSelector: '.entry-content',

</body> 바로 위에 적용하였던 자바스크립트 부분이 위처럼 되어있을 것이다.

해당 스크립트에서 .entry-content 이 부분을 .article_view 으로 수정해주자.

자동 목차가 중간에 끊기거나 등등의 문제가 발생한다면?

바로 위에 적용하였던 자바스크립트 부분에서 아래와 같은 내용을 삭제한다.

 $(window).scroll(function() {
      if ($(this).scrollTop() >= toc_top) {
        $('.toc').addClass('toc-fixed');
        $('.toc').removeClass('toc-absolute');
      } else {
        $('.toc').addClass('toc-absolute');
        $('.toc').removeClass('toc-fixed');
      }
    });

자동 생성을 커스텀 하고 싶다면?

처음 <head></head> 안에 추가시켰던 아래의 구문을 삭제하고 해당 css파일을 직접 입력한다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">

css 파일의 내용은 아래와 같다.

tocbot.css

.toc{overflow-y:auto}
.toc>.toc-list{overflow:hidden;position:relative}
.toc>.toc-list li{list-style:none}
.toc-list{margin:0;padding-left:10px}
a.toc-link{color:#333;height:100%}
.is-collapsible{max-height:1000px;overflow:hidden;transition:all 300ms ease-in-out}
.is-collapsed{max-height:0}
.is-position-fixed{position:fixed !important;top:0}
.is-active-link{font-weight:700}

// 활성화된 목차 색상 변경
.is-active-li a{font-weight:700; color: #4998ff;}


//활성화되지 않은 상태바 색상
.toc-link::before{background-color:#EEE;content:' ';display:inline-block;height:inherit;left:0;margin-top:-1px;position:absolute;width:2px}

//활성화된 상태바 색상
.is-active-link::before{background-color:#4998ff}

//hover했을 때, 색상 변경
.toc > .toc-list li a:hover{
color: #157ead;
}

제목 3은 바로 나오지 않고 상위 제목 부분의 내용을 읽어야 생성된다.

제목 3입니다.