Pager

이전·다음 글

The way to the previous and next posts. cards are two outlined boxes; inline is two bits of text under a line.

RuleThe links state the previous/next relation, so search engines also know the order.

Also known as: 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 puts two rounded outlined boxes side by side, with small gray “← Previous” and “Next →” labels above titles that wrap to two lines. The next post is right-aligned. inline has no boxes, just the same content as plain text under a line.

Use cards to push readers on to the next post at the end of an article and inline to end quietly. With long titles cards wrap more often.

cards follow the bottom navigation of documentation sites and show a faint background on hover, and inline follows shadcn’s Pagination.

Use it when — Variants 2

cardsCards When readers should move on to the next post, as in a series.Used by 6: babyfood, babyplay, babysick, birthprep, toddlerfood, vaccination
inlineInline When the end of the post is already long — one “previous / next” line.Used by 5: babysleep, feeding, milestone, newborn, 허브

Same component, other packs

20Pager이전·다음 글

20Pager이전·다음 글

20Pager이전·다음 글

Use it when — Variants 2