Plugins
Plugins são os blocos de construção de recursos de um site do Docusaurus 2. Cada plugin lida com seu próprio recurso. Plugins may work and be distributed as part of a bundle via presets.
Creating plugins
A plugin is a function that takes two parameters: context
and options
. It returns a plugin instance object (or a promise). You can create plugins as functions or modules. For more information, refer to the plugin method references section.
Function definition
You can use a plugin as a function directly included in the Docusaurus config file:
module.exports = {
// ...
plugins: [
async function myPlugin(context, options) {
// ...
return {
name: 'my-plugin',
async loadContent() {
// ...
},
async contentLoaded({content, actions}) {
// ...
},
/* other lifecycle API */
};
},
],
};
Module definition
You can use a plugin as a module path referencing a separate file or npm package:
module.exports = {
// ...
plugins: [
// without options:
'./my-plugin',
// or with options:
['./my-plugin', options],
],
};
Then in the folder my-plugin
, you can create an index.js
such as this:
module.exports = async function myPlugin(context, options) {
// ...
return {
name: 'my-plugin',
async loadContent() {
/* ... */
},
async contentLoaded({content, actions}) {
/* ... */
},
/* other lifecycle API */
};
};
You can view all plugins installed in your site using the debug plugin's metadata panel.
Plugins come as several types:
package
: an external package you installedproject
: a plugin you created in your project, given to Docusaurus as a local file pathlocal
: a plugin created using the function definitionsynthetic
: a "fake plugin" Docusaurus created internally, so we take advantage of our modular architecture and don't let the core do much special work. You won't see this in the metadata because it's an implementation detail.
You can access them on the client side with useDocusaurusContext().siteMetadata.pluginVersions
.
Plugin design
Docusaurus' implementation of the plugins system provides us with a convenient way to hook into the website's lifecycle to modify what goes on during development/build, which involves (but is not limited to) extending the webpack config, modifying the data loaded, and creating new components to be used in a page.