Aller au contenu principal
Version: 2.0.0-beta.9

Presets

Les presets sont des collections de plugins et de thèmes.

Utiliser les presets

Un preset est généralement un paquet npm, donc vous les installez comme les autres paquets npm en utilisant npm.

npm install --save @docusaurus/preset-classic

Puis, ajoutez-le dans l'option presets de docusaurus.config.js de votre site :

docusaurus.config.js
module.exports = {
// ...
presets: ['@docusaurus/preset-classic'],
};

Pour charger des préréglages à partir de votre répertoire local, indiquez comment les résoudre (path.resolve) :

docusaurus.config.js
const path = require('path');

module.exports = {
// ...
presets: [path.resolve(__dirname, '/path/to/docusaurus-local-presets')],
};

Presets -> thèmes et plugins

Les presets sont une fonction de raccourci pour ajouter des plugins et des thèmes à votre configuration de Docusaurus. Par exemple, vous pouvez spécifier un prest qui inclut les thèmes et plugins suivants,

module.exports = function preset(context, opts = {}) {
return {
themes: ['@docusaurus/theme-cool', opts.cool],
plugins: ['@docusaurus/plugin-blog', opts.blog],
};
};

puis dans votre configuration de Docusaurus, vous pouvez configurer le preset à la place :

docusaurus.config.js
module.exports = {
presets: [
'@docusaurus/preset-my-own',
{cool: {hello: 'world'}, blog: {path: '/blog'}},
],
};

Cela équivaut à :

docusaurus.config.js
module.exports = {
themes: ['@docusaurus/themes-cool', {hello: 'world'}],
plugins: ['@docusaurus/plugin-blog', {path: '/blog'}],
};

Ceci est particulièrement utile lorsque certains plugins et thèmes sont destinés à être utilisés ensemble.

Presets officiels

@docusaurus/preset-classic

Le preset classic qui est généralement fourni par défaut avec le nouveau site web de Docusaurus. C'est un ensemble de plugins et de thèmes.

ThèmesPlugins
@docusaurus/theme-classic@docusaurus/plugin-content-docs
@docusaurus/theme-search-algolia@docusaurus/plugin-content-blog
@docusaurus/plugin-content-pages
@docusaurus/plugin-debug
@docusaurus/plugin-google-analytics
@docusaurus/plugin-google-gtag
@docusaurus/plugin-sitemap

Pour spécifier individuellement les options du plugin, vous pouvez fournir les champs nécessaires à certains plugins, par exemple customCss pour @docusaurus/theme-classic, passez-les dans le champ preset, comme ceci :

docusaurus.config.js
module.exports = {
presets: [
[
'@docusaurus/preset-classic',
{
// Débogage par défaut à true dans dev, false dans prod
debug: undefined,
// Sera passé à @docusaurus/theme-classic.
theme: {
customCss: [require.resolve('./src/css/custom.css')],
},
// Sera passé à @docusaurus/plugin-content-docs (false pour désactiver)
docs: {},
// Sera passé à @docusaurus/plugin-content-blog (false pour désactiver)
blog: {},
// Sera passé à @docusaurus/plugin-content-pages (false pour désactiver)
pages: {},
// Sera passé à @docusaurus/plugin-content-sitemap (false pour désactiver)
sitemap: {},
},
],
],
};

En plus de ces plugins et thèmes, @docusaurus/theme-classic ajoute remark-admonitions en tant que plugin de remarque à @docusaurus/plugin-content-blog et @docusaurus/plugin-content-docs.

La clé admonitions sera passée comme options vers remark-admonitions. Passer le à false empêchera le plugin d'être ajouté à MDX.

docusaurus.config.js
module.exports = {
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
// options pour remark-admonitions
admonitions: {},
},
},
],
],
};