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

npm install --save docusaurus-preset-name

Yarn

yarn add 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èmes	Plugins
@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

Un autre preset qui utilise le style Bootstrap.

Thèmes	Plugins
@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: {},      },    ],  ],};

caution

Ce preset est en cours de réalisation