Ir para o conteúdo principal
Version: 2.0.0-beta.8

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:

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.