mirror of
https://github.com/facebook/docusaurus.git
synced 2025-07-28 22:18:44 +02:00
docs(v2): write abit about plugin api
This commit is contained in:
parent
a1ee1ab140
commit
ec221f5b7c
4 changed files with 109 additions and 119 deletions
|
@ -3,7 +3,110 @@ id: plugins-api
|
|||
title: Plugins
|
||||
---
|
||||
|
||||
TODO: Plugin lifecycle APIs.
|
||||
Plugins are one of the best ways to add functionality to our Docusaurus. Plugins allow third-party developers to extend or modify the default functionality that Docusaurus provides.
|
||||
|
||||
## Installing a Plugin
|
||||
|
||||
A plugin is usually a dependency, so you install them like other packages in node using NPM.
|
||||
|
||||
```bash
|
||||
yarn add docusaurus-plugin-name
|
||||
```
|
||||
|
||||
Then you add it in your site's `docusaurus.config.js` plugin arrays:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
plugins: [
|
||||
{
|
||||
name: '@docusaurus/plugin-content-pages',
|
||||
},
|
||||
{
|
||||
// Plugin with options
|
||||
name: '@docusaurus/plugin-content-blog',
|
||||
options: {
|
||||
include: ['*.md', '*.mdx'],
|
||||
path: 'blog',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
Docusaurus can also load plugins from your local folder, you can do something like below:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
plugins: [
|
||||
{
|
||||
path: '/path/to/docusaurus-local-plugin',
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
## Basic Plugin Architecture
|
||||
|
||||
For examples, please refer to several official plugins created.
|
||||
|
||||
```js
|
||||
// A JavaScript class
|
||||
class DocusaurusPlugin {
|
||||
constructor(context, options) {
|
||||
// Initialization hook
|
||||
|
||||
// options are the plugin options set on config file
|
||||
this.options = {...options};
|
||||
|
||||
// context are provided from docusaurus. Example: siteConfig can be accessed from context
|
||||
this.context = context;
|
||||
}
|
||||
|
||||
getName() {
|
||||
// plugin name identifier
|
||||
}
|
||||
|
||||
|
||||
async loadContent()) {
|
||||
// The loadContent hook is executed after siteConfig and env has been loaded
|
||||
// You can return a JavaScript object that will be passed to contentLoaded hook
|
||||
}
|
||||
|
||||
async contentLoaded({content, actions}) {
|
||||
// contentLoaded hook is done after loadContent hook is done
|
||||
// actions are set of functional API provided by Docusaurus. e.g: addRoute
|
||||
}
|
||||
|
||||
async postBuild(props) {
|
||||
// after docusaurus <build> finish
|
||||
}
|
||||
|
||||
// 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) {
|
||||
// Modify internal webpack config. If returned value is an Object, it will be merged into the final config using webpack-merge; If returned value is a function, it will receive the config as the 1st argument and an isServer flag as the 2nd argument.
|
||||
}
|
||||
|
||||
getPathsToWatch() {
|
||||
// path to watch
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
#### References
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue