Pager

이전·다음 글

Previous and next posts as two grey tiles side by side, or as two rows divided by rules. The arrows are blue.

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 grey tiles with a thin white gap, each with a "Previous post" or "Next post" label and a bold title; the arrow sits at the tile’s lower corner, left for previous and right for next. inline is two rows with a dark rule above and thin rules between: a label on the left, then a blue title link with an arrow.

To pull readers on at the end of a post, cards stands out. When the body is already long, inline is shorter and quieter. Long titles wrap in both, so keep post title length in mind.

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