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

Plugin Method References

caution

Lifecycle API는 아직 개발 진행중입니다. Anchor links or even URLs are not guaranteed to be stable.

Plugin APIs are shared by themes and plugins—themes are loaded just like plugins.

Plugin module

Every plugin is imported as a module. The module is expected to have the following members:

  • A default export: the constructor function for the plugin.
  • Named exports: the static methods called before plugins are initialized.

Plugin constructor

The plugin module's default export is a constructor function with the signature (context: LoadContext, options: PluginOptions) => Plugin | Promise<Plugin>.

context

context는 플러그인과 별개이며 같은 오브젝트를 도큐사우루스 웹 사이트 전체에서 사용합니다. context 오브젝트는 다음과 같은 필드를 가지고 있습니다:

interface LoadContext {
siteDir: string;
generatedFilesDir: string;
siteConfig: DocusaurusConfig;
outDir: string;
baseUrl: string;
}

options

options are the second optional parameter when the plugins are used. options은 플러그인마다 정의되어 있으며 사용자가 필요할 때 docusaurus.config.js 파일 내에 설정할 수 있습니다. If there's a validateOptions function exported, the options will be validated and normalized beforehand.

Alternatively, if a preset contains the plugin, the preset will then be in charge of passing the correct options into the plugin. It is up to the individual plugin to define what options it takes.

Here's a mental model for a presumptuous plugin implementation.

// A JavaScript function that returns an object.
// `context`는 도큐사우루스에서 제공합니다. 예: siteConfig는 context에서 접근할 수 있습니다.
// `opts`는 사용자 지정 옵션입니다.
async function myPlugin(context, opts) {
return {
// A compulsory field used as the namespace for directories to cache
// the intermediate data for each plugin.
// 여러분이 사용하는 로컬 플러그인이 다른 플러그인과 충돌하지 않도록
// 유일한 값이 필요할 때 사용합니다.
// 가장 좋은 방법은 프로젝트 이름을 앞에 붙이는 것입니다.
name: 'docusaurus-my-project-cool-plugin',

async loadContent() {
// loadContent Hook는 siteConfig와 env가 로드된 이후에 처리됩니다.
// contentLoaded Hook의 인자로 사용할 자바스크립트 오브젝트를 반환할 수 있습니다.
},

async contentLoaded({content, actions}) {
// contentLoaded Hook는 loadContent Hook가 처리된 이후에 동작합니다.
// `actions`은 도큐사우루스에서 제공하는 API입니다(예. addRoute)
},

async postBuild(props) {
// 도큐사우루스 <build> 다음 동작을 설정합니다.
},

// TODO
async postStart(props) {
// docusaurus <start> finish
},

// TODO
afterDevServer(app, server) {
// https://webpack.js.org/configuration/dev-server/#devserverbefore
},

// TODO
beforeDevServer(app, server) {
// https://webpack.js.org/configuration/dev-server/#devserverafter
},

configureWebpack(config, isServer, utils, content) {
// 내부 웹팩 설정을 수정합니다. 반환되는 값이 오브젝트라면
// webpack-merge를 사용해 마지막 설정과 합쳐집니다.
// 반환되는 값이 함수라면 config를 첫 번째 인자로 isServer 항목을 두 번째 인자로 전달합니다.
},

getPathsToWatch() {
// 변경을 체크할 경로를 설정합니다.
},

getThemePath() {
// 테마 컴포넌트를 찾을 수 있는 디렉터리 경로를
// 반환합니다.
},

getClientModules() {
// 클라이언트 번들로 가져올 모듈 배열을
// 반환합니다. 리액트에서 초기 UI를 렌저링 처리하기 전에
// 전역으로 모듈을 가져옵니다.
},

extendCli(cli) {
// 도큐사우루스 명령행 인터페이스를 확장할 수 있는 추가 명령을 등록합니다.
},

injectHtmlTags({content}) {
// HTML 태그에 head, body 태그를 삽입합니다.
},

async getTranslationFiles({content}) {
// Return translation files
},

translateContent({content, translationFiles}) {
// translate the plugin content here
},

translateThemeConfig({themeConfig, translationFiles}) {
// translate the site themeConfig here
},

async getDefaultCodeTranslationMessages() {
// return default theme translations here
},
};
}

myPlugin.validateOptions = ({options, validate}) => {
const validatedOptions = validate(myValidationSchema, options);
return validationOptions;
};

myPlugin.validateThemeConfig = ({themeConfig, validate}) => {
const validatedThemeConfig = validate(myValidationSchema, options);
return validatedThemeConfig;
};

module.exports = myPlugin;