Configuration
Consultez la référence de l'API de docusaurus.config.js
pour une liste exhaustive d'options.
Docusaurus a une approche unique sur les configurations. Nous vous encourageons à rassembler les informations de votre site en un seul endroit. Nous gardons les champs de ce fichier et facilitons l'accès à cet objet de données à travers votre site.
Le fait de conserver un docusaurus.config.js
bien maintenu vous aide, ainsi que vos collaborateurs et vos contributeurs open source, à pouvoir vous concentrer sur la documentation tout en étant en mesure de personnaliser le site.
Syntaxe pour déclarer docusaurus.config.js
Le fichier docusaurus.config.js
est exécuté dans Node.js et doit exporter soit :
- un objet config
- une fonction qui crée l'objet config
Le fichier docusaurus.config.js
ne prend en charge que le système de module CommonJS :
- Obligatoire : utilisez
module.exports = /* votre config*/
pour exporter votre config Docusaurus - Facultatif : utiliser
require("lib")
pour importer des paquets Node.js - Facultatif : utilisez
await import("lib")
(import dynamique) dans une fonction asynchrone pour importer les paquets Node.js uniquement ESM
Node.js nous donne la possibilité de déclarer notre configuration Docusaurus de différentes manières équivalentes, et tous les exemples de configuration suivants mènent exactement au même résultat :
module.exports = {
title: 'Docusaurus',
url: 'https://docusaurus.io',
// la configuration de votre site ...
};
const config = {
title: 'Docusaurus',
url: 'https://docusaurus.io',
// la config de votre site ...
};
module.exports = config;
module.exports = function configCreator() {
return {
title: 'Docusaurus',
url: 'https://docusaurus.io',
// la config de votre site ...
};
};
module.exports = async function createConfigAsync() {
return {
title: 'Docusaurus',
url: 'https://docusaurus.io',
// la configuration de votre site ...
};
};
L'utilisation d'un créateur de config asynchrone peut être utile pour importer des modules uniquement ESM (notamment la plupart des plugins Remark). Il est possible d'importer de tels modules grâce à des importations dynamiques :
module.exports = async function createConfigAsync() {
// Utilisez une importation dynamique au lieu de require('esm-lib')
const lib = await import('lib');
return {
title: 'Docusaurus',
url: 'https://docusaurus.io',
// le reste de la config de votre site...
};
};
Qu'est-ce qui va dans un docusaurus.config.js
?
Vous ne devriez pas avoir à écrire votre docusaurus.config.js
à partir de zéro, même si vous développez votre site. Tous les templates sont fournis avec un docusaurus.config.js
qui inclut les valeurs par défaut pour les options courantes.
Toutefois, il peut être utile d'avoir une compréhension de haut niveau de la façon dont les configurations sont conçues et mises en œuvre.
La configuration de haut niveau de Docusaurus peut être classée en plusieurs catégories :
Métadonnées du site
Les métadonnées du site contiennent les métadonnées globales essentielles telles que title
, url
, baseUrl
et favicon
.
Ils sont utilisés à de nombreux endroits, comme le titre et les entêtes de votre site, l'icône de l'onglet du navigateur, les informations relatives au partage social (Facebook, Twitter) ou même pour générer le chemin d'accès correct pour servir vos fichiers statiques.
Configurations de déploiement
Les configurations de déploiement telles que projectName
, organizationName
et optionnellement deploymentBranch
sont utilisées lorsque vous déployez votre site avec la commande deploy
.
Il est recommandé de vérifier la documentation de déploiement pour plus d'informations.
Thème, plugin et configurations prédéfinies
Indique les thèmes, les plugins et les presets de votre site dans les champs respectifs themes
, plugins
et presets
. Il s'agit généralement de paquets npm :
module.exports = {
// ...
plugins: [
'@docusaurus/plugin-content-blog',
'@docusaurus/plugin-content-pages',
],
themes: ['@docusaurus/theme-classic'],
};
Docusaurus prend en charge les raccourcis de modules, vous permettant de simplifier la configuration ci-dessus ainsi :
module.exports = {
// ...
plugins: ['content-blog', 'content-pages'],
themes: ['classic'],
};
Ils peuvent également être chargés à partir de répertoires locaux :
const path = require('path');
module.exports = {
// ...
themes: [path.resolve(__dirname, '/path/to/docusaurus-local-theme')],
};
Pour spécifier des options pour un plugin ou un thème, remplacer le nom du plugin ou du thème dans le fichier de configuration par un tableau contenant le nom et un objet d'options :
module.exports = {
// ...
plugins: [
[
'content-blog',
{
path: 'blog',
routeBasePath: 'blog',
include: ['*.md', '*.mdx'],
// ...
},
],
'content-pages',
],
};
Pour spécifier des options pour un plugin ou un thème qui est fourni dans un preset, passez les options à travers le champ presets
. Dans cet exemple, docs
fait référence à @docusaurus/plugin-content-docs
et theme
fait référence à @docusaurus/theme-classic
.
module.exports = {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
sidebarPath: require.resolve('./sidebars.js'),
},
theme: {
customCss: [require.resolve('./src/css/custom.css')],
},
},
],
],
};
Le raccourci presets: [['classic', {...}]]
fonctionne aussi bien.
Pour de plus amples informations sur la configuration des thèmes, des plugins et des presets, consultez Utilisation des plugins.
Configurations personnalisées
Docusaurus préserve docusaurus.config.js
des champs inconnus. Pour ajouter des champs personnalisés, définissez-les dans customFields
.
Exemple :
module.exports = {
// ...
customFields: {
image: '',
keywords: [],
},
// ...
};
Accès à la configuration depuis les composants
Votre objet de configuration sera rendu disponible pour tous les composants de votre site. Et vous pouvez y accéder via le contexte React en tant que siteConfig
.
Exemple basique :
import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
const Hello = () => {
const {siteConfig} = useDocusaurusContext();
const {title, tagline} = siteConfig;
return <div>{`${title} · ${tagline}`}</div>;
};
Si vous voulez juste utiliser ces champs du côté client, vous pouvez créer vos propres fichiers JS et les importer en tant que modules ES6, il n'y a pas besoin de les mettre dans le docusaurus.config.js
.
Personnalisation de la configuration de Babel
Pour les nouveaux projets Docusaurus, nous avons automatiquement généré un babel.config.js
à la racine du projet.
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};
La plupart du temps, cette configuration fonctionnera correctement. Si vous voulez personnaliser votre configuration Babel (par exemple pour ajouter le support de Flow), vous pouvez directement modifier ce fichier. Pour que vos changements prennent effet, vous devez redémarrer le serveur de dev de Docusaurus.