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
The docusaurus.config.js file supports:
Contraintes :
- Required: use
export default /* your config*/(ormodule.exportsto export your Docusaurus config - Optional: use
import Lib from 'lib'(orrequire('lib')) to import Node.js packages
Docusaurus gives us the ability to declare its configuration in various equivalent ways, and all the following config examples lead to the exact same result:
export default {
title: 'Docusaurus',
url: 'https://docusaurus.io',
// your site config ...
};
module.exports = {
title: 'Docusaurus',
url: 'https://docusaurus.io',
// la config de votre site ...
};
import type {Config} from '@docusaurus/types';
export default {
title: 'Docusaurus',
url: 'https://docusaurus.io',
// your site config ...
} satisfies Config;
const config = {
title: 'Docusaurus',
url: 'https://docusaurus.io',
// your site config ...
};
export default config;
export default function configCreator() {
return {
title: 'Docusaurus',
url: 'https://docusaurus.io',
// your site config ...
};
}
export default async function createConfigAsync() {
return {
title: 'Docusaurus',
url: 'https://docusaurus.io',
// your site config ...
};
}
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 :
export default async function createConfigAsync() {
// Use a dynamic import instead of require('esm-lib')
const lib = await import('lib');
return {
title: 'Docusaurus',
url: 'https://docusaurus.io',
// rest of your site config...
};
}
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.
Configurations de thème, plugin et preset
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 :
export default {
// ...
plugins: [
'@docusaurus/plugin-content-blog',
'@docusaurus/plugin-content-pages',
],
themes: ['@docusaurus/theme-classic'],
};
Docusaurus prend en charge les raccourcis de module, vous permettant de simplifier la configuration ci-dessus comme suit :
export default {
// ...
plugins: ['content-blog', 'content-pages'],
themes: ['classic'],
};
Ils peuvent également être chargés à partir de répertoires locaux :
import path from 'path';
export default {
// ...
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 :
export default {
// ...
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.
export default {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
sidebarPath: './sidebars.js',
},
theme: {
customCss: ['./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 :
export default {
// ...
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.
export default {
presets: ['@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.