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

프리셋

프리셋(Preset)은 플러그인과 테마의 묶음입니다.

프리셋 사용하기#

프리셋은 npm 패키지 형태로 제공됩니다. npm을 사용해 다른 npm 패키지처럼 설치할 수 있습니다.

npm install --save docusaurus-preset-name

설치 후에는 docusaurus.config.js 파일에서 presets 옵션을 설정합니다.

docusaurus.config.js
module.exports = {
// ...
presets: ['@docusaurus/preset-xxxx'],
};

로컬 디렉터리에서 프리셋을 불러오기 위해서는 아래와 같이 설정해주어야 합니다.

docusaurus.config.js
const path = require('path');
module.exports = {
// ...
presets: [path.resolve(__dirname, '/path/to/docusaurus-local-presets')],
};

프리셋 -> 테마와 플러그인#

프리셋은 여러분의 도큐사우루스 설정에 플러그인과 테마를 한 번에 추가할 수 있는 도구라고 할 수 있습니다. 예를 들어 다음과 같은 테마와 플러그인을 포함하는 프리셋을 설정할 수 있습니다.

module.exports = function preset(context, opts = {}) {
return {
themes: [
require.resolve('@docusaurus/themes-cool'),
require.resolve('@docusaurus/themes-bootstrap'),
],
plugins: [require.resolve('@docusaurus/plugin-blog')],
};
};

그런 다음 도큐사우루스 설정에서 프리셋 항목을 지정해줍니다.

docusaurus.config.js
module.exports = {
// ...
presets: ['@docusaurus/preset-my-own'],
};

위의 방법은 아래와 같이 설정한 것과 같습니다.

docusaurus.config.js
module.exports = {
themes: ['@docusaurus/themes-cool', '@docusaurus/themes-bootstrap'],
plugins: ['@docusaurus/plugin-blog'],
};

프리셋은 특정 플러그인과 테마를 같이 사용하려고 할 때 유용한 기능입니다.

공식 지원하는 프리셋#

@docusaurus/preset-classic#

새로운 도큐사우루스 웹 사이트를 만들 때 기본으로 프리셋을 제공합니다. 아래 목록에 있는 플러그인과 테마 묶음입니다.

테마플러그인
@docusaurus/theme-classic@docusaurus/plugin-content-docs
@docusaurus/theme-search-algolia@docusaurus/plugin-content-blog
@docusaurus/plugin-content-pages
@docusaurus/plugin-debug
@docusaurus/plugin-google-analytics
@docusaurus/plugin-google-gtag
@docusaurus/plugin-sitemap

플러그인 옵션을 개별적으로 지정하고 싶다면 특정 플러그인에서 필요한 필드를 전달할 수 있습니다. 예를 들어 @docusaurus/theme-classic에서 customCss 항목을 프리셋 필드에 전달합니다.

docusaurus.config.js
module.exports = {
presets: [
[
'@docusaurus/preset-classic',
{
// 디버그 항목은 개발 시에는 true로 설정하고 배포 시에는 false로 설정합니다.
debug: undefined,
// 필드값을 @docusaurus/theme-classic로 전달합니다.
theme: {
customCss: [require.resolve('./src/css/custom.css')],
},
// 필드값을 @docusaurus/plugin-content-docs로 전달합니다(비활성화하려면 false를 설정합니다).
docs: {},
// 필드값을 @docusaurus/plugin-content-blog로 전달합니다(비활성화하려면 false를 설정합니다).
blog: {},
// 필드값을 @docusaurus/plugin-content-pages로 전달합니다(비활성화하려면 false를 설정합니다).
pages: {},
// 필드값을 @docusaurus/plugin-content-sitemap로 전달합니다(비활성화하려면 false를 설정합니다).
sitemap: {},
},
],
],
};

플러그인이나 테마 외에도 @docusaurus/theme-classicremark-admonitions@docusaurus/plugin-content-blog@docusaurus/plugin-content-docs에 remark 플러그인으로 추가할 수 있습니다.

admonitions 항목은 옵션으로 remark-admonitions에 전달됩니다. false 값을 설정하면 플러그인이 MDX에 추가되지 않습니다.

docusaurus.config.js
module.exports = {
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
// oremark-admonitions 옵션
admonitions: {},
},
},
],
],
};

@docusaurus/preset-bootstrap#

새로운 도큐사우루스 웹 사이트를 만들 때 기본으로 프리셋을 제공합니다. 아래 목록에 있는 플러그인과 테마 묶음입니다.

테마플러그인
@docusaurus/theme-bootstrap@docusaurus/plugin-content-docs
@docusaurus/plugin-content-blog
@docusaurus/plugin-content-pages
@docusaurus/plugin-debug

플러그인 옵션을 개별적으로 지정하고 싶다면 특정 플러그인에서 필요한 필드를 전달할 수 있습니다. 예를 들어 @docusaurus/theme-bootstrap에서 docs 항목을 프리셋 필드에 전달합니다.

docusaurus.config.js
module.exports = {
presets: [
[
'@docusaurus/preset-bootstrap',
{
// 디버그 항목은 개발 시에는 true로 설정하고 배포 시에는 false로 설정합니다.
debug: undefined,
// 필드값을 @docusaurus/plugin-content-docs로 전달합니다(비활성화하려면 false를 설정합니다).
docs: {},
// 필드값을 @docusaurus/plugin-content-blog로 전달합니다(비활성화하려면 false를 설정합니다).
blog: {},
},
],
],
};
caution

프리셋 기능은 아직 개발 진행중입니다.