P Primer · 06

홈 머리

Home hero

그림 없이 글과 테두리 상자로만 열어요. editorial 은 큰 제목 아래 「처음이라면 여기부터」 상자가, finder 는 주제 찾기 상자가 중심이에요.

쓰는 규칙홈의 유일한 제목(h1)이 여기 있다. 허브(사이트 모음)는 대표 글 대신 아기 시기 링크를 둔다.

다른 이름: HomeHeroSubhead
···
usage (Astro)
---
// src/pages/index.astro
import { HomeHero } from '../components/registry';
---
<HomeHero
  eyebrow={eyebrow}
  title={IS_HUB ? site.name : site.tagline}
  lead={IS_HUB ? HUB_LEAD : site.description}
  publishers={IS_HUB ? HUB_PUBLISHERS : topPublishers(posts)}
  aboutHref="/about/"
  featured={featured ? postSummary(featured) : undefined}
  topics={IS_HUB ? undefined : await topicLinks()}
  stages={stageGroups.length > 1 ? stageGroups.map((g) => ({ href: `#${g.id}`, label: g.label })) : undefined}
/>
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "HomeHero": "editorial" }
}
props (TypeScript)
export interface HomeHeroProps {
  /** 「글 13편 · 10월 13일 업데이트」 */
  eyebrow: string;
  /** 페이지의 유일한 h1 */
  title: string;
  lead: string;
  /** 실제 인용 상위 기관 */
  publishers: string[];
  aboutHref: string;
  /** 사이트 홈: 「처음이라면 여기부터」 대표 글. 허브에는 없다 */
  featured?: PostSummary;
  /** 사이트 홈: 주제(카테고리) */
  topics?: NavLink[];
  /** 허브: 아기 시기 묶음(앵커) */
  stages?: Link[];
  variant?: VariantOf<'HomeHero'>;
}

editorial은 큰 제목, 소개, 방패 아이콘이 붙은 출처 줄(「편집 원칙」 링크), 그 아래 회색 머리 줄이 있는 대표 글 상자예요. finder는 제목을 작게 하고 「어떤 정보가 필요하세요?」 상자를 주인공으로 둬요. 주제마다 이름·설명·글 수가 두 칸으로 나뉘어 보여요. featured는 사이트 제목을 한 줄로 줄이고 대표 글 제목을 가장 크게 써서, 「이 글부터 읽기」 회색 버튼을 붙여요.

읽을 글이 먼저 보이길 원하면 featured, 주제 길찾기가 먼저면 finder예요. 상자와 선만 쓰기 때문에 사진이 없는 사이트에 잘 맞고, 시선을 확 끄는 화면은 아니에요. 주제가 홀수면 두 칸 상자 끝에 빈 칸이 남아서 그때는 한 칸 목록으로 써요.

페이지 제목이 여기 하나만 있어요.

이럴 때 — 변형 3

  1. editorial제목 중심 사이트가 무엇이고 어느 기관 자료를 보고 쓰는지를 먼저 보여 주고 싶을 때.쓰는 사이트 4곳: babyplay, feeding, toddlerfood, vaccination
  2. finder찾기 검색으로 들어와 주제를 바로 고르는 사람이 많을 때 — 「어떤 정보가 필요하세요?」가 주인공.쓰는 사이트 3곳: babysleep, newborn, 허브
  3. featured대표 글 처음 읽어야 할 글이 분명한 사이트 — 그 글 제목이 가장 크다.쓰는 사이트 4곳: babyfood, babysick, birthprep, milestone
페이지로 열기 ↗

항목 추가 요청

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