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

Arquivos estáticos

Todo site precisa de assets: imagens, folhas de estilo, favicons etc. By default, you are suggested to put these assets in the static folder.

Cada arquivo que você colocar dentro esse diretório será copiado na raiz da pasta de compilação gerada com a hierarquia de diretório preservada. Ex. se você adicionar um arquivo chamado sun.jpg na pasta estática, ele será copiado para build/sun.jpg.

Isto significa que:

  • para o site baseUrl: '/', a imagem /static/img/docusaurus.png será exibida em /img/docusaurus.png.
  • para o site baseUrl: '/subpath/', a imagem /static/img/docusaurus.png será exibida em /subpath/img/docusaurus.png.

You can customize the static directory sources in docusaurus.config.js. For example, we can add public as another possible path:

docusaurus.config.js
module.exports = {
title: 'My site',
staticDirectories: ['public', 'static'],
// ...
};

Now, all files in public as well as static will be copied to the build output.

Referenciando seu arquivo estático

In JSX, you can reference assets from the static folder in your code using absolute paths, but this is not ideal because changing the site baseUrl will break those links. For the image <img src="/img/docusaurus.png" /> served at https://example.com/test, the browser will try to resolve it from the URL root, i.e. as https://example.com/img/docusaurus.png, which will fail because it's actually served at https://example.com/test/img/docusaurus.png.

Você pode importar/require() o arquivo estático (recomendado) ou usar a função de utilitário useBaseUrl: ambos anexam o baseUrl nos caminhos para você.

info

In Markdown, things are different: you can stick to use absolute paths because Docusaurus actually handles them as require calls instead of URLs when parsing the Markdown. See Markdown static assets.

Examples

MyComponent.js
import DocusaurusImageUrl from '@site/static/img/docusaurus.png';

<img src={DocusaurusImageUrl} />;
MyComponent.js
<img src={require('@site/static/img/docusaurus.png').default} />
MyComponent.js
import useBaseUrl from '@docusaurus/useBaseUrl';

<img src={useBaseUrl('/img/docusaurus.png')} />;

Você também pode importar arquivos SVG: eles serão transformados em componentes React.

MyComponent.js
import DocusaurusLogoWithKeytar from '@site/static/img/docusaurus_keytar.svg';

<DocusaurusLogoWithKeytar title="Docusaurus Logo" className="logo" />;

Ressalvas

Tenha em mente que:

  • Por padrão, nenhum dos arquivos na pasta static será pós-processado, criado hash ou minificado.
  • Os arquivos referenciados através de caminhos absolutos codificados não serão detectados no tempo de compilação e resultarão em um erro 404.
  • Por padrão, o GitHub Pages executa arquivos publicados através do Jekyll. Uma vez que o Jekyll irá descartar quaisquer arquivos que comecem com _, é recomendável que você desative o Jekyll adicionando um arquivo vazio chamado .nojekyll para o seu diretório static se você estiver usando páginas do GitHub para hospedagem.