Pager

이전·다음 글

Shows the previous and next post: two bordered boxes, or board-style "Previous / Next" rows.

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

Also known as: 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 places two rounded bordered boxes side by side: "← Previous" on the left and "Next →" on the right, with the right box right-aligned. inline puts a "← Previous" label column and a bold title on one row each, between rules, all left-aligned.

cards clearly signals something to press and wraps titles to two lines. inline is quieter like a bulletin board and fits short titles on one line.

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