Aller au contenu principal
Version : Canary 🚧

Configuration

info

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
info

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 :

docusaurus.config.js
module.exports = {
  title: 'Docusaurus',
  url: 'https://docusaurus.io',
  // la configuration de votre site ...
};
docusaurus.config.js
const config = {
  title: 'Docusaurus',
  url: 'https://docusaurus.io',
  // la config de votre site ...
};

module.exports = config;
docusaurus.config.js
module.exports = function configCreator() {
  return {
    title: 'Docusaurus',
    url: 'https://docusaurus.io',
    // la config de votre site ...
  };
};
docusaurus.config.js
module.exports = async function createConfigAsync() {
  return {
    title: 'Docusaurus',
    url: 'https://docusaurus.io',
    // la configuration de votre site ...
  };
};
Utilisation des paquets uniquement ESM

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 :

docusaurus.config.js
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 :

docusaurus.config.js
module.exports = {
  // ...
  plugins: [
    '@docusaurus/plugin-content-blog',
    '@docusaurus/plugin-content-pages',
  ],
  themes: ['@docusaurus/theme-classic'],
};
astuce

Docusaurus prend en charge les raccourcis de modules, vous permettant de simplifier la configuration ci-dessus ainsi :

docusaurus.config.js
module.exports = {
  // ...
  plugins: ['content-blog', 'content-pages'],
  themes: ['classic'],
};

Ils peuvent également être chargés à partir de répertoires locaux :

docusaurus.config.js
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 :

docusaurus.config.js
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.

docusaurus.config.js
module.exports = {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
        },
        theme: {
          customCss: [require.resolve('./src/css/custom.css')],
        },
      },
    ],
  ],
};
astuce

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 :

docusaurus.config.js
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>;
};
astuce

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.

babel.config.js
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.