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

docusaurus.config.js

Visão Geral#

docusaurus.config.js contém configurações para o seu site e é colocado no diretório raiz do seu site.

Campos obrigatórios#

título#

  • Tipo: string

Título para o seu site.

docusaurus.config.js
module.exports = {  title: 'Docusaurus',};

url#

  • Tipo: string

URL para o seu site. Isso também pode ser considerado o hostname de nível superior. Por exemplo, https://facebook.github.io é a URL de https://facebook.github.io/metro/, e https://docusaurus.io é a URL de https://docusaurus.io. Este campo é relacionado com o campo baseUrl.

docusaurus.config.js
module.exports = {  url: 'https://docusaurus.io',};

baseUrl#

  • Tipo: string

URL base do seu site. Isso também pode ser considerado o caminho após o host. Por exemplo, /metro/ é a baseUrl de https://facebook.github.io/metro/. Para URLs que não possuem caminho, a baseUrl deve ser definida como /. Este campo é relacionado ao campo url.

docusaurus.config.js
module.exports = {  baseUrl: '/',};

Campos opcionais#

favicon#

  • Tipo: string | undefined

Caminho para o favicon do seu site

Exemplo, se seu favicon estiver em static/img/favicon.ico:

docusaurus.config.js
module.exports = {  favicon: '/img/favicon.ico',};

trailingSlash#

  • Tipo: boolean | undefined

Permite personalizar a presença/ausência de uma barra no final das URLs/links e como os arquivos HTML estáticos são gerados:

  • undefined (padrão): mantém os URLs inalterados e emite /docs/myDoc/index.html para /docs/myDoc.md
  • true: adiciona barras finais a URLs/links e emite /docs/myDoc/index.html para /docs/myDoc.md
  • false: remove barras finais de URLs/links e emite /docs/myDoc.html para /docs/myDoc.md
tip

Cada hospedagem estática do provedor serve arquivos estáticos de forma diferente (esse comportamento pode até mudar ao longo do tempo).

Consulte o guia de implantação e slorber/trailing-slash-guide para escolher a configuração apropriada.

i18n#

  • Tipo: Objeto

O objeto de configuração i18n para localizar seu site.

Exemplo:

docusaurus.config.js
module.exports = {  i18n: {    defaultLocale: 'en',    locales: ['en', 'fr'],    localeConfigs: {      en: {        label: 'English',        direction: 'ltr',      },      fr: {        label: 'Français',        direction: 'ltr',      },    },  },};

noIndex#

  • Tipo: boolean

Esta opção adiciona <meta name="robots" content="noindex, nofollow"> nas páginas, para informar aos mecanismos de busca evitar a indexação do seu site (mais informações aqui).

Exemplo:

