5.4 KiB

Raw Blame History

홈페이지

VitePress 기본 테마는 홈페이지 레이아웃을 제공하며, 이 사이트의 홈페이지에서도 사용된 것을 볼 수 있습니다. frontmatter에 layout: home을 지정함으로써 여러분의 페이지에도 이를 사용할 수 있습니다.

---
layout: home
---

하지만, 이 옵션만으로는 큰 효과를 보지 못합니다. hero 및 features와 같은 추가적인 옵션을 설정함으로써 홈페이지에 여러 가지 다른 사전 템플릿 "섹션"을 추가할 수 있습니다.

Hero 섹션

Hero 섹션은 홈페이지 맨 위에 옵니다. 여기에서 Hero 섹션을 구성하는 방법입니다.

---
layout: home

hero:
  name: VitePress
  text: Vite & Vue로 구동되는 정적 사이트 생성기.
  tagline: Lorem ipsum...
  image:
    src: /logo.png
    alt: VitePress
  actions:
    - theme: brand
      text: 시작하기
      link: /guide/what-is-vitepress
    - theme: alt
      text: GitHub에서 보기
      link: https://github.com/vuejs/vitepress
---

interface Hero {
  // `text` 위에 표시되는 문자열입니다. 브랜드 색상이
  // 함께 제공되며 제품 이름과 같이 짧을 것으로 예상됩니다.
  name?: string

  // hero 섹션의 주요 텍스트입니다.
  // 이는 `h1` 태그로 정의됩니다.
  text: string

  // `text` 아래에 표시되는 태그라인입니다.
  tagline?: string

  // 이미지는 텍스트 및 태그라인 영역 옆에 표시됩니다.
  image?: ThemeableImage

  // 홈 hero 섹션에 표시할 작업 버튼들입니다.
  actions?: HeroAction[]
}

type ThemeableImage =
  | string
  | { src: string; alt?: string }
  | { light: string; dark: string; alt?: string }

interface HeroAction {
  // 버튼의 색상 테마입니다. 기본값은 `brand`입니다.
  theme?: 'brand' | 'alt'

  // 버튼의 레이블입니다.
  text: string

  // 버튼의 목적지 링크입니다.
  link: string

  // 링크 타겟 속성입니다.
  target?: string

  // 링크 rel 속성입니다.
  rel?: string
}

이름 색상 사용자 정의

VitePress는 name에 대해 브랜드 색상 (--vp-c-brand-1)을 사용합니다. 하지만, --vp-home-hero-name-color 변수를 오버라이딩함으로써 이 색상을 사용자 정의할 수 있습니다.

:root {
  --vp-home-hero-name-color: blue;
}

또한 --vp-home-hero-name-background와 결합하여 name에 그라데이션 색상을 부여할 수도 있습니다.

:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
}

기능 섹션

기능 섹션에서는 Hero 섹션 바로 다음에 보여주고 싶은 기능의 수를 제한 없이 나열할 수 있습니다. 구성하려면 frontmatter에 features 옵션을 전달합니다.

각 기능에 대해 이모지나 이미지 형태의 아이콘을 제공할 수 있습니다. 구성된 아이콘가 이미지(svg, png, jpeg...)인 경우, 적절한 너비와 높이를 가진 아이콘을 제공해야 합니다; 필요한 경우 어두운 테마 및 밝은 테마의 변형뿐만 아니라 설명, 본질적인 크기도 제공할 수 있습니다.

---
layout: home

features:
  - icon: 🛠️
    title: 항상 간단하고 최소한의
    details: Lorem ipsum...
  - icon:
      src: /cool-feature-icon.svg
    title: 또 다른 멋진 기능
    details: Lorem ipsum...
  - icon:
      dark: /dark-feature-icon.svg
      light: /light-feature-icon.svg
    title: 또 다른 멋진 기능
    details: Lorem ipsum...
---

interface Feature {
  // 각 기능 상자에 아이콘을 표시합니다.
  icon?: FeatureIcon

  // 기능의 제목입니다.
  title: string

  // 기능의 세부 정보입니다.
  details: string

  // 기능 구성 요소에서 클릭 시 링크합니다.
  // 링크는 내부 또는 외부 모두 가능합니다.
  //
  // 예: `guide/reference/default-theme-home-page` 또는 `https://example.com`
  link?: string

  // 기능 구성 요소 내에서 표시될 링크 텍스트입니다.
  // `link` 옵션과 함께 사용하는 것이 좋습니다.
  //
  // 예: `더 알아보기`, `페이지 방문`, 등
  linkText?: string

  // `link` 옵션을 위한 링크 rel 속성입니다.
  //
  // 예: `external`
  rel?: string

  // `link` 옵션을 위한 링크 target 속성입니다.
  target?: string
}

type FeatureIcon =
  | string
  | { src: string; alt?: string; width?: string; height: string }
  | {
      light: string
      dark: string
      alt?: string
      width?: string
      height: string
    }

마크다운 컨텐츠

--- frontmatter 구분자 아래에 마크다운을 더함으로써 사이트의 홈페이지에 추가 컨텐츠를 추가할 수 있습니다.

---
layout: home

hero:
  name: VitePress
  text: Vite & Vue로 구동되는 정적 사이트 생성기.
---

## 시작하기

`npx`를 사용하여 바로 VitePress를 사용할 수 있습니다!

```sh
npm init
npx vitepress init
```

::: info VitePress는 항상 layout: home 페이지의 추가 컨텐츠에 자동 스타일을 적용하지는 않았습니다. 이전 동작으로 되돌리려면, frontmatter에 markdownStyles: false를 추가할 수 있습니다. :::

5.4 KiB Raw Blame History