Next.js 블로그 TOC 배너 만들기

Next.js로 블로그 만들기
2022.11.19
2분
  1. 배너 위치 산정하기
    • absolute로 위치를 잡아주고 fixed로 스크롤에 고정되도록 한다.
  2. Content에서 Toc 추출하기
  3. slug 만들기
  4. 마크업 구성하기
    • <a href="#..."/>를 활용해서 링크를 연동한다.
    • slug # 개수에 따라 깊이를 부여하고 tailwind docs처럼 스타일를 부여해보자.
  5. 스타일 조정하기
    • scroll-margin-top을 element margin-top에 맞추면 보기 좋게
  6. 스크롤에 따라 현재 headings에 하이라이트한다.

배너 만드는 방법

  1. absolute속성에 left-full로 레이아웃 잡기
<div className="absolute left-full">
  <div className="fixed top-12 bottom-0 ml-8 h-full w-80 overflow-y-auto p-8">
    <TocBanner tableOfContents={tableOfContents} />
    <div className="">
      <ThemeSwitch />
    </div>
  </div>
</div>
  1. right 속성으로 동적으로 레이아웃 잡기
<div className="fixed top-[3.8125rem] bottom-0 right-[max(0px,calc(50%-45rem))] z-20 hidden w-[19.5rem] overflow-y-auto py-10 xl:block">
  <div className="">
    <TocBanner tableOfContents={tableOfContents} />
    <div className="">
      <ThemeSwitch />
    </div>
  </div>
</div>
Next.js
Blog
Toc
프로필 사진
Tom
Developer
GmailGitHubVelog
Next.js에 구글 애드센스 적용하기Markdown Template Example

Next.js로 블로그 만들기

12 / 13
22.11.11
0분
100% 취향 반영, 내 손으로 직접 블로그를 만들어 보자!!
1. Next.js mdx plugin2. Next.js 블로그 글의 추가 정보 파싱하기3. Next.js 블로그 글 페이지 만들기4. 기술 블로그를 만들 때 고려해야 할 점5. 기술 블로그를 만들 땐 무엇을 고려해야 하는가?6. Next.js 블로그 Github Pages에 자동 배포하기7. Next.js 블로그 댓글 기능 추가하기 (feat. giscus)8. Next.js 블로그 Image Optimization9. Next.js 블로그 mdx에서 이미지 복붙하기 (feat. Paste Image)10. Next.js 블로그 sitemap 생성, 검색엔진 등록11. Next.js 블로그 Google Analytics 연동하기12. Next.js 블로그 TOC 배너 만들기13. 블로그에 RSS, JSON Feed 추가하기간략히