Configuração

Docusaurus tem uma visão única das configurações. We encourage you to congregate information about your site into one place. We guard the fields of this file and facilitate making this data object accessible across your site.

Keeping a well-maintained docusaurus.config.js helps you, your collaborators, and your open source contributors to be able to focus on documentation while still being able to customize the site.

What goes into a docusaurus.config.js?

You should not have to write your docusaurus.config.js from scratch even if you are developing your site. All templates come with a docusaurus.config.js that includes defaults for the common options.

No entanto, pode ser útil se você tiver um alto nível de compreensão de como as configurações são projetadas e implementadas.

A visão geral de alto nível da configuração do Docusaurus pode ser categorizada em:

• Site metadata
• Deployment configurations
• Theme, plugin, and preset configurations
• Custom configurations

For exact reference to each of the configurable fields, you may refer to docusaurus.config.js API reference.

Site metadata

Site metadata contains the essential global metadata such as title, url, baseUrl, and favicon.

They are used in several places such as your site's title and headings, browser tab icon, social sharing (Facebook, Twitter) information or even to generate the correct path to serve your static files.

Deployment configurations

Deployment configurations such as projectName, organizationName, and optionally deploymentBranch are used when you deploy your site with the deploy command.

It is recommended to check the deployment docs for more information.

Theme, plugin, and preset configurations

List the themes, plugins, and presets for your site in the themes, plugins, and presets fields, respectively. Estes são normalmente pacotes npm:

docusaurus.config.js

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

tip

Docusaurus supports module shorthands, allowing you to simplify the above configuration as:

docusaurus.config.js

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

Eles também podem ser carregados a partir de diretórios locais:

docusaurus.config.js

const path = require('path');

module.exports = {
  // ...
  themes: [path.resolve(__dirname, '/path/to/docusaurus-local-theme')],
};

Para especificar opções para um plugin ou tema, substitua o nome do plugin ou tema no arquivo de configuração por uma matriz contendo o nome e um objeto de opções:

docusaurus.config.js

module.exports = {
  // ...
  plugins: [
    [
      'content-blog',
      {
        path: 'blog',
        routeBasePath: 'blog',
        include: ['*.md', '*.mdx'],
        // ...
      },
    ],
    'content-pages',
  ],
};

To specify options for a plugin or theme that is bundled in a preset, pass the options through the presets field. In this example, docs refers to @docusaurus/plugin-content-docs and theme refers to @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')],
        },
      },
    ],
  ],
};

tip

The presets: [['classic', {...}]] shorthand works as well.

For further help configuring themes, plugins, and presets, see Using Plugins.

Custom configurations

Docusaurus guards docusaurus.config.js from unknown fields. To add custom fields, define them in customFields.

Exemplo:

docusaurus.config.js

module.exports = {
  // ...
  customFields: {
    image: '',
    keywords: [],
  },
  // ...
};

Accessing configuration from components

Seu objeto de configuração será disponibilizado para todos os componentes do seu site. And you may access them via React context as siteConfig.

Exemplo básico:

import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

const Hello = () => {
  const {siteConfig} = useDocusaurusContext();
  const {title, tagline} = siteConfig;

  return <div>{`${title} · ${tagline}`}</div>;
};

tip

If you just want to use those fields on the client side, you could create your own JS files and import them as ES6 modules, there is no need to put them in docusaurus.config.js.

Customizing Babel Configuration

For new Docusaurus projects, we automatically generated a babel.config.js in the project root.

babel.config.js

module.exports = {
  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};

Most of the time, this configuration will work just fine. If you want to customize your Babel configuration (e.g. to add support for Flow), you can directly edit this file. For your changes to take effect, you need to restart the Docusaurus dev server.