테마 설정

이 설정은 모든 메인 테마에 적용됩니다.

공통

Color mode

클래식 테마는 메뉴바에서 밝은 모드와 어두운 모드를 선택할 수 있는 기능을 기본으로 지원합니다.

It is possible to customize the color mode support within the colorMode object.

설정할 수 있는 필드

Name	Type	Default	Description
defaultMode	!!crwdBlockTags_255_sgaTkcolBdwrc!!	'light'	The color mode when user first visits the site.
disableSwitch	boolean	false	Hides the switch in the navbar. Useful if you want to support a single color mode.
respectPrefersColorScheme	boolean	false	Whether to use the prefers-color-scheme media-query, using user system preferences, instead of the hardcoded defaultMode.
switchConfig	See below	See below	Dark/light switch icon options.
switchConfig.darkIcon	string	'🌜'	Icon for the switch while in dark mode.
switchConfig.darkIconStyle	JSX style object (see documentation)	{}	CSS to apply to dark icon.
switchConfig.lightIcon	string	'🌞'	Icon for the switch while in light mode.
switchConfig.lightIconStyle	JSX style object	{}	CSS to apply to light icon.

설정 예시:

docusaurus.config.js

module.exports = {  themeConfig: {    colorMode: {      defaultMode: 'light',      disableSwitch: false,      respectPrefersColorScheme: false,      switchConfig: {        darkIcon: '🌙',        darkIconStyle: {          marginLeft: '2px',        },        // Unicode icons such as '\u2600' will work        // Unicode with 5 chars require brackets: '\u{1F602}'        lightIcon: '\u{1F602}',        lightIconStyle: {          marginLeft: '1px',        },      },    },  },};

caution

respectPrefersColorScheme: true로 설정한 경우 defaultMode 설정값은 사용자 시스템 환경 설정에 따라 재정의됩니다.

하나의 색상 모드만 지원하려면 사용자 시스템 환경 설정에 영향을 받지 않게 해야 합니다.

메타 정보 이미지

og:image나 twitter:image처럼 메타 태그에서 사용할 기본 이미지를 설정합니다.

설정할 수 있는 필드

Name	Type	Default	Description
image	string	undefined	The meta image URL for the site. Relative to your site's "static" directory. Cannot be SVGs. 외부 URL은 사용할 수 있습니다.

설정 예시:

docusaurus.config.js

module.exports = {  themeConfig: {    image: 'img/docusaurus.png',  },};

메타 데이터

HTML 메타 데이터를 추가하거나 (기존 항목을 재정의할 수 있습니다).

설정할 수 있는 필드

Name	Type	Default	Description
metadatas	Metadata[]	[]	Any field will be directly passed to the <meta /> tag. Possible fields include id, name, property, content, itemprop, etc.

설정 예시:

docusaurus.config.js

module.exports = {  themeConfig: {    metadatas: [{name: 'twitter:card', content: 'summary'}],  },};

알림표시줄

웹 사이트에서 공지할 내용이 생길 수 있습니다. 그런 경우 알림표시줄을 추가할 수 있습니다. 메뉴바 위에 고정되지 않고 선택적으로 사용자가 닫을 수 있는 패널이 표시됩니다. All configuration are in the announcementBar object.

설정할 수 있는 필드

Name	Type	Default	Description
id	string	'announcement-bar'	Any value that will identify this message.
content	string	''	The text content of the announcement. HTML will be interpolated.
backgroundColor	string	'#fff'	Background color of the entire bar.
textColor	string	'#000'	Announcement text color.
isCloseable	boolean	true	Whether this announcement can be dismissed with a '×' button.

설정 예시:

docusaurus.config.js

module.exports = {  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,    },  },};

메뉴바

설정할 수 있는 필드

Name	Type	Default	Description
title	string	undefined	Title for the navbar.
logo	See below	undefined	Customization of the logo object.
items	NavbarItem[]	[]	A list of navbar items. See specification below.
hideOnScroll	boolean	false	Whether the navbar is hidden when the user scrolls down.
style	!!crwdBlockTags_299_sgaTkcolBdwrc!!	Same as theme	Sets the navbar style, ignoring the dark/light theme.

Navbar logo

The logo can be placed in static folder. 로고 URL은 기본적으로 여러분의 사이트 기본 URL이 설정됩니다. 로고 URL을 따로 설정할 수는 있지만 외부 링크인 경우에는 새로운 탭에서 열리게 됩니다. 또한 로고 링크의 target 속성값을 재정의할 수 있습니다. 메인 웹 사이트의 하위 디렉터리에서 문서 웹 사이트를 서비스하는 경우에 유용한 기능입니다. 이런 경우 메인 웹 사이트를 새로운 탭에서 열어주는 로고 링크가 필요하지 않을 수도 있습니다.

어두운 모드 지원을 위해 모드마다 다른 로고를 설정할 수도 있습니다.

설정할 수 있는 필드

Name	Type	Default	Description
alt	string	undefined	Alt tag for the logo image.
src	string	Required	URL to the logo image. Base URL is appended by default.
srcDark	string	logo.src	An alternative image URL to use in dark mode.
href	string	siteConfig.baseUrl	Link to navigate to when the logo is clicked.
target	string	Calculated based on href (external links will open in a new tab, all others in the current one).	The target attribute of the link; controls whether the link is opened in a new tab, the current one, or otherwise.

설정 예시:

docusaurus.config.js

module.exports = {  themeConfig: {    navbar: {      title: 'Site Title',      logo: {        alt: 'Site Logo',        src: 'img/logo.svg',        srcDark: 'img/logo_dark.svg',        href: 'https://docusaurus.io/',        target: '_self',      },    },  },};

메뉴바 아이템

themeConfig.navbar.items 설정에서 메뉴바에 아이템을 추가할 수 있습니다.

docusaurus.config.js

module.exports = {  themeConfig: {    navbar: {      items: [        {          type: 'doc',          position: 'left',          docId: 'introduction',          label: 'Docs',        },        {to: 'blog', label: 'Blog', position: 'left'},        {          type: 'docsVersionDropdown',          position: 'right',        },        {          type: 'localeDropdown',          position: 'right',        },        {          href: 'https://github.com/facebook/docusaurus',          position: 'right',          className: 'header-github-link',          'aria-label': 'GitHub repository',        },      ],    },  },};

아이템은 type 필드에 따라 다르게 동작할 수 있습니다. 사용할 수 있는 모든 유형의 메뉴바 아이템을 아래에 소개합니다.

메뉴바 링크

기본적으로 메뉴바 아이템은 일반 링크(내부 또는 외부)입니다.

리액트 라우터는 자동으로 링크에 대해서 활성 링크 스타일을 적용합니다. 하지만 필요에 따라 activeBasePath를 사용할 수 있습니다. 여러 다른 경로의 링크를 활성화해야 하는 경우(예를 들면 같은 사이드바 아래 여러 문서 디렉터리가 포함된 경우) activeBaseRegex를 사용할 수 있습니다. activeBaseRegex는 activeBasePath보다 유연한 대안이며 우선적으로 적용됩니다. 도큐사우루스에서는 현재 URL에 정규식으로 적용해 구문 분석을 처리합니다.

외부 링크는 자동으로 target="_blank" rel="noopener noreferrer" 코드가 적용됩니다.

설정할 수 있는 필드

Name	Type	Default	Description
label	string	Required	The name to be shown for this item.
to	string	Required	Client-side routing, used for navigating within the website. 해당 값 앞에 baseUrl이 자동으로 추가됩니다.
href	string	Required	A full-page navigation, used for navigating outside of the website. Only one of to or href should be used.
prependBaseUrlToHref	boolean	false	Prepends the baseUrl to href values.
position	!!crwdBlockTags_342_sgaTkcolBdwrc!!	'left'	The side of the navbar this item should appear on.
activeBasePath	string	to / href	To apply the active class styling on all routes starting with this path. 일반적인 경우는 필요하지 않습니다.
activeBaseRegex	string	undefined	Alternative to activeBasePath if required.
className	string	''	Custom CSS class (for styling any item).

설정 예시:

docusaurus.config.js

module.exports = {  themeConfig: {    navbar: {      items: [        {          to: 'docs/introduction',          // "to" 또는 "href" 중 하나만 사용해야 합니다.          // href: 'https://www.facebook.com',          label: 'Introduction',          position: 'left',          activeBaseRegex: 'docs/(next|v8)',        },      ],    },  },};

메뉴바 드롭다운

dropdown 유형의 메뉴바 아이템은 추가적으로 items 필드를 내부 배열 형태로 가질 수 있습니다.

메뉴바 드롭다운 아이템은 아래와 같이 "링크 기능을 지원하는" 아이템 유형만 허용합니다.

• 메뉴바 링크
• 메뉴바 문서 링크
• 메뉴바 문서 버전

드롭다운 기본 아이템도 클릭할 수 있는 링크이므로 해당 아이템은 일반적인 메뉴바 링크의 모든 속성을 가질 수 있습니다.

설정할 수 있는 필드

Name	Type	Default	Description
label	string	Required	The name to be shown for this item.
items	!!crwdBlockTags_349_sgaTkcolBdwrc!!	Required	The items to be contained in the dropdown.
position	!!crwdBlockTags_350_sgaTkcolBdwrc!!	'left'	The side of the navbar this item should appear on.

설정 예시:

docusaurus.config.js

module.exports = {  themeConfig: {    navbar: {      items: [        {          type: 'dropdown',          label: 'Community',          position: 'left',          items: [            {              label: 'Facebook',              href: 'https://www.facebook.com',            },            {              type: 'doc',              label: 'Social',              docId: 'social',            },            // ... more items          ],        },      ],    },  },};

메뉴바 문서 링크

특정 문서에 대한 링크를 만들고 싶은 경우 특정 메뉴바 아이템 타입을 설정하면 docId를 기준으로 문서 링크를 만듭니다. 같은 사이드바 문서를 탐색하고 있다면 navbar__link--active 클래스를 얻게 됩니다.

설정할 수 있는 필드

Name	Type	Default	Description
docId	string	Required	The ID of the doc that this item links to.
label	string	docId	The name to be shown for this item.
position	!!crwdBlockTags_362_sgaTkcolBdwrc!!	'left'	The side of the navbar this item should appear on.
docsPluginId	string	'default'	The ID of the docs plugin that the doc belongs to.

설정 예시:

docusaurus.config.js

module.exports = {  themeConfig: {    navbar: {      items: [        {          type: 'doc',          position: 'left',          docId: 'introduction',          label: 'Docs',        },      ],    },  },};

메뉴바 문서 버전 드롭다운

문서 버전 기능을 사용하고 있다면 특정 메뉴바 아이템 타입을 설정해 여러분의 사이트에서 사용할 수 있는 버전 목록을 드롭다운 목록으로 표시할 수 있습니다.

사용자는 같은 문서를 유지하면서 다른 버전으로 전환할 수 있습니다(버전 별 문서 id가 같은 경우).

설정할 수 있는 필드

Name	Type	Default	Description
position	!!crwdBlockTags_376_sgaTkcolBdwrc!!	'left'	The side of the navbar this item should appear on.
dropdownItemsBefore	!!crwdBlockTags_377_sgaTkcolBdwrc!!	[]	Add additional dropdown items at the beginning of the dropdown.
dropdownItemsAfter	!!crwdBlockTags_378_sgaTkcolBdwrc!!	[]	Add additional dropdown items at the end of the dropdown.
docsPluginId	string	'default'	The ID of the docs plugin that the doc versioning belongs to.
dropdownActiveClassDisabled	boolean	false	Do not add the link active class when browsing docs.

설정 예시:

docusaurus.config.js

module.exports = {  themeConfig: {    navbar: {      items: [        {          type: 'docsVersionDropdown',          position: 'left',          dropdownItemsAfter: [{to: '/versions', label: 'All versions'}],          dropdownActiveClassDisabled: true,        },      ],    },  },};

메뉴바 문서 버전

문서 버전 기능을 사용하고 있다면 특정 메뉴바 아이템 타입을 설정해 (현재 URL에 따라) 활성화되고 탐색하고 있는 문서 버전 링크로 연결할 수 있습니다. 설정이 없으면 최신 버전 링크로 연결합니다.

설정할 수 있는 필드

Name	Type	Default	Description
label	string	The active/latest version label.	The name to be shown for this item.
to	string	The active/latest version.	The internal link that this item points to.
position	!!crwdBlockTags_389_sgaTkcolBdwrc!!	'left'	The side of the navbar this item should appear on.
docsPluginId	string	'default'	The ID of the docs plugin that the doc versioning belongs to.

설정 예시:

docusaurus.config.js

module.exports = {  themeConfig: {    navbar: {      items: [        {          type: 'docsVersion',          position: 'left',          to: '/path',          label: 'label',        },      ],    },  },};

메뉴바 로케일 드롭다운

i18n 기능을 사용하고 있다면 특정 메뉴바 아이템을 설정해 사이트에서 사용할 수 있는 로케일을 드롭다운 목록에 표시할 수 있습니다.

사용자는 같은 문서를 유지하면서 다른 언어로 전환할 수 있습니다.

설정할 수 있는 필드

Name	Type	Default	Description
position	!!crwdBlockTags_397_sgaTkcolBdwrc!!	'left'	The side of the navbar this item should appear on.
dropdownItemsBefore	!!crwdBlockTags_398_sgaTkcolBdwrc!!	[]	Add additional dropdown items at the beginning of the dropdown.
dropdownItemsAfter	!!crwdBlockTags_399_sgaTkcolBdwrc!!	[]	Add additional dropdown items at the end of the dropdown.

설정 예시:

docusaurus.config.js

module.exports = {  themeConfig: {    navbar: {      items: [        {          type: 'localeDropdown',          position: 'left',          dropdownItemsAfter: [            {              to: 'https://my-site.com/help-us-translate',              label: 'Help us translate',            },          ],        },      ],    },  },};

메뉴바 검색

검색 기능을 사용하고 있다면 메뉴바 오른쪽 끝에 검색바가 표시됩니다.

하지만 특정 메뉴바 아이템을 설정해 기본 위치를 변경할 수 있습니다.

Name	Type	Default	Description
position	!!crwdBlockTags_403_sgaTkcolBdwrc!!	'left'	The side of the navbar this item should appear on.

docusaurus.config.js

module.exports = {  themeConfig: {    navbar: {      items: [        {          type: 'search',          position: 'right',        },      ],    },  },};

메뉴바 자동 숨김

사용자가 페이지 스크롤 다운을 시작하면 자동으로 메뉴바가 숨겨지고 스크롤을 올리면 다시 보여지는 UI 기능을 활성화할 수 있습니다.

docusaurus.config.js

module.exports = {  themeConfig: {    navbar: {      hideOnScroll: true,    },  },};

메뉴바 스타일

테마 전환 기능을 비활성화하지 않고도 메뉴바의 스타일을 따로 설정할 수 있습니다. 선택한 스타일은 선택한 테마와 상관없이 항상 적용됩니다.

현재 설정할 수 있는 스타일 옵션은 2가지입니다. dark, primary(--ifm-color-primary 색상에 따라) 인피마 문서에서 적용될 스타일을 확인해볼 수 있습니다.

docusaurus.config.js

module.exports = {  themeConfig: {    navbar: {      style: 'primary',    },  },};

코드 블록

도큐사우루스에서는 Prism React Renderer를 사용해 코드 블록 구문 강조를 처리합니다. All configuration are in the prism object.

설정할 수 있는 필드

Name	Type	Default	Description
theme	PrismTheme	palenight	The Prism theme to use for light-theme code blocks.
darkTheme	PrismTheme	palenight	The Prism theme to use for dark-theme code blocks.
defaultLanguage	string	undefined	The side of the navbar this item should appear on.

테마

기본적으로 구문 강조 테마로 Palenight를 사용합니다. 사용할 수 있는 테마 목록에서 다른 테마를 선택할 수 있습니다. You may also use a different syntax highlighting theme when the site is in dark mode.

설정 예시:

docusaurus.config.js

module.exports = {  themeConfig: {    prism: {      theme: require('prism-react-renderer/themes/github'),      darkTheme: require('prism-react-renderer/themes/dracula'),    },  },};

note

마크다운 구문을 강조해야 하는 경우 어두운 모드 구문 강조 테마 사용 시 다른 배경색을 설정해야 할 수도 있습니다. 적용 가이드를 참고하세요.

기본 언어

3개의 억음부호(```) 뒤에 언어를 설정하지 않았을 때 코드 블록에서 기본으로 적용할 언어를 설정할 수 있습니다. Note that a valid language name must be passed.

설정 예시:

docusaurus.config.js

module.exports = {  themeConfig: {    prism: {      defaultLanguage: 'javascript',    },  },};

바닥글

themeConfig.footer 설정에서 바닥글에 로고나 저작권 정보를 추가할 수 있습니다. 로고는 static 디렉터리에 가져다 놓을 수 있습니다. 로고 URL은 메뉴바 로고와 같은 방식으로 처리됩니다.

설정할 수 있는 필드

Name	Type	Default	Description
logo	Logo	undefined	Customization of the logo object. See Navbar logo for details.
copyright	string	undefined	The copyright message to be displayed at the bottom.
style	!!crwdBlockTags_426_sgaTkcolBdwrc!!	'light'	The color theme of the footer component.
items	FooterItem[]	[]	The link groups to be present.

설정 예시:

docusaurus.config.js

module.exports = {  themeConfig: {    footer: {      logo: {        alt: 'Facebook Open Source Logo',        src: 'img/oss_logo.png',        href: 'https://opensource.facebook.com',      },      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,    },  },};

바닥글 링크

You can add links to the footer via themeConfig.footer.links.

Accepted fields of each link section:

Name	Type	Default	Description
title	string	undefined	Label of the section of these links.
items	FooterLink[]	[]	Links in this section.

Accepted fields of each item in items:

Name	Type	Default	Description
label	string	Required	Text to be displayed for this link.
to	string	Required	Client-side routing, used for navigating within the website. 해당 값 앞에 baseUrl이 자동으로 추가됩니다.
href	string	Required	A full-page navigation, used for navigating outside of the website. Only one of to or href should be used.
html	string	undefined	Renders the html pass-through instead of a simple link. In case html is used, no other options should be provided.

설정 예시:

docusaurus.config.js

module.exports = {  footer: {    links: [      {        title: 'Docs',        items: [          {            label: 'Style Guide',            to: 'docs/',          },          {            label: 'Second Doc',            to: 'docs/doc2/',          },        ],      },      {        title: 'Community',        items: [          {            label: 'Stack Overflow',            href: 'https://stackoverflow.com/questions/tagged/docusaurus',          },          {            label: 'Discord',            href: 'https://discordapp.com/invite/docusaurus',          },          {            label: 'Twitter',            href: 'https://twitter.com/docusaurus',          },          {            html: `                <a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">                  <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" />                </a>              `,          },        ],      },    ],  },};

후크

useThemeContext

테마 컨텍스트에 접근하기 위한 리액트 후크입니다. 컨텍스트는 어두운, 밝은 모드를 설정하기 위한 함수와 현재 사용하고 있는 모드를 알려주는 부울 변수를 포함하고 있습니다.

사용 예:

import React from 'react';import useThemeContext from '@theme/hooks/useThemeContext';
const Example = () => {  const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
  return <h1>Dark mode is now {isDarkTheme ? 'on' : 'off'}</h1>;};

note

useThemeContext를 호출하는 컴포넌트는 Layout 컴포넌트의 자식 요소이어야 합니다.

function ExamplePage() {  return (    <Layout>      <Example />    </Layout>  );}

i18n

i18n 소개 문서를 먼저 확인해주세요.

번역 파일 위치

• 기본 경로: website/i18n/<locale>/docusaurus-theme-<themeName>
• 멀티 인스턴스 경로: 해당없음
• JSON 파일: docusaurus write-translations 명령 실행 후 만들어진 파일
• 마크다운 파일: 해당없음

파일 시스템 구조 예

website/i18n/<locale>/docusaurus-theme-classic││ # translations for the theme├── navbar.json└── footer.json