3 KiB
| id | title |
|---|---|
| using-plugins | Using Plugins |
Plugins are the building blocks which add features to a Docusaurus 2 site. Each plugin handles its own individual feature. Plugins may work be bundled together and distributed via presets.
Docusaurus 2 provides a few essential plugins such as Google Analytics and Sitemap. You may also write your own plugins for customized features.
In this doc, we talk about how to use plugins with Docusaurus' official plugins. To learn about the design implementation and how to write your own plugins, check out Advanced Guides: Plugins. For API reference, check out API Reference: Plugins.
Using Plugins
To use a plugin, add the plugin to the plugins field of your docusaurus.config.js.
For the most basic usage of plugins, you can providing just the plugin name or the absolute path to the plugin. For plugins that require options, specify the plugin as an array where the first value is the plugin name/path and second value is an options object, e.g. ['plugin-name', { path: 'foo/bar' }] array.
// docusaurus.config.js
module.exports = {
plugins: [
// Basic usage.
'@docusaurus/plugin-google-analytics',
// With options object.
[
'@docusaurus/plugin-sitemap',
{
cacheTime: 600 * 1000,
},
],
],
};
Passing Options to Docusaurus Plugins Within Preset
Docusaurus' classic template is scaffolded with the classic preset, which in turn includes the following official plugins. You may read more about the configurations of these plugins in our Advanced Guides: Plugins.
@docusaurus/plugin-content-blog@docusaurus/plugin-content-docs@docusaurus/plugin-content-pages@docusaurus/plugin-google-analytics@docusaurus/plugin-google-gtag@docusaurus/plugin-sitemap
If you initialized your site using the classic template, you do not have to specify them individually in your docusaurus.config.js. To provide the neccesary fields to certain plugins, i.e. trackingID of @docusaurus/plugin-content-analytics, pass them in the preset field.
// docusaurus.config.js
module.exports = {
presets: [
[
'@docusaurus/preset-classic',
{
// Will be passed to @docusaurus/plugin-content-docs.
docs: {
sidebarPath: require.resolve('./sidebars.js'),
},
// Will be passed to @docusaurus/theme-classic.
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
// Will be passed to @docusaurus/plugin-google-analytics.
googleAnalytics: {
trackingID: 'UA-000000-2',
},
...
},
],
],
};