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

Extending infrastructure

Docusaurus has some infrastructure like hot reloading, CLI, and swizzling, that can be extended by external plugins.

getPathsToWatch()

플러그인과 테마 변경을 체크하기 위한 경로를 설정합니다. 설정된 경로는 개발 서버에서 지켜보고 있다가 내용 변경이 생기면 플러그인 수명주기가 다시 로드됩니다. 초기 설정된 플러그인과 테마 모듈은 노드 상에서 contextoptions를 사용해 접근할 수 있습니다. 이를 통해 필요한 디렉터리 정보를 얻을 수 있습니다.

Use this for files that are consumed server-side, because theme files are automatically watched by Webpack dev server.

예:

docusaurus-plugin/src/index.js
const path = require('path');
module.exports = function (context, options) {
return {
name: 'docusaurus-plugin',
getPathsToWatch() {
const contentPath = path.resolve(context.siteDir, options.path);
return [`${contentPath}/**/*.{ts,tsx}`];
},
};
};

extendCli(cli)

도큐사우루스의 명령행 인터페이스를 확장하기 위한 추가 명령어를 등록합니다. cli is a commander object.

caution

The commander version matters! We use commander v5, and make sure you are referring to the right version documentation for available APIs.

예:

docusaurus-plugin/src/index.js
module.exports = function (context, options) {
return {
name: 'docusaurus-plugin',
extendCli(cli) {
cli
.command('roll')
.description('Roll a random number between 1 and 1000')
.action(() => {
console.log(Math.floor(Math.random() * 1000 + 1));
});
},
};
};

getThemePath()

테마 컴포넌트를 찾을 수 있는 디렉터리 경로를 반환합니다. When your users call swizzle, getThemePath is called and its returned path is used to find your theme components.

For example, your getThemePath can be:

my-theme/src/index.js
const path = require('path');

module.exports = function (context, options) {
return {
name: 'my-theme',
getThemePath() {
return path.resolve(__dirname, './theme');
},
};
};

getTypeScriptThemePath()

getThemePath()와 비슷하게 타입스크립트 테마 컴포넌트 소스 코드를 찾을 수 있는 디렉터리 경로를 반환합니다. This path is purely for swizzling TypeScript theme components, and theme components under this path will not be resolved by Webpack. Therefore, it is not a replacement for getThemePath(). Typically, you can make the path returned by getTypeScriptThemePath() be your source directory, and make the path returned by getThemePath() be the compiled JavaScript output.

tip

For TypeScript theme authors: you are strongly advised to make your compiled output as human-readable as possible. Only strip type annotations and don't transpile any syntaxes, because they will be handled by Webpack's Babel loader based on the targeted browser versions.

You should also format these files with Prettier. Remember—JS files can and will be directly consumed by your users.

예:

my-theme/src/index.js
const path = require('path');

module.exports = function (context, options) {
return {
name: 'my-theme',
getThemePath() {
// Where compiled JavaScript output lives
return path.join(__dirname, '../lib/theme');
},
getTypeScriptThemePath() {
// Where TypeScript source code lives
return path.resolve(__dirname, '../src/theme');
},
};
};

getSwizzleComponentList()

This is a static method, not attached to any plugin instance.

Returns a list of stable components that are considered safe for swizzling. These components will be swizzlable without --danger. All components are considered unstable by default. If an empty array is returned, all components are considered unstable. If undefined is returned, all components are considered stable.

my-theme/src/index.js
const swizzleAllowedComponents = [
'CodeBlock',
'DocSidebar',
'Footer',
'NotFound',
'SearchBar',
'hooks/useTheme',
'prism-include-languages',
];

myTheme.getSwizzleComponentList = () => swizzleAllowedComponents;