프리셋

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

프리셋 사용하기

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

npm

npm install --save @docusaurus/preset-classic

Yarn

yarn add @docusaurus/preset-classic

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

docusaurus.config.js

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

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

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: ['@docusaurus/theme-cool', opts.cool],
    plugins: ['@docusaurus/plugin-blog', opts.blog],
  };
};

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

docusaurus.config.js

module.exports = {
  presets: [
    '@docusaurus/preset-my-own',
    {cool: {hello: 'world'}, blog: {path: '/blog'}},
  ],
};

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

docusaurus.config.js

module.exports = {
  themes: ['@docusaurus/themes-cool', {hello: 'world'}],
  plugins: ['@docusaurus/plugin-blog', {path: '/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: {},
        },
      },
    ],
  ],
};