Pager

이전·다음 글

Previous and next posts in Primer’s pagination style: either two boxes side by side or a single line with grey buttons at the ends.

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 places two boxes side by side with a small “← Previous” above a blue title; the next post is right-aligned. inline runs under a top line: a grey “← Previous” button, a title, a title and a “Next →” button on one line.

To promote the next read, cards; for a light end to the post, inline. In inline the buttons catch the eye first and the titles follow in small text. With long titles on phones, inline may wrap a lot.

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