Aller au contenu principal
Version: 2.0.0-alpha.72

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-name

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

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

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 en quelque sorte 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: [
require.resolve('@docusaurus/themes-cool'),
require.resolve('@docusaurus/themes-bootstrap'),
],
plugins: [require.resolve('@docusaurus/plugin-blog')],
};
};

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

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

Cela équivaut à :

docusaurus.config.js
module.exports = {
themes: ['@docusaurus/themes-cool', '@docusaurus/themes-bootstrap'],
plugins: ['@docusaurus/plugin-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: {},
},
},
],
],
};

@docusaurus/preset-bootstrap#

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-bootstrap@docusaurus/plugin-content-docs
@docusaurus/plugin-content-blog
@docusaurus/plugin-content-pages
@docusaurus/plugin-debug

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

docusaurus.config.js
module.exports = {
presets: [
[
'@docusaurus/preset-bootstrap',
{
// Débogage par défaut à true dans dev, false dans prod
debug: undefined,
// Sera passé à @docusaurus/plugin-content-docs (false pour désactiver)
docs: {},
// Sera passé à @docusaurus/plugin-content-blog (false pour désactiver)
blog: {},
},
],
],
};
attention

Ce preset est en cours de réalisation