docusaurus.config.js
module.exports = {  noIndex: true, // Defaults to `false`};

onBrokenLinks#

  • Tipo: 'ignore' | 'log' | 'warn' | 'error' | 'throw'

O comportamento do Docusaurus, quando detecta qualquer link quebrado.

Por padrão, ele lança um erro, para garantir que você nunca navegue qualquer link quebrado, mas você pode reduzir essa segurança se necessário.

note

A detecção quebrada de links só está disponível para uma compilação de produção (docusaurus build).

onBrokenMarkdownLinks#

  • Tipo: 'ignore' | 'log' | 'warn' | 'error' | 'throw'

O comportamento do Docusaurus, quando detecta qualquer link markdown quebrado.

Por padrão, ele imprime um aviso, para que você saiba sobre o seu link markdown quebrado, mas você pode alterar essa segurança, se necessário.

onDuplicateRoutes#

  • Tipo: 'ignore' | 'log' | 'warn' | 'error' | 'throw'

O comportamento do Docusaurus quando ele detecta quaisquer rotas duplicadas.

Por padrão, ele exibe um aviso após você executar yarn start ou yarn build.

tagline#

  • Tipo: string

A tagline para o seu site.

docusaurus.config.js
module.exports = {  tagline:    'Docusaurus makes it easy to maintain Open Source documentation websites.',};

organizationName#

  • Tipo: string

O usuário ou organização proprietária do repositório. Usado pelo comando de implantação.

docusaurus.config.js
module.exports = {  // Docusaurus' organization is facebook  organizationName: 'facebook',};

projectName#

  • Tipo: string

O nome do repositório do GitHub. Usado pelo comando de implantação.

docusaurus.config.js
module.exports = {  projectName: 'docusaurus',};

githubHost#

  • Tipo: string

O hostname do seu servidor. Útil se você estiver usando o GitHub Enterprise.

docusaurus.config.js
module.exports = {  githubHost: 'github.com',};

githubPort#

  • Tipo: string

A porta do seu servidor. Útil se você estiver usando o GitHub Enterprise.

docusaurus.config.js
module.exports = {  githubPort: '22',};

themeConfig#

  • Tipo: Objeto

O objeto de configuração do tema, para personalizar a interface do usuário do seu site, como barra de navegação, rodapé.

Exemplo:

docusaurus.config.js
module.exports = {  themeConfig: {    hideableSidebar: false,    colorMode: {      defaultMode: 'light',      disableSwitch: false,      respectPrefersColorScheme: true,      switchConfig: {        darkIcon: '🌙',        lightIcon: '\u2600',        // React inline style object        // see https://reactjs.org/docs/dom-elements.html#style        darkIconStyle: {          marginLeft: '2px',        },        lightIconStyle: {          marginLeft: '1px',        },      },    },    navbar: {      title: 'Site Title',      logo: {        alt: 'Site Logo',        src: 'img/logo.svg',      },      items: [        {          to: 'docs/docusaurus.config.js',          activeBasePath: 'docs',          label: 'docusaurus.config.js',          position: 'left',        },        // ... other links      ],    },    footer: {      style: 'dark',      links: [        {          title: 'Docs',          items: [            {              label: 'Docs',              to: 'docs/doc1',            },          ],        },        // ... other links      ],      logo: {        alt: 'Facebook Open Source Logo',        src: 'https://docusaurus.io/img/oss_logo.png',      },      copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, // You can also put own HTML here    },  },};

plugins#

  • Tipo: any[]
docusaurus.config.js
module.exports = {  plugins: [],};

themes#

  • Tipo: any[]
docusaurus.config.js
module.exports = {  themes: [],};

presets#

  • Tipo: any[]
docusaurus.config.js
module.exports = {  presets: [],};

customFields#

Docusaurus guarda docusaurus.config.js de campos desconhecidos. Para adicionar um campo personalizado, defina-o em customFields.

  • Tipo: Objeto
docusaurus.config.js
module.exports = {  customFields: {    admin: 'endi',    superman: 'lol',  },};

Tentar adicionar um campo desconhecido na configuração levará a um erro no tempo de compilação:

Erro: O(s) campo(s) 'foo', 'bar' não são reconhecidos em docusaurus.config.js

scripts#

Uma array de scripts para carregar. Os valores podem ser strings ou objetos simples de mapas de valor do atributo. Os <script> marcadores serão inseridos no HTML <head>.

Observe que <script> adicionado aqui são bloqueadores de renderização, então você pode querer adicionar async: true/defer: true aos objetos.

  • Tipo: (string | Object)[]

Exemplo:

docusaurus.config.js
module.exports = {  scripts: [    // String format.    'https://docusaurus.io/script.js',    // Object format.    {      src:        'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',      async: true,    },  ],};

clientModules#

Um array de módulos de cliente para carregar globalmente no seu site:

Exemplo:

docusaurus.config.js
module.exports = {  clientModules: [    require.resolve('./mySiteGlobalJs.js'),    require.resolve('./mySiteGlobalCss.css'),  ],};

Veja também: getClientModules().

ssrTemplate#

Um template HTML escrito na sintaxe Eta que será usado para renderizar sua aplicação. Isto pode ser usado para definir atributos personalizados nas tags body tags, additional meta personalizar a viewport, etc. Por favor, note que o Docusaurus dependerá do modelo para ser corretamente estruturado para funcionar corretamente, assim que você personalizá-lo, você terá que se certificar de que seu modelo está de acordo com os requisitos do upstream.

  • Tipo: string

Exemplo:

docusaurus.config.js
module.exports = {  ssrTemplate: `<!DOCTYPE html><html <%~ it.htmlAttributes %>>  <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">    <meta name="generator" content="Docusaurus v<%= it.version %>">    <%~ it.headTags %>    <% it.metaAttributes.forEach((metaAttribute) => { %>      <%~ metaAttribute %>    <% }); %>    <% it.stylesheets.forEach((stylesheet) => { %>      <link rel="stylesheet" href="<%= it.baseUrl %><%= stylesheet %>" />    <% }); %>    <% it.scripts.forEach((script) => { %>      <link rel="preload" href="<%= it.baseUrl %><%= script %>" as="script">    <% }); %>  </head>  <body <%~ it.bodyAttributes %> itemscope="" itemtype="http://schema.org/Organization">    <%~ it.preBodyTags %>    <div id="__docusaurus">      <%~ it.appHtml %>    </div>    <div id="outside-docusaurus">      <span>Custom markup</span>    </div>    <% it.scripts.forEach((script) => { %>      <script src="<%= it.baseUrl %><%= script %>"></script>    <% }); %>    <%~ it.postBodyTags %>  </body></html>};

stylesheets#

Uma matriz de fontes CSS a carregar. Os valores podem ser strings ou objetos simples de mapas de valor do atributo. Os <link> marcadores serão inseridos no HTML <head>.

  • Tipo: (string | Object)[]

Exemplo:

docusaurus.config.js
module.exports = {  stylesheets: [    // String format.    'https://docusaurus.io/style.css',    // Object format.    {      href: 'http://mydomain.com/style.css',    },  ],};

titleDelimiter#

  • Tipo: string

Uma string que será usada como delimitador de título na tag <title> gerada.

Exemplo:

docusaurus.config.js
module.exports = {  titleDelimiter: '🦖', // Defaults to `|`};

baseUrlIssueBanner#

  • Tipo: boolean

Quando ativado, irá mostrar um banner caso seu site não consiga carregar seus arquivos CSS ou JavaScript. que é um problema muito comum, geralmente relacionado a um baseUrl errado na configuração do site.

Exemplo:

docusaurus.config.js
module.exports = {  baseUrlIssueBanner: true, // Defaults to `true`};

baseUrlIssueBanner

caution

Esse banner precisa inserir CSS / JS.

Se você tiver uma Política de Segurança de Conteúdorigorosa, você deve desativá-la.