# 기본 테마 설정 {#default-theme-config}
테마 설정을 통해 테마를 사용자 정의할 수 있습니다. 설정 파일의 `themeConfig` 옵션을 통해 테마 설정을 정의할 수 있습니다:
```ts
export default {
lang: 'en-US',
title: 'VitePress',
description: 'Vite & Vue로 구동되는 정적 사이트 생성기.',
// 테마 관련 설정.
themeConfig: {
logo: '/logo.svg',
nav: [...],
sidebar: { ... }
}
}
```
**이 페이지에 문서화된 옵션은 기본 테마에만 적용됩니다.** 다른 테마는 다른 테마 설정을 기대합니다. 커스텀 테마를 사용할 때, 테마 설정 객체는 테마로 전달되어 테마가 그것에 따라 조건적인 동작을 정의할 수 있습니다.
## i18nRouting
- 타입: `boolean`
예를 들어 `zh`로 로케일을 변경하면 URL이 `/foo` (또는 `/en/foo/`)에서 `/zh/foo`로 변경됩니다. 이 동작을 비활성화하려면 `themeConfig.i18nRouting`을 `false`로 설정하세요.
## logo
- 타입: `ThemeableImage`
내비게이션 바에 사이트 제목 바로 앞에 표시되는 로고 파일입니다. 경로 문자열을 받거나, 밝은/어두운 모드에 따라 다른 로고를 설정하기 위해 객체를 사용할 수 있습니다.
```ts
export default {
themeConfig: {
logo: '/logo.svg'
}
}
```
```ts
type ThemeableImage =
| string
| { src: string; alt?: string }
| { light: string; dark: string; alt?: string }
```
## siteTitle
- 타입: `string | false`
내비게이션에서 기본 사이트 제목(`app config`의 `title`)을 대체하기 위해 이 항목을 사용자 정의할 수 있습니다. `false`로 설정하면 내비게이션의 제목이 비활성화됩니다. `logo`가 이미 사이트 제목 텍스트를 포함하고 있을 때 유용합니다.
```ts
export default {
themeConfig: {
siteTitle: 'Hello World'
}
}
```
## nav
- 타입: `NavItem`
내비게이션 메뉴 항목의 설정입니다. 자세한 내용은 [기본 테마: Nav](./default-theme-nav#navigation-links)에서 확인할 수 있습니다.
```ts
export default {
themeConfig: {
nav: [
{ text: '가이드', link: '/guide' },
{
text: '드롭다운 메뉴',
items: [
{ text: '항목 A', link: '/item-1' },
{ text: '항목 B', link: '/item-2' },
{ text: '항목 C', link: '/item-3' }
]
}
]
}
}
```
```ts
type NavItem = NavItemWithLink | NavItemWithChildren
interface NavItemWithLink {
text: string
link: string
activeMatch?: string
target?: string
rel?: string
noIcon?: boolean
}
interface NavItemChildren {
text?: string
items: NavItemWithLink[]
}
interface NavItemWithChildren {
text?: string
items: (NavItemChildren | NavItemWithLink)[]
activeMatch?: string
}
```
## sidebar
- 타입: `Sidebar`
사이드바 메뉴 항목의 설정입니다. 자세한 내용은 [기본 테마: Sidebar](./default-theme-sidebar)에서 확인할 수 있습니다.
```ts
export default {
themeConfig: {
sidebar: [
{
text: '가이드',
items: [
{ text: '소개', link: '/introduction' },
{ text: '시작하기', link: '/getting-started' },
...
]
}
]
}
}
```
```ts
export type Sidebar = SidebarItem[] | SidebarMulti
export interface SidebarMulti {
[path: string]: SidebarItem[] | { items: SidebarItem[]; base: string }
}
export type SidebarItem = {
/**
* 항목의 텍스트 레이블.
*/
text?: string
/**
* 항목의 링크.
*/
link?: string
/**
* 항목의 자식들.
*/
items?: SidebarItem[]
/**
* 명시되지 않은 경우, 그룹은 접을 수 없습니다.
*
* `true`이면, 그룹은 접을 수 있고 기본적으로 접혀 있습니다
*
* `false`이면, 그룹은 접을 수 있지만 기본적으로 펼쳐져 있습니다
*/
collapsed?: boolean
}
```
## aside
- 타입: `boolean | 'left'`
- 기본값: `true`
- [frontmatter](./frontmatter-config#aside)를 통해 페이지별로 재정의 가능
이 값을 `false`로 설정하면 aside 컨테이너의 렌더링을 방지합니다.\
이 값을 `true`로 설정하면 aside를 오른쪽에 렌더링합니다.\
이 값을 `left`로 설정하면 aside를 왼쪽에 렌더링합니다.
모든 뷰포트에 대해 비활성화하려면 `outline: false`를 사용해야 합니다.
## outline
- 타입: `Outline | Outline['level'] | false`
- [frontmatter](./frontmatter-config#outline)를 통해 페이지별로 레벨 재정의 가능
이 값을 `false`로 설정하면 윤곽선 컨테이너의 렌더링을 방지합니다. 자세한 내용은 이 인터페이스를 참조하세요:
```ts
interface Outline {
/**
* 개요에 표시될 제목 수준.
* 단일 수치는 해당 수준의 제목만 표시됨을 의미합니다.
* 튜플이 전달되면 첫 번째 수치는 최소 수준이고 두 번째 수치는 최대 수준입니다.
* `'deep'`은 `[2, 6]`과 동일하며, `