이전·다음 글

Pager

이전 글과 다음 글을 보여 줘요. 두 변형은 테두리 상자 둘, 또는 게시판 「이전 글 / 다음 글」 줄이에요.

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

다른 이름: Pager

···

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 은 게시판처럼 더 조용하고 짧은 제목이 한 줄에 다 들어가요.

이럴 때 — 변형 2

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

같은 컴포넌트, 다른 팩

20이전·다음 글Pager

20이전·다음 글Pager

20이전·다음 글Pager

이럴 때 — 변형 2