[github blog] Hydejack 테마에서 toc 스크롤에 따른 목차, sticky 하는 방법

in Blog on Html, Blog, Hydejack, Sticky

개발자가 아닌 입장에서 깃허브 블로그 꾸미는 것은 참 어려운 일이다…

하지만 대단하신 분들이 참 많아서 그분들의 블로그를 참고하면 못할 건 없는 거 같다.

요즘 세상엔 노하우(know-how)보다 노웨어(know-where)가 중요하다고 한 듯이
서치 능력과 끈기를 가져보자!

오늘 기록할 내용은 블로그에 공부 내용과 코드 작성들을 하다 보니 스크롤이 어마 무시하게 내려가는데
toc (TABLE OF CONTENTS)는 움직이지 않아서 읽기가 많이 불편했다.

검색해 보니 Hydejack 테마에서는 유료라는 글들도 있고 다른 테마에서만 적용되는 글이 많아서 이것저것 시도를 엄청 하다가 포기할 지경에 이르러서

Sihyun님의 블로그 바로가기

블로그 하나를 찾게 되었고, 그곳에서 코드를 복사해왔다.

내 블로그에 어떻게 적용하였는지를 기록해 보고자 한다.

_includes/my-head.html 위치해 있는 파일에다가

<script type="module">
  document.querySelector('hy-push-state').addEventListener('load', () => {
      let tocElement = document.getElementById("markdown-toc");

      if(tocElement){
          let affixedDiv = document.createElement("div");
          affixedDiv.style.position = "relative";
          affixedDiv.style.top = "-1rem";
          tocElement.parentNode.insertBefore(affixedDiv, tocElement);

          let headerList = document.getElementsByClassName("permalink");
          let prevElement;
          window.addEventListener("scroll", () => {
              let hurdleTop = affixedDiv.getBoundingClientRect().top;
              if(hurdleTop <= 0) tocElement.classList.add("affix");
              else tocElement.classList.remove("affix");

              for(let i=0;i<headerList.length;i++){
                  if(headerList[i].getBoundingClientRect().top >= 0){
                  prevElement?.style.removeProperty("font-weight");
                  let tocId = "markdown-toc-" + headerList[i].parentNode.id;
                  prevElement = document.getElementById(tocId);
                  prevElement.style.fontWeight = "bold";;

                  break;
                  }
              }
          });
      }
  });
  </script>

위 코드를 추가해줬다.

끝이다…

복붙하면 끝나는 것을 몇시간의 시도와 서치 끝에 성공해냈다…

코드를 작성하신 분께 감사인사 드립니다.🥰