Show GN: oopy 노션 블로그: floating table of contents 커스텀 플러그인

oopy 노션 블로그에 적용할 수 있는 floating table of contents 입니다.

[특징]

1. notion에서 우측에 뜨는 floating table of contents의 UI와 똑같이 구현했습니다. (hover할 때 뜨는 팝오버 제외)
2. indicator를 클릭하면 스크롤 이동 / indicator로 현재 위치를 알려줍니다.

[설치 방법]

1. oopy 관리자 페이지 > html 편집 > body에 아래 script 태그 추가 후 저장
2. <script src="https://roseline124.github.io/custom-js/…;
3. 캐시 삭제 후 강력 새로고침

[oopy의 floating-toc와 다른점]

oopy에서 만든 실험적 기능의 floating-toc도 존재합니다.
https://www.oopy.io/ko/guides/tips-and-tricks/floating-toc

이 커스텀 플러그인은 우피의 floating-toc와 달리

1. table of contents 블럭이 없어도 heading을 감지해서 indicator로 표시해줍니다.
2. page 별로 설정해주지 않아도 heading이 있는 모든 페이지에서 동작합니다.
3. floating-toc는 heading tag의 텍스트를 모두 보여주지만, 이 플러그인은 콘텐츠 영역을 침범하지 않기 위해 indicator에 hover 시 4~6글자만 노출해서 보여줍니다. (단점)

[guseod24]

• 지금은 노션 popover도 똑같이 재현했습니다!