이전·다음 글

Pager

「이전 글 / 다음 글」이 두 상자로 나란히 서거나, 양 끝에 회색 버튼이 있는 한 줄이에요.

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

다른 이름: 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이 맞아요. inline은 버튼이 눈에 먼저 들어오고 제목은 작게 따라와요. 폰에서 제목이 긴 글은 inline이 줄바꿈이 많아질 수 있어요.

이럴 때 — 변형 2

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

같은 컴포넌트, 다른 팩

20이전·다음 글Pager

20이전·다음 글Pager

20이전·다음 글Pager

이럴 때 — 변형 2