메인 컨텐츠로 이동
Version: 2.0.0-beta.19

설정

도큐사우루스는 자체적인 설정 환경을 가지고 있습니다. We encourage you to congregate information about your site into one place. We guard the fields of this file and facilitate making this data object accessible across your site.

Keeping a well-maintained docusaurus.config.js helps you, your collaborators, and your open source contributors to be able to focus on documentation while still being able to customize the site.

docusaurus.config.js 파일에서 무엇을 설정하나요?

사이트의 내용은 직접 작성해야 하지만 docusaurus.config.js 파일을 처음부터 새로 작성할 필요는 없습니다. 모든 템플릿은 공통으로 사용하는 옵션에 대한 기본값을 포함하는 docusaurus.config.js 파일을 함께 제공합니다.

하지만 설정 항목이 어떤 식으로 설계됐고 반영되고 있는지 알아야 하는 경우 필요한 유용한 정보를 정리했습니다.

도큐사우루스에서 사용하는 각 설정은 아래와 같이 구분할 수 있습니다.

각 설정 항목에 대한 좀 더 정확한 정보는 docusaurus.config.js API 레퍼런스를 참고하세요.

사이트 메타데이터

Site metadata contains the essential global metadata such as title, url, baseUrl, and favicon.

They are used in several places such as your site's title and headings, browser tab icon, social sharing (Facebook, Twitter) information or even to generate the correct path to serve your static files.

배포 설정

projectName이나 organizationName 배포 설정 그리고 deploymentBranch과 같은 추가적인 배포 설정은 deploy 명령으로 사이트를 배포할 때 사용됩니다.

배포 설정 시에는 배포 가이드를 먼저 참고하기를 권장합니다.

테마, 플러그인, 프리셋 설정

List the themes, plugins, and presets for your site in the themes, plugins, and presets fields, respectively. 대부분은 npm 패키지로 제공되는 것들입니다.

docusaurus.config.js
module.exports = {
// ...
plugins: [
'@docusaurus/plugin-content-blog',
'@docusaurus/plugin-content-pages',
],
themes: ['@docusaurus/theme-classic'],
};
tip

Docusaurus supports module shorthands, allowing you to simplify the above configuration as:

docusaurus.config.js
module.exports = {
// ...
plugins: ['content-blog', 'content-pages'],
themes: ['classic'],
};

로컬 디렉터리에서 항목을 가져오게 할 수도 있습니다.

docusaurus.config.js
const path = require('path');

module.exports = {
// ...
themes: [path.resolve(__dirname, '/path/to/docusaurus-local-theme')],
};

플러그인이나 테마 옵션을 설정할 때 이름을 바로 지정하지 않고 이름과 옵션 객체를 포함한 배열로 지정할 수도 있습니다.

docusaurus.config.js
module.exports = {
// ...
plugins: [
[
'content-blog',
{
path: 'blog',
routeBasePath: 'blog',
include: ['*.md', '*.mdx'],
// ...
},
],
'content-pages',
],
};

플러그인이나 테마 옵션을 기본 제공되는 프리셋으로 지정하려면 presets 항목에 해당 옵션을 지정합니다. 예를 들어 아래 설정에서 docs에서는 @docusaurus/plugin-content-docs를 그리고 theme@docusaurus/theme-classic을 프리셋으로 사용합니다.

docusaurus.config.js
module.exports = {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
sidebarPath: require.resolve('./sidebars.js'),
},
theme: {
customCss: [require.resolve('./src/css/custom.css')],
},
},
],
],
};
tip

presets: [['classic', {...}]] 약식 표기는 잘 동작합니다.

For further help configuring themes, plugins, and presets, see Using Plugins.

사용자 지정 설정

도큐사우루스는 docusaurus.config.js 파일 내에 알 수 없는 필드가 추가되지 않도록 보호합니다. 사용자 지정 필드는 customFields 안에 정의할 수 있습니다.

예:

docusaurus.config.js
module.exports = {
// ...
customFields: {
image: '',
keywords: [],
},
// ...
};

컴포넌트에서 설정 객체에 접근하기

사이트의 모든 컴포넌트에서는 설정 객체를 사용할 수 있습니다. 여러분은 siteConfig라는 리액트 컨텍스트를 통해 설정 객체에 접근할 수 있습니다.

간단한 예를 살펴보면 아래와 같습니다.

import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

const Hello = () => {
const {siteConfig} = useDocusaurusContext();
const {title, tagline} = siteConfig;

return <div>{`${title} · ${tagline}`}</div>;
};
tip

클라이언트 쪽에서 해당 필드를 사용할 때 자신만의 JS 파일을 만들어서 ES6 모듈로 가져온다면 docusaurus.config.js 안에 추가할 필요는 없습니다.

사용자 지정 바벨 설정

For new Docusaurus projects, we automatically generated a babel.config.js in the project root.

babel.config.js
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};

Most of the time, this configuration will work just fine. If you want to customize your babel configuration (e.g. to add support for Flow), you can directly edit this file. For your changes to take effect, you need to restart the Docusaurus dev server.