이전·다음 글

Pager

이전 글과 다음 글로 가는 곳이에요. cards 는 테두리 상자 둘, inline 은 윗선 아래 글자 둘이에요.

쓰는 규칙이전·다음 관계를 링크에 적어 둬서 검색엔진도 글 순서를 안다.

다른 이름: PagerPagination

···

usage (Astro)

---
// src/pages/[post].astro
import { Pager } from '../components/registry';
---
<Pager prev={prev ? postSummary(prev) : undefined} next={next ? postSummary(next) : undefined} />

site.json

// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "Pager": "cards" }
}

props (TypeScript)

export interface PagerProps {
  prev?: PostSummary;
  next?: PostSummary;
  variant?: VariantOf<'Pager'>;
}

cards 는 둥근 테두리 상자 둘이 나란히 서고 작은 회색 「← 이전 글」「다음 글 →」 아래 제목이 두 줄까지 나와요. 다음 글은 오른쪽 정렬이에요. inline 은 상자가 없고 윗선 아래 같은 내용이 글자만으로 놓여요.

글 끝에서 다음 글로 이어 읽게 하려면 cards, 조용히 끝내려면 inline 이 어울려요. 제목이 길면 cards 쪽이 줄바꿈이 더 잦아요.

cards 는 문서 사이트 하단 이동 모양이고 마우스를 올리면 옅은 바탕이 깔리며, inline 은 shadcn 의 Pagination 모양이에요.

이럴 때 — 변형 2

cards두 상자 연재처럼 다음 글로 넘어가게 하고 싶을 때.쓰는 사이트 6곳: babyfood, babyplay, babysick, birthprep, toddlerfood, vaccination
inline한 줄 글 끝이 이미 길 때 — 「이전 글 / 다음 글」 한 줄.쓰는 사이트 5곳: babysleep, feeding, milestone, newborn, 허브

같은 컴포넌트, 다른 팩

20이전·다음 글Pager

20이전·다음 글Pager

20이전·다음 글Pager

이럴 때 — 변형 2