Configuração

Docusaurus tem uma visão única das configurações. Nós o encorajamos a reunir as informações do seu site em um só lugar. Protegemos os campos desse arquivo e facilitamos o acesso a esse objeto de dados em seu site.

Manter um docusaurus.config.js bem mantido ajuda você, seus colaboradores e seus contribuidores de código aberto a se concentrarem na documentação e, ao mesmo tempo, personalizar o site.

O que vai para no docusaurus.config.js?

Você não deve precisar escrever o seu docusaurus.config.js do zero, mesmo que você esteja desenvolvendo seu site. Todos os modelos vêm com um docusaurus.config.js que inclui o padrão para as opções comuns.

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:

• Metadados do site
• Configurações de implantação
• Configurações de tema, plugin e predefinição
• Configurações personalizadas

Para referência exata a cada um dos campos configuráveis, você pode se referir a docusaurus.config.js referência da API.

Metadados do site

Os metadados do site contém metadados globais essenciais, como title, url, baseUrl e favicon.

Eles são usados em vários lugares como o título e os cabeçalhos do seu site, o ícone da aba do navegador, compartilhamento social (Facebook, Twitter) informações ou até mesmo para gerar o caminho correto para servir os seus arquivos estáticos.

Configurações de implantação

Configurações de implantação como projectName e organizationName são usadas quando você faz deploy do seu site com o comando deploy.

É recomendável verificar a documentação de implantação para obter mais informações.

Configurações de tema, plugin e predefinição

Lista o tema, plug-ins, e predefinições para o seu site nos temas, plugins e predefinições de campos, respectivamente. Estes são normalmente pacotes npm:

docusaurus.config.js

module.exports = {  // ...  plugins: [    '@docusaurus/plugin-content-blog',    '@docusaurus/plugin-content-pages',  ],  themes: ['@docusaurus/theme-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: [    [      '@docusaurus/plugin-content-blog',      {        path: 'blog',        routeBasePath: 'blog',        include: ['*.md', '*.mdx'],        // ...      },    ],    '@docusaurus/plugin-content-pages',  ],};

Para especificar opções para um plugin ou tema que está incluído em uma predefinição, passe as opções por meio do campo presets. Neste exemplo, docs refere-se a @docusaurus/plugin-content-docs e theme refere-se ao @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')],        },      },    ],  ],};

Para obter mais ajuda na configuração de temas, plug-ins e predefinições, consulte Usando temas, Usando plug-ins, e Usando predefinições.

Configurações personalizadas

Docusaurus guarda docusaurus.config.js de campos desconhecidos. Para adicionar campos personalizados, defina-os em customFields.

Exemplo:

docusaurus.config.js

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

Acessando configuração de componentes

Seu objeto de configuração será disponibilizado para todos os componentes do seu site. E você pode acessá-los via contexto React como 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

Se você deseja apenas usar esses campos no lado do cliente, pode criar seus próprios arquivos JS e importá-los como módulos ES6, não há necessidade de colocá-los em docusaurus.config.js.

Personalização da configuração do Babel

Para novos projetos Docusaurus, geramos automaticamente um babel.config.js na raiz do projeto.

babel.config.js

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

Na maioria das vezes, esta configuração funcionará bem. Se você deseja personalizá-lo, você pode editar este arquivo diretamente para personalizar a configuração do babel. Para que suas alterações tenham efeito, você precisa reiniciar o Docusaurus devserver.