[Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch)를 사용하여 문서 사이트를 검색할 수 있는 옵션입니다. [기본 테마: 검색](./default-theme-search)에서 자세히 알아보세요.
[Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch)를 사용하여 문서 사이트를 검색할 수 있는 옵션입니다. 자세한 내용은 [기본 테마: 검색](./default-theme-search)을 참고하세요.
[기본 테마: Carbon Ads](./default-theme-carbon-ads)에서 자세히 알아보세요.
자세한 내용은 [기본 테마: 카본 광고](./default-theme-carbon-ads)를 참고하세요.
## docFooter
## docFooter
- 타입: `DocFooter`
- 타입: `DocFooter`
영어로 문서를 작성하지 않을 때 이전 및 다음 링크 위에 나타나는 텍스트를 사용자 정의하는 데 사용할 수 있습니다. 또한 이전/다음 링크를 전역적으로 비활성화할 수 있습니다. 이전/다음 링크를 선택적으로 활성화/비활성화하려면 [frontmatter](./default-theme-prev-next-links)를 사용할 수 있습니다.
이 옵션은 이전 및 다음 링크에 표시되는 텍스트를 커스텀하는 데 사용합니다. 영어로 문서를 작성하지 않는 경우 유용합니다. 또한 이전/다음 링크를 전역적으로 비활성화할 수도 있습니다. 선택적으로 이전/다음 링크를 활성화/비활성화하려면 [전문](./default-theme-prev-next-links)을 사용합니다.
```ts
```ts
export default {
export default {
@ -405,48 +418,48 @@ export interface DocFooter {
## darkModeSwitchLabel
## darkModeSwitchLabel
- 타입: `string`
- 타입: `string`
- 기본값: `외관`
- 기본값: `Appearance`
어두운 모드 전환 레이블을 사용자 정의하는 데 사용할 수 있습니다. 이 레이블은 모바일 뷰에서만 표시됩니다.
이 옵션은 다크 모드 스위치 레이블을 커스텀할 때 사용합니다. 이 레이블은 모바일 뷰에서만 표시됩니다.
## lightModeSwitchTitle
## lightModeSwitchTitle
- 타입: `string`
- 타입: `string`
- 기본값: `라이트 테마로 전환`
- 기본값: `Switch to light theme`
호버 시 나타나는 라이트 모드 전환 제목을 사용자 정의하는 데 사용할 수 있습니다.
이 옵션은 라이트 모드 스위치 타이틀을 커스텀할 때 사용합니다. 이것은 호버(hover)할 때 나타납니다.
## darkModeSwitchTitle
## darkModeSwitchTitle
- 타입: `string`
- 타입: `string`
- 기본값: `어두운 테마로 전환`
- 기본값: `Switch to dark theme`
호버 시 나타나는 어두운 모드 전환 제목을 사용자 정의하는 데 사용할 수 있습니다.
호버 시 나타나는 다크 모드 스위치 타이틀을 커스텀할 때 사용합니다.
## sidebarMenuLabel
## sidebarMenuLabel
- 타입: `string`
- 타입: `string`
- 기본값: `메뉴`
- 기본값: `Menu`
사이드바 메뉴 레이블을 사용자 정의하는 데 사용할 수 있습니다. 이 레이블은 모바일 뷰에서만 표시됩니다.
사이드바 메뉴 레이블을 커스텀 할 때 사용합니다. 이 레이블은 모바일 뷰에서만 표시됩니다.
## returnToTopLabel
## returnToTopLabel
- 타입: `string`
- 타입: `string`
- 기본값: `맨 위로 돌아가기`
- 기본값: `Return to top`
맨 위로 돌아가기 버튼의 레이블을 사용자 정의하는 데 사용할 수 있습니다. 이 레이블은 모바일 뷰에서만 표시됩니다.
맨 위로 이동 버튼의 레이블을 커스텀 할 때 사용합니다. 이 레이블은 모바일 뷰에서만 표시됩니다.
## langMenuLabel
## langMenuLabel
- 타입: `string`
- 타입: `string`
- 기본값: `언어 변경`
- 기본값: `Change language`
내비게이션 바의 언어 토글 버튼의 aria-label을 사용자 정의하는 데 사용됩니다. [i18n](../guide/i18n)을 사용하는 경우에만 사용됩니다.
네비게이션 바에서 언어 토글 버튼의 aria-label을 커스텀 할 때 사용합니다. 이는 [i18n](../guide/i18n)을 사용하는 경우에만 사용됩니다.
`message`와 `저작권`에는 `<p>` 요소 안에 렌더링되기 때문에 인라인 요소만 사용할 수 있습니다. 블록 요소를 추가하고 싶다면, 대신 [`layout-bottom`](../guide/extending-default-theme#layout-slots) 슬롯을 사용하는 것을 고려하세요.
`message`와 `copyright`는 `<p>` 엘리먼트 내부에 렌더링되므로 인라인 엘리먼트만 사용할 수 있습니다. 블록 엘리먼트를 추가하려면 [`layout-bottom`](../guide/extending-default-theme#layout-slots) 슬롯을 사용하는 것이 좋습니다.
:::
:::
푸터는 [사이드바](./default-theme-sidebar)가 보이는 경우에는 표시되지 않습니다.
[사이드바](./default-theme-sidebar)가 표시되는 경우 푸터는 표시되지 않습니다.
## 프론트매터 구성 {#frontmatter-config}
## 전문에서 설정하기 {#frontmatter-config}
이 기능은 프론트매터의 `footer` 옵션을 사용하여 페이지별로 비활성화될 수 있습니다:
VitePress 기본 테마는 홈페이지 레이아웃을 제공하며, 이 사이트의 [홈페이지](../)에서도 사용된 것을 볼 수 있습니다. [frontmatter](./frontmatter-config)에 `layout: home`을 지정함으로써 여러분의 페이지에도 이를 사용할 수 있습니다.
VitePress 기본 테마는 홈 페이지 레이아웃을 제공합니다. 이것은 이 사이트의 [홈 페이지](../)에도 사용되었습니다. `layout: home`을 [전문](./frontmatter-config)에 지정하여 어느 페이지에서도 이를 사용할 수 있습니다.
```yaml
```yaml
---
---
@ -8,11 +8,11 @@ layout: home
---
---
```
```
하지만, 이 옵션만으로는 큰 효과를 보지 못합니다. `hero` 및 `features`와 같은 추가적인 옵션을 설정함으로써 홈페이지에 여러 가지 다른 사전 템플릿 "섹션"을 추가할 수 있습니다.
하지만 이 옵션만으로는 많은 것을 할 수 없습니다. 다행히도 `hero` 및 `features`와 같은 추가 옵션을 설정하여 홈 페이지에 다양한 사전 템플릿 "섹션"들을 추가할 수 있습니다.
## Hero 섹션 {#hero-section}
## Hero 섹션 {#hero-section}
Hero 섹션은 홈페이지 맨 위에 옵니다. 여기에서 Hero 섹션을 구성하는 방법입니다.
Hero 섹션은 홈 페이지의 상단에 위치합니다. Hero 섹션을 구성하는 방법은 다음과 같습니다.
VitePress는 `name`에 대해 브랜드 색상 (`--vp-c-brand-1`)을 사용합니다. 하지만, `--vp-home-hero-name-color` 변수를 오버라이딩함으로써 이 색상을 사용자 정의할 수 있습니다.
VitePress는 `name`에 브랜드 색상(`--vp-c-brand-1`)을 사용합니다. 하지만 `--vp-home-hero-name-color` 변수를 재정의하여 이 색상을 커스텀 할 수 있습니다.
```css
```css
:root {
:root {
@ -88,7 +88,7 @@ VitePress는 `name`에 대해 브랜드 색상 (`--vp-c-brand-1`)을 사용합
}
}
```
```
또한 `--vp-home-hero-name-background`와 결합하여 `name`에 그라데이션 색상을 부여할 수도 있습니다.
또한 `--vp-home-hero-name-background` 변수를 정의해 추가적으로 `name`을 그라데이션 색상으로 커스터마이징도 가능합니다.
```css
```css
:root {
:root {
@ -97,11 +97,11 @@ VitePress는 `name`에 대해 브랜드 색상 (`--vp-c-brand-1`)을 사용합
}
}
```
```
## 기능 섹션 {#features-section}
## Features 섹션 {#features-section}
기능 섹션에서는 Hero 섹션 바로 다음에 보여주고 싶은 기능의 수를 제한 없이 나열할 수 있습니다. 구성하려면 frontmatter에 `features` 옵션을 전달합니다.
Features 섹션에서는 Hero 섹션 바로 아래에 표시할 각 feature를 원하는 만큼 나열할 수 있습니다. 이를 구성하려면 `features` 옵션을 전문에 전달하면 됩니다.
각 기능에 대해 이모지나 이미지 형태의 아이콘을 제공할 수 있습니다. 구성된 아이콘가 이미지(svg, png, jpeg...)인 경우, 적절한 너비와 높이를 가진 아이콘을 제공해야 합니다; 필요한 경우 어두운 테마 및 밝은 테마의 변형뿐만 아니라 설명, 본질적인 크기도 제공할 수 있습니다.
각 feature에 아이콘을 제공할 수 있으며, 이는 이모지 또는 이미지의 형태일 수 있습니다. 아이콘으로 이미지(svg, png, jpeg 등)를 사용하려면 적절한 너비와 높이를 제공해야 하며, 필요에 따라 설명, 이미지의 고유 크기, 다크 테마와 라이트 테마에 대한 변형 아이콘도 제공할 수 있습니다.
```yaml
```yaml
---
---
@ -109,49 +109,49 @@ layout: home
features:
features:
- icon: 🛠️
- icon: 🛠️
title: 항상 간단하고 최소한의
title: Simple and minimal, always
details: Lorem ipsum...
details: Lorem ipsum...
- icon:
- icon:
src: /cool-feature-icon.svg
src: /cool-feature-icon.svg
title: 또 다른 멋진 기능
title: Another cool feature
details: Lorem ipsum...
details: Lorem ipsum...
- icon:
- icon:
dark: /dark-feature-icon.svg
dark: /dark-feature-icon.svg
light: /light-feature-icon.svg
light: /light-feature-icon.svg
title: 또 다른 멋진 기능
title: Another cool feature
details: Lorem ipsum...
details: Lorem ipsum...
---
---
```
```
```ts
```ts
interface Feature {
interface Feature {
// 각 기능 상자에 아이콘을 표시합니다.
// 각 feature 박스에 표시할 아이콘.
icon?: FeatureIcon
icon?: FeatureIcon
// 기능의 제목입니다.
// feature의 제목.
title: string
title: string
// 기능의 세부 정보입니다.
// feature의 세부 정보.
details: string
details: string
// 기능 구성 요소에서 클릭 시 링크합니다.
// feature 컴포넌트 클릭 시 링크.
// 링크는 내부 또는 외부 모두 가능합니다.
// 링크는 내부 또는 외부 모두 가능.
//
//
// 예: `guide/reference/default-theme-home-page` 또는 `https://example.com`
// 예: `guide/reference/default-theme-home-page` 또는 `https://example.com`
link?: string
link?: string
// 기능 구성 요소 내에서 표시될 링크 텍스트입니다.
// feature 컴포넌트 내 표시될 링크 텍스트.
// `link` 옵션과 함께 사용하는 것이 좋습니다.
// `link` 옵션과 함께 사용하는 것을 추천.
//
//
// 예: `더 알아보기`, `페이지 방문`, 등
// 예: `더 알아보기`, `페이지 방문` 등
linkText?: string
linkText?: string
// `link` 옵션을 위한 링크 rel 속성입니다.
// `link` 옵션을 위한 링크 rel 어트리뷰트.
//
//
// 예: `external`
// 예: `external`
rel?: string
rel?: string
// `link` 옵션을 위한 링크 target 속성입니다.
// `link` 옵션을 위한 링크 target 어트리뷰트.
target?: string
target?: string
}
}
@ -169,7 +169,7 @@ type FeatureIcon =
## 마크다운 컨텐츠 {#markdown-content}
## 마크다운 컨텐츠 {#markdown-content}
`---` frontmatter 구분자 아래에 마크다운을 더함으로써 사이트의 홈페이지에 추가 컨텐츠를 추가할 수 있습니다.
홈 페이지 레이아웃에 추가 컨텐츠를 작성하려면 전문 구분선 `---` 아래에 마크다운을 추가하면 됩니다.
````md
````md
---
---
@ -177,12 +177,12 @@ layout: home
hero:
hero:
name: VitePress
name: VitePress
text: Vite & Vue로 구동되는 정적 사이트 생성기.
text: Vite & Vue 기반 정적 사이트 생성기
---
---
## 시작하기
## 시작하기
`npx`를 사용하여 바로 VitePress를 사용할 수 있습니다!
`npx`를 사용하여 VitePress를 바로 시작할 수 있습니다!
```sh
```sh
npm init
npm init
@ -191,5 +191,5 @@ npx vitepress init
````
````
::: info
::: info
VitePress는 항상 `layout: home` 페이지의 추가 컨텐츠에 자동 스타일을 적용하지는 않았습니다. 이전 동작으로 되돌리려면, frontmatter에 `markdownStyles: false`를 추가할 수 있습니다.
`layout: home` 페이지의 추가 컨텐츠에 자동으로 기본 마크다운 스타일이 적용됩니다(영문 원서에서는 반대로 설명함). 스타일을 적용하지 않으려면 전문에 `markdownStyles: false`를 추가하면 됩니다.
페이지 [프런트매터](./frontmatter-config)에 `layout` 옵션을 설정함으로써 페이지 레이아웃을 선택할 수 있습니다. `doc`, `page`, `home`의 세 가지 레이아웃 옵션이 있습니다. 아무것도 지정하지 않으면, 해당 페이지는`doc` 페이지로 처리됩니다.
페이지의 [전문](./frontmatter-config)에 `layout` 옵션을 설정하여 페이지 레이아웃을 선택할 수 있습니다. `doc`, `page`, `home` 세 가지 레이아웃 옵션이 있습니다. 아무것도 지정하지 않으면 `doc` 페이지로 처리됩니다.
```yaml
```yaml
---
---
@ -8,38 +8,38 @@ layout: doc
---
---
```
```
## Doc 레이아웃 {#doc-layout}
## `doc` 레이아웃 {#doc-layout}
`doc` 옵션은 기본 레이아웃이며, 전체 마크다운 내용을 "문서화"된 모양으로 스타일링합니다. 이것은 전체 내용을 `vp-doc` css 클래스로 감싸고, 그 아래 요소들에 스타일을 적용함으로써 작동합니다.
`doc` 옵션은 기본 레이아웃으로, 전체 마크다운 콘텐츠를 "문서" 스타일로 변환합니다. 이 레이아웃은 전체 콘텐츠를 `vp-doc` CSS 클래스로 감싸고, 하위 엘리먼트에 스타일을 적용하는 방식으로 작동합니다.
`p`나 `h2`와 같은 거의 모든 일반 요소들은 특별한 스타일링을 받습니다. 따라서 마크다운 내용 내에 사용자 정의 HTML을 추가할 경우, 이러한 스타일들에 영향을 받게 될 것임을 명심하세요.
`p`나 `h2` 같은 거의 모든 일반적인 엘리먼트들이 특별한 스타일을 갖게 됩니다. 따라서 마크다운 콘텐츠에 커스텀 HTML을 추가할 경우, 해당 HTML도 이러한 스타일의 영향을 받게 된다는 점을 유념해야 합니다.
또한 아래 나열된 문서화 특정 기능들을 제공합니다. 이 기능들은 이 레이아웃에서만 활성화됩니다.
이 레이아웃에서는 아래에 나열된 문서 전용 기능들도 제공됩니다. 이 기능들은 오직 이 레이아웃에서만 활성화됩니다.
- 편집 링크
- 편집 링크
- 이전/다음 링크
- 이전/다음 링크
- 개요
- 개요(outline)
- [카본 광고](./default-theme-carbon-ads)
- [카본 광고](./default-theme-carbon-ads)
## 페이지 레이아웃 {#page-layout}
## `page` 레이아웃 {#page-layout}
`page` 옵션은 "빈 페이지"로 처리됩니다. 마크다운은 여전히 파싱되며, 모든 [마크다운 확장](../guide/markdown) 기능은 `doc` 레이아웃과 동일하게 작동하지만, 기본 스타일은 적용받지 않습니다.
`page` 옵션은 "빈 페이지"로 처리됩니다. 마크다운은 여전히 파싱되며, 모든 [마크다운 확장 기능](../guide/markdown)이 `doc` 레이아웃과 동일하게 작동하지만, 기본 스타일링은 적용되지 않습니다.
페이지 레이아웃을 통해 VitePress 테마의 마크업 영향을 받지 않고 모든 것을 직접 스타일링할 수 있습니다. 이는 사용자 정의 페이지를 생성하고 싶을 때 유용합니다.
이 페이지 레이아웃은 VitePress 테마가 마크업에 영향을 미치지 않도록 하여, 모든 스타일을 직접 지정할 수 있게 해줍니다. 이는 커스텀 페이지를 만들고자 할 때 유용합니다.
이 레이아웃에서도 페이지가 일치하는 사이드바 구성이 있는 경우 여전히 사이드바가 표시됨을 유의하세요.
이 레이아웃에서도 페이지에 매칭되는 사이드바 구성이 있는 경우 사이드바는 여전히 표시됩니다.
## 홈 레이아웃 {#home-layout}
## `home` 레이아웃 {#home-layout}
`home` 옵션은 템플릿화된 "홈페이지"를 생성합니다. 이 레이아웃에서는 `hero` 및 `features`와 같은 추가 옵션을 설정해 컨텐츠를 더 자세히 커스터마이즈할 수 있습니다. 자세한 내용은 [기본 테마: 홈 페이지](./default-theme-home-page)를 방문해주세요.
`home` 옵션은 템플릿화된 "홈페이지"를 생성합니다. 이 레이아웃에서는 `hero`와 `features` 같은 추가 옵션을 설정하여 콘텐츠를 더 커스터마이징 할 수 있습니다. 자세한 내용은 [기본 테마: 홈 페이지](./default-theme-home-page)를 참고하세요.
## 레이아웃 없음 {#no-layout}
## 레이아웃 없음 {#no-layout}
레이아웃을 원하지 않는 경우, 프런트매터를 통해 `layout: false`를 전달할 수 있습니다. 이 옵션은 완전히 맞춤화된 랜딩 페이지(기본적으로 사이드바, 내비게이션 바, 또는 푸터 없음)를 원할 때 유용합니다.
어떤 레이아웃도 원하지 않는 경우, 전문에 `layout: false`를 전달할 수 있습니다. 이 옵션은 (기본적으로 사이드바, 네비게이션 바, 또는 푸터가 없는) 완전히 커스터마이징 가능한 랜딩 페이지를 만들고자 할 때 유용합니다.
## 사용자 정의 레이아웃 {#custom-layout}
## 커스텀 레이아웃 {#custom-layout}
또한 사용자 정의 레이아웃을 사용할 수 있습니다:
커스텀 레이아웃을 사용할 수도 있습니다:
```md
```md
---
---
@ -47,7 +47,7 @@ layout: foo
---
---
```
```
이것은 컨텍스트에 등록된 `foo`라는 이름의 컴포넌트를 찾습니다. 예를 들어,`.vitepress/theme/index.ts`에서 컴포넌트를 전역으로 등록할 수 있습니다:
이것은 컨텍스트에 등록된 `foo`라는 이름의 컴포넌트를 찾습니다. 예를 들어 `.vitepress/theme/index.ts`에서 컴포넌트를 전역으로 등록할 수 있습니다:
`component` 옵션을 사용하여 탐색 모음에 사용자 정의 구성 요소를 포함할 수 있습니다. `component` 키는 Vue 구성 요소 이름이어야 하며, [Theme.enhanceApp](../guide/custom-theme#theme-interface)을 사용하여 전역으로 등록해야 합니다.
네비게이션 바에 커스텀 컴포넌트를 포함하려면 `component` 옵션을 사용하세요. `component` 키는 Vue 컴포넌트 이름이어야 하며, [Theme.enhanceApp](../guide/custom-theme#theme-interface)을 사용하여 전역적으로 등록해야 합니다.
```js
```js
// .vitepress/config.js
// .vitepress/config.js
@ -175,7 +175,7 @@ export default {
items: [
items: [
{
{
component: 'MyCustomComponent',
component: 'MyCustomComponent',
// 구성 요소에 전달할 선택적 props
// 컴포넌트에 전달할 선택적 프로퍼티
props: {
props: {
title: 'My Custom Component'
title: 'My Custom Component'
}
}
@ -190,7 +190,7 @@ export default {
}
}
```
```
그런 다음, 구성 요소를 전역으로 등록해야 합니다:
그런 다음, 컴포넌트를 전역적으로 등록해야 합니다:
```js
```js
// .vitepress/theme/index.js
// .vitepress/theme/index.js
@ -209,8 +209,8 @@ export default {
}
}
```
```
구성 요소가 탐색 모음에 렌더링됩니다. VitePress는 구성 요소에 다음과 같은 추가 props를 제공합니다:
컴포넌트는 네비게이션 바에 렌더링될 것입니다. VitePress는 컴포넌트에 다음과 같은 추가 프로퍼티를 제공합니다:
- `screenMenu`: 구성 요소가 모바일 탐색 메뉴 내부에 있는지 여부를 나타내는 선택적 boolean 값
- `screenMenu`: 컴포넌트가 모바일 네비게이션 바 메뉴 내부에 있는지를 나타내는 선택적 boolean 값
예제는 [여기](https://github.com/vuejs/vitepress/tree/main/__tests__/e2e/.vitepress)에서 확인할 수 있습니다.
e2e 테스트 예제를 [여기](https://github.com/vuejs/vitepress/tree/main/__tests__/e2e/.vitepress)에서 확인할 수 있습니다.
VitePress는 [minisearch](https://github.com/lucaong/minisearch/)를 통해 브라우저 내 인덱스를 사용한 퍼지 전문 검색을 지원합니다. 이 기능을 활성화하려면,`.vitepress/config.ts` 파일 내에서 `themeConfig.search.provider` 옵션을 `'local'`로 설정하면 됩니다:
VitePress는 [minisearch](https://github.com/lucaong/minisearch/)로 브라우저 내 인덱스를 사용하는 퍼지(full-text) 검색을 지원합니다. 이 기능을 활성화하려면 `.vitepress/config.ts` 파일에서 `themeConfig.search.provider` 옵션을 `'local'`로 설정하면 됩니다:
```ts
```ts
import { defineConfig } from 'vitepress'
import { defineConfig } from 'vitepress'
@ -20,15 +20,15 @@ export default defineConfig({
})
})
```
```
예시 결과:
예제 결과:
또는, [Algolia DocSearch](#algolia-search)나<https://www.npmjs.com/package/vitepress-plugin-search>, <https://www.npmjs.com/package/vitepress-plugin-pagefind>과 같은 커뮤니티 플러그인을 사용할 수 있습니다.
대안으로 [Algolia DocSearch](#algolia-search),<https://www.npmjs.com/package/vitepress-plugin-search>, <https://www.npmjs.com/package/vitepress-plugin-pagefind>와 같은 커뮤니티 플러그인을 사용할 수도 있습니다.
사용자 정의 `_render` 함수를 제공하는 경우, `search: false` 프론트매터를 직접 처리해야 합니다. 또한, `md.render`가 호출되기 전에는`env` 객체가 완전히 채워지지 않으므로, `frontmatter`와 같은 선택적 `env`속성에 대한 검사는 그 이후에 수행해야 합니다.
커스텀 `_render` 함수가 제공된 경우, `search: false` 전문을 직접 처리해야 합니다. 또한, `md.render`가 호출되기 전에 `env` 객체가 완전히 채워지지 않으므로, `frontmatter`와 같은 선택적 `env`프로퍼티에 대한 검사는 그 이후에 수행해야 합니다.
:::
:::
#### 예시: 콘텐츠 변환 - 앵커 추가 {#example-transforming-content-adding-anchors}
#### 예제: 콘텐츠 변환 - 앵커 추가 {#example-transforming-content-adding-anchors}
```ts
```ts
import { defineConfig } from 'vitepress'
import { defineConfig } from 'vitepress'
@ -185,7 +185,7 @@ export default defineConfig({
## Algolia 검색 {#algolia-search}
## Algolia 검색 {#algolia-search}
VitePress는 [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch)를 사용하여 문서 사이트 검색을 지원합니다. 시작 가이드를 참조하세요. 작동하게 하려면 `.vitepress/config.ts`에서 최소한 다음 정보를 제공해야 합니다:
VitePress는 [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch)를 사용한 문서 사이트 검색 기능을 지원합니다. 시작 가이드를 참고하세요. `.vitepress/config.ts`에서 이 기능을 사용하려면 최소한 다음 구성을 제공해야 합니다:
위 코드는 카드 형태의 엘리먼트로 팀 구성원을 표시합니다. 아래와 비슷한 형태로 표시됩니다.
<VPTeamMemberssize="small":members="members"/>
<VPTeamMemberssize="small":members="members"/>
`<VPTeamMembers>` 컴포넌트는 `small` 및 `medium`의 두 가지 다른 크기로 제공됩니다. 선호도에 달렸지만, 보통 문서 페이지에서 사용할 때는 `small` 크기가 더 잘 맞을 것입니다. 또한 "description"이나 "sponsor" 버튼을 추가하는 등 각 멤버에 대해 더 많은 속성을 추가할 수 있습니다. [`<VPTeamMembers>`](#vpteammembers)에서 더 자세히 알아보세요.
`<VPTeamMembers>` 컴포넌트는 `small`과 `medium` 두 가지 크기로 제공됩니다. 개인의 선호도에 따라 선택할 수 있지만, 일반적으로 `small` 사이즈가 문서 페이지에 더 적합합니다. 또한, 각 구성원에 "설명"이나 "후원" 버튼과 같은 프로퍼티를 추가할 수도 있습니다. 자세한 내용은 [`<VPTeamMembers>`](#vpteammembers)에서 확인할 수 있습니다.
문서 페이지에 팀 멤버를 포함시키는 것은 전용 전체 팀 페이지를 만드는 것이 너무 과한 경우나, 문서 맥락을 참조로 일부 멤버를 소개할 때 좋습니다.
문서 페이지에 팀 구성원을 포함시키는 것은 전용 팀 페이지를 만드는 것이 과할 수 있는 소규모 팀이나, 문서의 맥락에 따라 일부 구성원을 소개할 때 좋습니다.
멤버 수가 많거나, 멤버를 보여주기 위해 더 많은 공간을 원한다면 [전체 팀 페이지 만들기](#create-a-full-team-page)를 고려해보세요.
만약 많은 수의 구성원이 있거나, 팀 구성원을 보여줄 더 많은 공간이 필요하다면, [전체 팀 페이지 만들기](#create-a-full-team-page)를 고려해보세요.
## 전체 팀 페이지 만들기 {#create-a-full-team-page}
## 전체 팀 페이지 만들기 {#create-a-full-team-page}
문서 페이지에 팀 멤버를 추가하는 대신, 전체 팀 페이지를 만들 수도 있습니다. 사용자 지정 [홈 페이지](./default-theme-home-page)를 생성하는 방법과 유사합니다.
팀 구성원을 문서 페이지에 추가하는 대신, 전체 팀 페이지를 만들어 [홈 페이지](./default-theme-home-page)를 커스텀하는 것처럼 팀 페이지를 만들 수도 있습니다.
팀 페이지를 생성하려면 먼저, 새 md 파일을 만듭니다. 파일 이름은 중요하지 않지만, 여기서는 `team.md`라고 하겠습니다. 이 파일에서 frontmatter 옵션 `layout: page`를 설정한 다음, `TeamPage` 컴포넌트를 사용하여 페이지 구조를 구성합니다.
팀 페이지를 만들려면, 먼저 새로운 마크다운 파일을 생성하세요. 파일 이름은 중요하지 않지만, 여기서는 `team.md`라고 부르겠습니다. 이 파일에서 전문 옵션에 `layout: page`를 설정한 후, `TeamPage` 컴포넌트를 사용하여 페이지 구조를 구성합니다.
VitePress는 앱 데이터에 액세스할 수 있도록 몇 가지 내장 API를 제공합니다. 또한 전역적으로 사용할 수 있는 몇 가지 내장 컴포넌트도 제공합니다.
VitePress는 애플리케이션 데이터를 액세스할 수 있는 여러 내장 API를 제공합니다. 그리고 전역적으로 사용할 수 있는 몇 가지 내장 컴포넌트도 제공합니다.
도우미 메서드는 `vitepress`에서 전역적으로 가져올 수 있으며 일반적으로 사용자 지정 테마 Vue 컴포넌트에서 사용됩니다. 그러나 마크다운 파일이 Vue [단일 파일 컴포넌트](https://vuejs.org/guide/scaling-up/sfc.html)로 컴파일되기 때문에 `.md` 페이지 내에서도 사용할 수 있습니다.
헬퍼 메서드는 `vitepress`에서 전역적으로 사용할 수 있으며, 주로 커스텀 테마의 Vue 컴포넌트에서 사용됩니다. 또한 마크다운 파일이 Vue [단일 파일 컴포넌트](https://vuejs.org/guide/scaling-up/sfc.html)로 컴파일되기 때문에 `.md` 페이지 내에서도 사용할 수 있습니다.
`use*`로 시작하는 메서드는 `setup()` 또는 `<script setup>` 내에서만 사용할 수 있는 [Vue 3 구성 API](https://vuejs.org/guide/introduction.html#composition-api) 함수("컴퍼저블")임을 나타냅니다.
`use*`로 시작하는 메서드는 [Vue 3 Composition API](https://vuejs.org/guide/introduction.html#composition-api) 함수("컴포저블")를 나타내며, 이는 `setup()` 또는 `<script setup>` 내부에서만 사용할 수 있습니다.
## `useData`<Badgetype="info"text="컴퍼저블" />
## `useData`<Badgetype="info"text="컴포저블" />
페이지별 데이터를 반환합니다. 반환된 객체는 다음 유형을 가집니다:
페이지별 데이터를 반환합니다. 반환된 객체는 다음과 같은 타입을 가집니다:
```ts
```ts
interface VitePressData<T=any> {
interface VitePressData<T=any> {
/**
/**
* 사이트 수준 메타데이터
* 사이트 레벨 메타데이터
*/
*/
site: Ref<SiteData<T>>
site: Ref<SiteData<T>>
/**
/**
* .vitepress/config.js에서의 themeConfig
* .vitepress/config.js의 themeConfig
*/
*/
theme: Ref<T>
theme: Ref<T>
/**
/**
* 페이지 수준 메타데이터
* 페이지 레벨 메타데이터
*/
*/
page: Ref<PageData>
page: Ref<PageData>
/**
/**
* 페이지 앞부분 메타데이터
* 페이지 전문 메타데이터
*/
*/
frontmatter: Ref<PageData['frontmatter']>
frontmatter: Ref<PageData['frontmatter']>
/**
/**
* 동적 라우트 매개변수
* 동적 라우트 파라미터
*/
*/
params: Ref<PageData['params']>
params: Ref<PageData['params']>
title: Ref<string>
title: Ref<string>
@ -58,7 +58,7 @@ interface PageData {
}
}
```
```
**예시:**
**예제:**
```vue
```vue
<scriptsetup>
<scriptsetup>
@ -72,9 +72,9 @@ const { theme } = useData()
</template>
</template>
```
```
## `useRoute`<Badgetype="info"text="컴퍼저블" />
## `useRoute`<Badgetype="info"text="컴포저블" />
현재 라우트 객체를 다음 유형으로 반환합니다:
다음과 같은 타입으로 현재 라우트 객체를 반환합니다:
```ts
```ts
interface Route {
interface Route {
@ -84,9 +84,9 @@ interface Route {
}
}
```
```
## `useRouter`<Badgetype="info"text="컴퍼저블" />
## `useRouter`<Badgetype="info"text="컴포저블" />
다른 페이지로 프로그래밍 방식으로 이동할 수 있도록 VitePress 라우터 인스턴스를 반환합니다.
프로그래밍 방식으로 다른 페이지로 이동할 수 있도록 VitePress 라우터 인스턴스를 반환합니다.
설정된 [`base`](./site-config#base)를 주어진 URL 경로에 추가합니다. [Base URL](../guide/asset-handling#base-url)도 참조하십시오.
구성된 [`base`](./site-config#base)를 지정된 URL 경로에 추가합니다. [Base URL](../guide/asset-handling#base-url)을 참고하세요.
## `<Content />`<Badgetype="info"text="컴포넌트"/>
## `<Content />`<Badgetype="info"text="컴포넌트"/>
`<Content />` 컴포넌트는 렌더링된 마크다운 내용을 표시합니다. [자신만의 테마를 만들 때](../guide/custom-theme) 유용합니다.
`<Content />` 컴포넌트는 렌더링된 마크다운 내용을 표시합니다. [커스텀 테마를 만들 때](../guide/custom-theme) 유용합니다.
```vue
```vue
<template>
<template>
<h1>커스텀 레이아웃!</h1>
<h1>Custom Layout!</h1>
<Content/>
<Content/>
</template>
</template>
```
```
@ -135,9 +135,9 @@ interface Router {
`<ClientOnly />` 컴포넌트는 클라이언트 측에서만 슬롯을 렌더링합니다.
`<ClientOnly />` 컴포넌트는 클라이언트 측에서만 슬롯을 렌더링합니다.
VitePress 애플리케이션은 정적 빌드를 생성할 때 Node.js에서 서버 렌더링되므로, 모든 Vue 사용은 범용 코드 요구 사항에 부합해야 합니다. 간단히 말해서, beforeMount 또는 mounted 훅에서만 브라우저 / DOM API에 액세스하십시오.
VitePress 애플리케이션은 정적 빌드를 생성할 때 Node.js에서 서버 렌더링되므로 모든 Vue 사용은 범용 코드 요구 사항을 준수해야 합니다. 간단히 말해서, 브라우저 / DOM API는 반드시 beforeMount 또는 mounted 훅에서만 접근해야 합니다.
SSR 친화적이지 않은 컴포넌트(예: 커스텀 지시문이 포함된 경우)를 사용하거나 시연하는 경우 해당 컴포넌트를 `ClientOnly` 컴포넌트 안에 포함시킬 수 있습니다.
SSR 친화적이지 않은(예: 커스텀 디렉티브를 포함하는) 컴포넌트를 사용하는 경우, 이를 `ClientOnly` 컴포넌트 내부에 래핑할 수 있습니다.
```vue-html
```vue-html
<ClientOnly>
<ClientOnly>
@ -145,15 +145,15 @@ SSR 친화적이지 않은 컴포넌트(예: 커스텀 지시문이 포함된
</ClientOnly>
</ClientOnly>
```
```
- 관련: [SSR 호환성](../guide/ssr-compat)
- 참고: [SSR 호환성](../guide/ssr-compat)
## `$frontmatter`<Badgetype="info"text="템플릿 전역"/>
## `$frontmatter`<Badgetype="info"text="템플릿 전역"/>
Vue 표현식에서 현재 페이지의 [앞부분 메타데이터](../guide/frontmatter)를 직접 액세스합니다.
Vue 표현식에서 현재 페이지의 [전문](../guide/frontmatter) 데이터에 직접 접근합니다.
```md
```md
---
---
title: 안녕하세요
title: Hello
---
---
# {{ $frontmatter.title }}
# {{ $frontmatter.title }}
@ -161,7 +161,7 @@ title: 안녕하세요
## `$params`<Badgetype="info"text="템플릿 전역"/>
## `$params`<Badgetype="info"text="템플릿 전역"/>
Vue 표현식에서 현재 페이지의 [동적 라우트 매개변수](../guide/routing#dynamic-routes)를 직접 액세스합니다.
Vue 표현식에서 현재 페이지의 [동적 라우트 파라미터](../guide/routing#dynamic-routes)에 직접 접근합니다.
사이트 설정은 사이트의 전역 설정을 정의할 수 있는 곳입니다. 앱 설정 옵션은 사용되는 테마에 상관없이 모든 VitePress 사이트에 적용되는 설정을 정의합니다. 예를 들어, 기본 디렉토리 또는 사이트의 제목 등이 있습니다.
사이트 구성(config)은 사이트의 전역 설정을 정의할 수 있는 곳입니다. 애플리케이션 구성 옵션은 사용 중인 테마와 상관없이 모든 VitePress 사이트에 적용되는 설정을 정의합니다. 예를 들어 기본 디렉터리나 사이트의 제목 등이 있습니다.
## 개요 {#overview}
## 개요 {#overview}
### 설정 해석 {#config-resolution}
### 구성 분석 {#config-resolution}
설정 파일은 항상 `<root>/.vitepress/config.[ext]`에서 해석되며, 여기서 `<root>`는 여러분의 VitePress [프로젝트 루트](../guide/routing#root-and-source-directory), 그리고 `[ext]`는 지원되는 파일 확장명 중 하나입니다. TypeScript는 기본적으로 지원됩니다. 지원되는 확장명에는 `.js`, `.ts`, `.mjs`, 그리고`.mts`가 포함됩니다.
구성 파일은 항상 `<root>/.vitepress/config.[ext]`에서 처리됩니다. 여기서 `<root>`는 VitePress [프로젝트 루트](../guide/routing#root-and-source-directory)를 의미하며, `[ext]`는 지원되는 파일 확장자 중 하나입니다. TypeScript는 기본적으로 지원됩니다. 지원되는 확장자에는 `.js`, `.ts`, `.mjs`, `.mts`가 포함됩니다.
설정 파일에서는 ES 모듈 문법의 사용을 권장합니다. 설정 파일은 객체를 기본 내보내기해야 합니다:
구성 파일에서는 ES 모듈 구문을 사용하는 것이 권장됩니다. 구성 파일은 객체를 "default export"해야 합니다:
```ts
```ts
export default {
export default {
// 앱 레벨 설정 옵션
// 애플리케이션 레벨의 구성 옵션
lang: 'en-US',
lang: 'en-US',
title: 'VitePress',
title: 'VitePress',
description: 'Vite & Vue를 활용한 정적 사이트 생성기.',
description: 'Vite & Vue powered static site generator.',
...
...
}
}
```
```
::: details 동적(비동기) 설정
::: details 동적(비동기) 구성
동적으로 설정을 생성해야 하는 경우, 함수를 기본 내보내기로 사용할 수도 있습니다. 예를 들면:
구성을 동적으로 생성해야 하는 경우, 함수를 "default export" 할 수 있습니다. 예:
### Vite, Vue& Markdown 설정 {#vite-vue-markdown-config}
### Vite, Vue, Markdown 설정 {#vite-vue-markdown-config}
- **Vite**
- **Vite**
여러분은 VitePress 설정에서 [vite](#vite) 옵션을 사용하여 기본 Vite 인스턴스를 구성할 수 있습니다. 별도의 Vite 설정 파일을 만들 필요는 없습니다.
VitePress 구성에서 [vite](#vite) 옵션을 사용하여 기본 Vite 인스턴스를 구성할 수 있습니다. 별도의 Vite 구성 파일을 만들 필요는 없습니다.
- **Vue**
- **Vue**
VitePress는 이미 Vite용 공식 Vue 플러그인([@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue))을 포함하고 있습니다. VitePress 설정에서 [vue](#vue) 옵션을 사용하여 그 옵션을 구성할 수 있습니다.
VitePress는 이미 Vite의 공식 Vue 플러그인([@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue))을 포함하고 있습니다. VitePress 구성에서 [vue](#vue) 옵션을 사용하여 해당 옵션을 구성할 수 있습니다.
- **Markdown**
- **Markdown**
[Markdown-It](https://github.com/markdown-it/markdown-it) 인스턴스를 VitePress 설정에서 [markdown](#markdown) 옵션을 사용하여 구성할 수 있습니다.
[Markdown-It](https://github.com/markdown-it/markdown-it) 인스턴스를 VitePress 구성에서 [markdown](#markdown) 옵션을 사용하여 구성할 수 있습니다.
## 사이트 메타데이터 {#site-metadata}
## 사이트 메타데이터 {#site-metadata}
### title
### title
- 유형: `string`
- 타입: `string`
- 기본값: `VitePress`
- 기본값: `VitePress`
- 페이지별로 [frontmatter](./frontmatter-config#title)를 통해 재정의 가능
- [전문](./frontmatter-config#title)을 통해 페이지별로 재정의 가능
사이트의 제목입니다. 기본 테마를 사용할 경우, 이것은 내비게이션 바에 표시됩니다.
사이트의 제목입니다. 기본 테마를 사용할 경우, 이는 내비게이션 바에 표시됩니다.
전체 페이지 제목에 기본 접미사로도 사용됩니다. 그렇지 않으면 [`titleTemplate`](#titletemplate)이 정의되어 있습니다. 개별 페이지의 최종 제목은 첫 번째 `<h1>` 헤더의 텍스트 내용과 전역 `title`을 접미사로 결합한 것입니다. 예를 들어 다음과 같은 설정과 페이지 내용을 가진 경우:
[`titleTemplate`](#titletemplate)이 정의되지 않은 경우, 모든 개별 페이지 제목의 기본 접미사로 사용됩니다. 개별 페이지의 최종 제목은 첫 번째 `<h1>` 헤더의 텍스트 콘텐츠와 전역 `title`을 접미사로 결합한 것입니다. 예를 들어 다음 구성과 페이지 콘텐츠가 있을 경우:
```ts
```ts
export default {
export default {
title: '나의 멋진 사이트'
title: 'My Awesome Site'
}
}
```
```
```md
```md
# 안녕하세요
# Hello
```
```
페이지의 제목은 `안녕하세요 | 나의 멋진 사이트`가 될 것입니다.
페이지의 제목은 `Hello | My Awesome Site`가 됩니다.
### titleTemplate
### titleTemplate
- 유형: `string | boolean`
- 타입: `string | boolean`
- 페이지별로 [frontmatter](./frontmatter-config#titletemplate)를 통해 재정의 가능
- [전문](./frontmatter-config#titletemplate)을 통해 페이지별로 재정의 가능
각 페이지의 제목 접미사 또는 전체 제목을 사용자 정의할 수 있습니다. 예를 들면:
각 페이지의 제목 접미사 또는 전체 제목을 커스터마이징할 수 있습니다. 예를 들어:
```ts
```ts
export default {
export default {
title: '나의 멋진 사이트',
title: 'My Awesome Site',
titleTemplate: '커스텀 접미사'
titleTemplate: 'Custom Suffix'
}
}
```
```
```md
```md
# 안녕하세요
# Hello
```
```
페이지의 제목은 `안녕하세요 | 커스텀 접미사`가 될 것입니다.
페이지의 제목은 `Hello | Custom Suffix`가 됩니다.
`:title` 기호를 `titleTemplate`에 사용하여 제목이 어떻게 렌더링될지 완전히 사용자 정의할 수 있습니다:
제목이 렌더링되는 방식을 완전히 커스터마이징하려면 `titleTemplate`에서 `:title` 심볼을 사용할 수 있습니다:
```ts
```ts
export default {
export default {
titleTemplate: ':title - 커스텀 접미사'
titleTemplate: ':title - Custom Suffix'
}
}
```
```
이 경우`:title`은 페이지의 첫 번째 `<h1>` 헤더에서 추론된 텍스트로 대체됩니다. 이전 예제 페이지의 제목은 `안녕하세요 - 커스텀 접미사`가 될 것입니다.
여기서`:title`은 페이지의 첫 번째 `<h1>` 헤더에서 추론된 텍스트로 대체됩니다. 이전 예제 페이지의 제목은 `Hello - Custom Suffix`가 됩니다.
이 옵션은`false`로 설정하여 제목 접미사를 비활성화할 수 있습니다.
이 옵션을`false`로 설정하여 제목 접미사를 비활성화할 수 있습니다.
### description
### description
- 유형: `string`
- 타입: `string`
- 기본값: `VitePress 사이트`
- 기본값: `A VitePress site`
- 페이지별로 [frontmatter](./frontmatter-config#description)를 통해 재정의 가능
- [전문](./frontmatter-config#description)을 통해 페이지별로 재정의 가능
사이트에 대한 설명입니다. 이것은 페이지 HTML의 `<meta>` 태그로 렌더링됩니다.
사이트의 설명입니다. 이는 페이지 HTML의 `<meta>` 태그로 렌더링됩니다.
```ts
```ts
export default {
export default {
description: 'VitePress 사이트'
description: 'A VitePress site'
}
}
```
```
### head
### head
- 유형: `HeadConfig[]`
- 타입: `HeadConfig[]`
- 기본값: `[]`
- 기본값: `[]`
- 페이지별로 [frontmatter](./frontmatter-config#head)를 통해 추가 가능
- [전문](./frontmatter-config#head)을 통해 페이지별로 추가 가능
페이지 HTML의 `<head>` 태그에 렌더링할 추가 요소들입니다. 사용자가 추가한 태그는 VitePress 태그 뒤, `head` 태그가 닫히기 전에 렌더링됩니다.
페이지 HTML의 `<head>` 태그에 렌더링할 추가 엘리먼트입니다. 추가한 태그는 VitePress 태그 뒤 ~ 닫는 `head` 태그 앞에 렌더링됩니다.
사이트의 lang 속성입니다. 이것은 페이지 HTML의 `<html lang="en-US">` 태그로 렌더링됩니다.
사이트의 언어 어트리뷰트입니다. 이는 페이지 HTML의 `<html lang="en-US">` 태그로 렌더링됩니다.
```ts
```ts
export default {
export default {
@ -330,12 +330,12 @@ export default {
### base
### base
- 유형: `string`
- 타입: `string`
- 기본값: `/`
- 기본값: `/`
사이트가 배포될 기본 URL입니다. 여러분이 사이트를 GitHub 페이지와 같은 하위 경로에 배포할 계획이라면 이것을 설정해야 합니다. 예를 들어, 여러분의 사이트를 `https://foo.github.io/bar/`에 배포할 계획이라면 base를`'/bar/'`로 설정해야 합니다. 항상 슬래시로 시작하고 끝나야 합니다.
사이트가 배포될 기본 URL입니다. 예를 들어 GitHub Pages와 같이 서브 경로에 사이트를 배포하려는 경우 이것을 설정해야 합니다. `https://foo.github.io/bar/` 에 사이트를 배포하려면`'/bar/'`로 설정해야 합니다. 항상 슬래시로 시작하고 끝나야 합니다.
base는 자동으로 다른 옵션에서 /로 시작하는 모든 URL에 자동으로 추가되므로 한 번만 지정하면 됩니다.
이것은 다른 옵션에서 `/`로 시작하는 모든 URL에 자동으로 추가되므로, 한 번만 지정하면 됩니다.
이를 활성화하려면 호스팅 플랫폼에서 추가 구성이 필요할 수 있습니다. 작동하려면 서버가 `/foo.html`을 방문할 때 `/foo`를 **리디렉션 없이** 제공할 수 있어야 합니다.
이를 활성화하려면 호스팅 플랫폼에서 추가 구성이 필요할 수 있습니다. 서버가 `/foo`를 방문할 때 **리디렉션 없이** `/foo.html`을 제공할 수 있어야 합니다.
:::
:::
### rewrites
### rewrites
- 유형: `Record<string, string>`
- 타입: `Record<string, string>`
사용자 지정 디렉토리 <-> URL 매핑을 정의합니다. 자세한 내용은 [라우팅: 라우트 재작성](../guide/routing#route-rewrites)을 참조하십시오.
커스텀 디렉터리와 URL 매핑을 정의합니다. 자세한 내용은 [라우팅: 라우트 재작성](../guide/routing#route-rewrites)을 참고하세요.
```ts
```ts
export default {
export default {
@ -374,10 +374,10 @@ export default {
### srcDir
### srcDir
- 유형: `string`
- 타입: `string`
- 기본값: `.`
- 기본값: `.`
프로젝트 루트에 대해 상대적인 마크다운 페이지가 저장되는 디렉토리입니다. 또한 [루트 및 소스 디렉토리](../guide/routing#root-and-source-directory)를 참조하십시오.
마크다운 페이지가 저장되는 디렉터리입니다. 프로젝트 루트에 상대적입니다. 또한 [루트와 소스 디렉터리](../guide/routing#root-and-source-directory)를 참고하세요.
```ts
```ts
export default {
export default {
@ -387,10 +387,10 @@ export default {
### srcExclude
### srcExclude
- 유형: `string`
- 타입: `string`
- 기본값: `undefined`
- 기본값: `undefined`
소스 콘텐츠로 제외해야 하는 마크다운 파일을 일치시키는 [글로브 패턴](https://github.com/mrmlnc/fast-glob#pattern-syntax)입니다.
소스 컨텐츠에서 제외해야 하는 마크다운 파일을 매칭하기 위한 [glob 패턴](https://github.com/mrmlnc/fast-glob#pattern-syntax)입니다.
```ts
```ts
export default {
export default {
@ -400,10 +400,10 @@ export default {
### outDir
### outDir
- 유형: `string`
- 타입: `string`
- 기본값: `./.vitepress/dist`
- 기본값: `./.vitepress/dist`
사이트의 빌드 출력 위치로, [프로젝트 루트](../guide/routing#root-and-source-directory)에 대해 상대적입니다.
사이트의 빌드 결과물 위치입니다. [프로젝트 루트](../guide/routing#root-and-source-directory)에 상대적입니다.
```ts
```ts
export default {
export default {
@ -413,10 +413,10 @@ export default {
### assetsDir
### assetsDir
- 유형: `string`
- 타입: `string`
- 기본값: `assets`
- 기본값: `assets`
생성된 자산을 중첩할 디렉토리를 지정합니다. 경로는 [`outDir`](#outdir) 내부에 있어야 하며 이에 대해 상대적으로 해결됩니다.
생성된 에셋을 포함할 디렉터리를 지정합니다. 경로는 [`outDir`](#outdir) 내에 있어야 하며, 그것을 기준으로 처리됩니다.
```ts
```ts
export default {
export default {
@ -426,10 +426,10 @@ export default {
### cacheDir
### cacheDir
- 유형: `string`
- 타입: `string`
- 기본값: `./.vitepress/cache`
- 기본값: `./.vitepress/cache`
캐시 파일을 위한 디렉토리로, [프로젝트 루트](../guide/routing#root-and-source-directory)에 대해 상대적입니다. 또한: [cacheDir](https://vitejs.dev/config/shared-options.html#cachedir)을 참조하세요.
캐시 파일을 위한 디렉터리입니다. [프로젝트 루트](../guide/routing#root-and-source-directory)에 상대적입니다. [cacheDir](https://vitejs.dev/config/shared-options.html#cachedir)을 참고하세요.
`'localhostLinks'`로 설정하면, 빌드가 죽은 링크로 실패하지만,`localhost` 링크는 확인하지 않습니다.
`'localhostLinks'`로 설정하면, 죽은 링크가 있으면 빌드에 실패하지만`localhost` 링크는 확인하지 않습니다.
```ts
```ts
export default {
export default {
@ -452,18 +452,18 @@ export default {
}
}
```
```
정확한 url 문자열, 정규식 패턴, 또는 사용자 정의 필터 함수의 배열일 수도 있습니다.
정확히 일치하는 URL 문자열, 정규 표현식 패턴, 커스텀 필터 함수로 구성된 배열도 가능합니다.
```ts
```ts
export default {
export default {
ignoreDeadLinks: [
ignoreDeadLinks: [
// 정확한 url "/playground"를 무시
// "/playground"과 정확히 일치하는 url 무시
'/playground',
'/playground',
// 모든 localhost 링크 무시
// 모든 localhost 링크 무시
/^https?:\/\/localhost/,
/^https?:\/\/localhost/,
// 모든 "/repl/" 포함 링크 무시
// 모든 "/repl/" 포함 링크 무시
/\/repl\//,
/\/repl\//,
// 사용자 정의 함수, "ignore"를 포함한 모든 링크 무시
// 커스텀 함수, "ignore"를 포함한 모든 링크 무시
(url) => {
(url) => {
return url.toLowerCase().includes('ignore')
return url.toLowerCase().includes('ignore')
}
}
@ -476,14 +476,14 @@ export default {
- 타입: `boolean`
- 타입: `boolean`
- 기본값: `false`
- 기본값: `false`
`true`로 설정하면, 초기 HTML에 인라인으로 포함되는 대신 별도의 JavaScript 청크로 페이지 메타데이터를 추출합니다. 이렇게 하면 각 페이지의 HTML 페이로드가 줄어들고 페이지 메타데이터 캐싱이 가능해져 사이트에 많은 페이지가 있을 때 서버 대역폭이 줄어듭니다.
`true`로 설정하면 페이지 메타데이터를 초기 HTML에 인라인으로 삽입하는 대신 별도의 JavaScript 청크로 추출합니다. 이렇게 하면 각 페이지의 HTML 페이로드가 작아지고 페이지 메타데이터를 캐시할 수 있어, 사이트에 많은 페이지가 있을 때 서버 대역폭을 줄일 수 있습니다.
### mpa <Badgetype="warning"text="실험적"/>
### mpa <Badgetype="warning"text="실험적"/>
- 타입: `boolean`
- 타입: `boolean`
- 기본값: `false`
- 기본값: `false`
`true`로 설정하면, 프로덕션 앱이 [MPA 모드](../guide/mpa-mode)로 빌드됩니다. MPA 모드는 기본적으로 0kb의 JavaScript를 제공하지만, 클라이언트 측 탐색을 비활성화하고 상호작용에 대해 명시적인 동의가 필요합니다.
`true`로 설정하면 프로덕션 애플리케이션이 [MPA 모드](../guide/mpa-mode)로 빌드됩니다. MPA 모드는 기본적으로 0kb JavaScript를 제공하지만, 클라이언트 사이드 탐색을 비활성화하고 상호작용을 위한 명시적인 옵트인을 필요로 합니다.
`appearance.initialValue`는 `'dark'` 또는 `undefined`만 가능합니다. Refs 또는 getter는 지원되지 않습니다.
### lastUpdated
### lastUpdated
- 타입: `boolean`
- 타입: `boolean`
- 기본값: `false`
- 기본값: `false`
Git을 사용하여 각 페이지의 마지막 업데이트 타임스탬프를 가져옵니다. 타임스탬프는 각 페이지의 페이지 데이터에 포함되며, [`useData`](./runtime-api#usedata)를 통해 접근할 수 있습니다.
각 페이지의 마지막 업데이트 타임스탬프를 Git을 사용하여 가져올지 여부를 설정합니다. 타임스탬프는 각 페이지의 페이지 데이터에 포함되며, [`useData`](./runtime-api#usedata)를 통해 접근할 수 있습니다.
기본 테마를 사용하는 경우, 이 옵션을 활성화하면 각 페이지의 마지막 업데이트 시간이 표시됩니다. [`themeConfig.lastUpdatedText`](./default-theme-config#lastupdatedtext) 옵션을 통해 텍스트를 사용자 정의할 수 있습니다.
기본 테마를 사용할 때, 이 옵션을 활성화하면 각 페이지의 마지막 업데이트 시간이 표시됩니다. [`themeConfig.lastUpdatedText`](./default-theme-config#lastupdatedtext) 옵션을 통해 텍스트를 커스터마이징할 수 있습니다.
## 사용자 정의 {#customization}
## 커스터마이징 {#customization}
### markdown
### markdown
- 타입: `MarkdownOption`
- 타입: `MarkdownOption`
Markdown 파서 옵션을 구성합니다. VitePress는 파서로 [Markdown-it](https://github.com/markdown-it/markdown-it)를, 언어 구문을 강조하는 데 [Shiki](https://github.com/shikijs/shiki)를 사용합니다. 이 옵션 안에서 필요에 맞는 다양한 Markdown 관련 옵션을 전달할 수 있습니다.
마크다운 파서 옵션을 구성합니다. VitePress는 파서로 [Markdown-it](https://github.com/markdown-it/markdown-it)을 사용하고, 언어 구문 강조를 위해 [Shiki](https://github.com/shikijs/shiki)를 사용합니다. 이 옵션 내에서 다양한 마크다운 관련 옵션을 전달하여 필요에 맞게 조정할 수 있습니다.
```js
```js
export default {
export default {
@ -527,18 +527,18 @@ export default {
}
}
```
```
모든 사용 가능한 옵션에 대해서는 [타입 선언과 jsdocs](https://github.com/vuejs/vitepress/blob/main/src/node/markdown/markdown.ts)를 확인하세요.
사용 가능한 모든 옵션에 대해서는 [타입 선언 및 jsdocs](https://github.com/vuejs/vitepress/blob/main/src/node/markdown/markdown.ts)를 참고하세요.
### vite
### vite
- 타입: `import('vite').UserConfig`
- 타입: `import('vite').UserConfig`
내부 Vite 개발 서버/번들러에 직접 [Vite 설정](https://vitejs.dev/config/)을 전달합니다.
내부 Vite 개발 서버/번들러에 직접 [Vite 구성](https://vitejs.dev/config/)을 전달합니다.
```js
```js
export default {
export default {
vite: {
vite: {
// Vite 설정 옵션
// Vite 구성 옵션
}
}
}
}
```
```
@ -547,7 +547,7 @@ export default {
- 타입: `import('@vitejs/plugin-vue').Options`
- 타입: `import('@vitejs/plugin-vue').Options`
내부 플러그인 인스턴스에 [`@vitejs/plugin-vue` 옵션](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#options)을 직접 전달합니다.
내부 플러그인 인스턴스에 직접 [`@vitejs/plugin-vue` 옵션](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#options)을 전달합니다.
`transformPageData`는 각 페이지의 `pageData`를 변환하는 훅입니다. `pageData`를 직접 변경하거나 변경된 값들을 반환하여 페이지 데이터에 병합할 수 있습니다.
`transformPageData`는 각 페이지의 `pageData`를 변환하는 훅입니다. `pageData`를 직접 변경하거나, 변경된 값을 반환하여 페이지 데이터에 병합할 수 있습니다.
::: warning
::: warning
`context` 내에서는 어떠한 것도 변경하지 마세요. 또한, 이 작업은 개발 서버의 성능에 영향을 줄 수 있으므로 주의하세요. 특히, 훅에서 네트워크 요청이나 이미지 생성과 같은 무거운 연산을 수행하는 경우에는 조건부 로직을 위해 `process.env.NODE_ENV === 'production'`를 확인할 수 있습니다.
`context` 내부의 어떤 것도 변경하지 마세요. 이 훅에서 네트워크 요청이나 이미지 생성과 같은 무거운 연산이 있을 경우 개발 서버의 성능에 영향을 줄 수 있으니 주의하세요. 조건부 로직을 위해 `process.env.NODE_ENV === 'production'`을 확인할 수 있습니다.
Niceplugin
2 years ago
committed by
GitHub