mirror of https://github.com/vuejs/vitepress
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
2.9 KiB
63 lines
2.9 KiB
# 레이아웃 {#layout}
|
|
|
|
페이지 [프런트매터](./frontmatter-config)에 `layout` 옵션을 설정함으로써 페이지 레이아웃을 선택할 수 있습니다. `doc`, `page`, `home`의 세 가지 레이아웃 옵션이 있습니다. 아무것도 지정하지 않으면, 해당 페이지는 `doc` 페이지로 처리됩니다.
|
|
|
|
```yaml
|
|
---
|
|
layout: doc
|
|
---
|
|
```
|
|
|
|
## Doc 레이아웃 {#doc-layout}
|
|
|
|
`doc` 옵션은 기본 레이아웃이며, 전체 마크다운 내용을 "문서화"된 모양으로 스타일링합니다. 이것은 전체 내용을 `vp-doc` css 클래스로 감싸고, 그 아래 요소들에 스타일을 적용함으로써 작동합니다.
|
|
|
|
`p`나 `h2`와 같은 거의 모든 일반 요소들은 특별한 스타일링을 받습니다. 따라서 마크다운 내용 내에 사용자 정의 HTML을 추가할 경우, 이러한 스타일들에 영향을 받게 될 것임을 명심하세요.
|
|
|
|
또한 아래 나열된 문서화 특정 기능들을 제공합니다. 이 기능들은 이 레이아웃에서만 활성화됩니다.
|
|
|
|
- 편집 링크
|
|
- 이전/다음 링크
|
|
- 개요
|
|
- [카본 광고](./default-theme-carbon-ads)
|
|
|
|
## 페이지 레이아웃 {#page-layout}
|
|
|
|
`page` 옵션은 "빈 페이지"로 처리됩니다. 마크다운은 여전히 파싱되며, 모든 [마크다운 확장](../guide/markdown) 기능은 `doc` 레이아웃과 동일하게 작동하지만, 기본 스타일은 적용받지 않습니다.
|
|
|
|
페이지 레이아웃을 통해 VitePress 테마의 마크업 영향을 받지 않고 모든 것을 직접 스타일링할 수 있습니다. 이는 사용자 정의 페이지를 생성하고 싶을 때 유용합니다.
|
|
|
|
이 레이아웃에서도 페이지가 일치하는 사이드바 구성이 있는 경우 여전히 사이드바가 표시됨을 유의하세요.
|
|
|
|
## 홈 레이아웃 {#home-layout}
|
|
|
|
`home` 옵션은 템플릿화된 "홈페이지"를 생성합니다. 이 레이아웃에서는 `hero` 및 `features`와 같은 추가 옵션을 설정해 컨텐츠를 더 자세히 커스터마이즈할 수 있습니다. 자세한 내용은 [기본 테마: 홈 페이지](./default-theme-home-page)를 방문해주세요.
|
|
|
|
## 레이아웃 없음 {#no-layout}
|
|
|
|
레이아웃을 원하지 않는 경우, 프런트매터를 통해 `layout: false`를 전달할 수 있습니다. 이 옵션은 완전히 맞춤화된 랜딩 페이지(기본적으로 사이드바, 내비게이션 바, 또는 푸터 없음)를 원할 때 유용합니다.
|
|
|
|
## 사용자 정의 레이아웃 {#custom-layout}
|
|
|
|
또한 사용자 정의 레이아웃을 사용할 수 있습니다:
|
|
|
|
```md
|
|
---
|
|
layout: foo
|
|
---
|
|
```
|
|
|
|
이것은 컨텍스트에 등록된 `foo`라는 이름의 컴포넌트를 찾습니다. 예를 들어, `.vitepress/theme/index.ts`에서 컴포넌트를 전역으로 등록할 수 있습니다:
|
|
|
|
```ts
|
|
import DefaultTheme from 'vitepress/theme'
|
|
import Foo from './Foo.vue'
|
|
|
|
export default {
|
|
extends: DefaultTheme,
|
|
enhanceApp({ app }) {
|
|
app.component('foo', Foo)
|
|
}
|
|
}
|
|
```
|