C Carbon · 07

주제 목록

Topic index

「주제별로 보기」 제목이 왼쪽 좁은 칸에 있고 내용이 오른쪽 넓은 칸에 붙는 편집 격자예요. 위쪽에 가는 선을 긋고 구분해요.

쓰는 규칙대표 글은 여기에 다시 나오지 않는다 — 같은 글이 홈에 두 번 보이지 않게. 「찾기」 홈 머리와 「바로가기」 목록은 같은 링크라 함께 고르지 않는다.

다른 이름: TopicIndex
···
usage (Astro)
---
// src/pages/index.astro
import { TopicIndex } from '../components/registry';
---
<TopicIndex heading="주제별로 보기" topics={await topics(featured)} />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "TopicIndex": "sections" }
}
props (TypeScript)
export interface TopicIndexProps {
  heading: string;
  topics: Topic[];
  variant?: VariantOf<'TopicIndex'>;
}

sections는 주제마다 칸을 만들어 이름, 설명, 글 세 편, 「글 5편 모두 보기」 링크를 쌓고, 넓은 화면에서는 두 칸씩 나란히 놓여요. index는 표처럼 한 장이에요. 주제 이름, 설명, 글 수와 화살표가 한 줄이고 줄 전체가 링크예요. lead는 주제마다 한 줄씩 쓰는데, 왼쪽에 주제 이름과 글 수, 가운데에 첫 글이 큰 가는 제목과 설명으로, 오른쪽에 나머지 두 편이 작게 나와요.

글 제목을 바로 보여 주고 싶으면 sections, 주제가 많을 때 한눈에 훑게 하려면 index, 대표 글을 곁들인 잡지 같은 느낌은 lead예요. lead는 가장 길고, index는 가장 짧아요.

이럴 때 — 변형 3

  1. sections주제마다 글 3편 주제마다 글이 세 편 넘게 고르게 있을 때.쓰는 사이트 4곳: babyplay, babysleep, birthprep, newborn
  2. index바로가기 줄 주제가 많고, 글은 주제 페이지에서 보게 하고 싶을 때 — 이름·설명·글 수만.쓰는 사이트 4곳: babyfood, feeding, milestone, vaccination
  3. lead첫 글 크게 주제마다 대표 글이 뚜렷할 때 — 첫 글 크게, 두 편 작게.쓰는 사이트 3곳: babysick, toddlerfood, 허브
페이지로 열기 ↗

항목 추가 요청

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