프리셋

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

프리셋 사용하기

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

npm

npm install --save docusaurus-preset-name

Yarn

yarn add 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-classic은 remark-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

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