P Primer · 05

없는 페이지(404)

Not found (404)

테두리 상자 안에 작은 「404」, 제목, 설명, 「홈으로 가기」 회색 버튼이 왼쪽 정렬로 서고, 아래에 번호 붙은 「새로 올라온 글」 상자가 이어져요.

쓰는 규칙왼쪽 정렬로 쓴다. 가운데에 큰 숫자만 있는 화면으로 만들지 않는다.

다른 이름: NotFoundBlankslate
···
usage (Astro)
---
// src/pages/404.astro
import { NotFound } from '../components/registry';
---
<NotFound homeHref="/" latest={latest} topics={topics} />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "NotFound": "simple" }
}
props (TypeScript)
export interface NotFoundProps {
  homeHref: string;
  latest: PostSummary[];
  topics: NavLink[];
  variant?: VariantOf<'NotFound'>;
}

simple은 상자 하나에 「페이지를 찾을 수 없어요」와 「홈으로 가기」 버튼이 있고, 아래에 번호가 붙은 「새로 올라온 글」 상자가 이어져요. directory는 위 상자는 넓게 두고, 아래를 두 칸으로 나눠서 왼쪽에 「주제별로 찾기」(주제마다 글 수), 오른쪽에 「새로 올라온 글」을 놓아요.

주제가 많은 사이트는 길을 다시 찾기 쉬운 directory가 낫고, 글이 적으면 simple로 충분해요. 두 변형 모두 장식 그림이 없어서 가볍지만, 그만큼 밋밋해 보일 수 있어요.

원본의 빈 화면(Blankslate)을 가운데 정렬 대신 왼쪽 정렬로 바꿔 썼어요.

이럴 때 — 변형 2

  1. simple간단히 글이 많지 않은 사이트 — 홈 버튼과 새 글 몇 편이면 충분할 때.쓰는 사이트 5곳: babyfood, babyplay, babysick, newborn, vaccination
  2. directory바로가기 주제가 많아 길을 다시 찾게 도와야 할 때 — 주제 바로가기와 새 글이 두 칸으로.쓰는 사이트 6곳: babysleep, birthprep, feeding, milestone, toddlerfood, 허브
페이지로 열기 ↗

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.