테마 설정
This configuration applies to all main themes.
Common
Color mode
클래식 테마는 메뉴바에서 밝은 모드와 어두운 모드를 선택할 수 있는 기능을 기본으로 지원합니다.
It is possible to customize the color mode support within the colorMode
object.
설정할 수 있는 필드
옵션명 | 타입 | 기본값 | 설명 |
---|---|---|---|
defaultMode | 'light' | 'dark' | 'light' | 사용자가 사이트를 처음 방문할 때 컬러 모드입니다. |
disableSwitch | boolean | false | 메뉴바에서 스위치를 숨깁니다. 하나의 컬러 모드만 지원하기 원하는 경우 유용합니다. |
respectPrefersColorScheme | boolean | false | Whether to use the prefers-color-scheme media-query, using user system preferences, instead of the hardcoded defaultMode . |
설정 예시:
docusaurus.config.js
export default {
themeConfig: {
colorMode: {
defaultMode: 'light',
disableSwitch: false,
respectPrefersColorScheme: false,
},
},
};
warning
With respectPrefersColorScheme: true
, the defaultMode
is overridden by user system preferences.
하나의 색상 모드만 지원하려면 사용자 시스템 환경 설정에 영향을 받지 않게 해야 합니다.
Meta image
You can configure a default image that will be used for your meta tag, in particular og:image
and twitter:image
.
설정할 수 있는 필드
옵션명 | 타입 | 기본값 | 설명 |
---|---|---|---|
image | string | undefined | 사이트의 메타 이미지 URL입니다. 사이트 "정적" 디렉터리에 상대 경로로 설정합니다. SVG 파일은 설정할 수 없습니다. 외부 URL은 사용할 수 있습니다. |
설정 예시:
docusaurus.config.js
export default {
themeConfig: {
image: 'img/docusaurus.png',
},
};
Metadata
HTML 메타 데이터를 추가하거나 (기존 항목을 재정의할 수 있습니다).
설정할 수 있는 필드
옵션명 | 타입 | 기본값 | 설명 |
---|---|---|---|
metadata | Metadata[] | [] | Any field will be directly passed to the <meta /> tag. Possible fields include id , name , property , content , itemprop , etc. |
설정 예시:
docusaurus.config.js
export default {
themeConfig: {
metadata: [{name: 'twitter:card', content: 'summary'}],
},
};
Announcement bar
웹 사이트에서 공지할 내용이 생길 수 있습니다. 그런 경우 알림표시줄을 추가할 수 있습니다. 메뉴바 위에 고정되지 않고 선택적으로 사용자가 닫을 수 있는 패널이 표시됩니다. All configuration are in the announcementBar
object.
설정할 수 있는 필드
옵션명 | 타입 | 기본값 | 설명 |
---|---|---|---|
id | string | 'announcement-bar' | 메시지를 식별하는 모든 값입니다. |
content | string | '' | 알리고자 하는 텍스트 콘텐츠입니다. HTML을 삽입할 수 있습니다. |
backgroundColor | string | '#fff' | 알림표시줄 영역 배경색입니다. |
textColor | string | '#000' | 알림메시지 텍스트 색상입니다. |
isCloseable | boolean | true | 알림메시지를 'x' 버튼으로 닫을 수 있는지 여부 |
설정 예시:
docusaurus.config.js
export default {
themeConfig: {
announcementBar: {
id: 'support_us',
content:
'We are looking to revamp our docs, please fill <a target="_blank" rel="noopener noreferrer" href="#">this survey</a>',
backgroundColor: '#fafbfc',
textColor: '#091E42',
isCloseable: false,
},
},
};
Navbar
설정할 수 있는 필드
옵션명 |
---|