이전·다음 글

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