없는 페이지(404)

Not found (404)

왼쪽 정렬이에요. 작은 「404」, 아주 큰 제목, 검은 「홈으로 가기」 버튼이 차례로 나와요.

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

다른 이름: NotFound

···

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 은 버튼 아래에 「새로 올라온 글」 세 편을 큰 순번(01·02·03)과 함께 줄로 나열해요. directory 는 같은 머리 아래에 두 칸으로 나뉘어, 왼쪽에 「주제별로 찾기」(이름·글 수·설명 두 줄), 오른쪽에 「새로 올라온 글」이 와요. 두 변형 모두 가운데 정렬을 쓰지 않아요.

길을 잃은 독자를 홈으로 돌려보내기만 하면 simple, 주제까지 보여 주고 싶으면 directory 가 맞아요. 화면의 주인공은 큰 제목과 검은 버튼이고 장식 그림은 없어요.

가운데 정렬은 일부러 쓰지 않았어요.

이럴 때 — 변형 2

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