Assets

Às vezes você quer vincular arquivos estáticos diretamente dos arquivos Markdown, e é conveniente co-localizar o ativo ao lado do arquivo Markdown que o usa.

Nós estamos configurando o Webpack loaders para manipular os tipos de arquivos mais comuns, para que quando você importar um arquivo, você obtém sua URL e o arquivo é automaticamente copiado para a pasta de saída.

Vamos imaginar a seguinte estrutura de arquivo:

# Seu documento/website/docs/myFeature.mdx
# Alguns arquivos que você deseja usar/website/docs/assets/docusaurus-asset-example-banner.png/website/docs/assets/docusaurus-asset-example-pdf.pdf

Imagens

Você pode exibir imagens de três maneiras diferentes: sintaxe Markdown, JSX require ou sintaxe ES imports.

Exibir imagens usando sintaxe simples Markdown:

![Banner de exemplo](./assets/docusaurus-asset-example-banner.png)

Exibe imagens usando inline CommonJS require na tag JSX:

<img  src={require('./assets/docusaurus-asset-example-banner.png').default}  alt="Example banner"/>

Exibir imagens usando ES import sintaxe e tag JSX:

import myImageUrl from './assets/docusaurus-asset-example-banner.png';
<img src={myImageUrl} alt="Example banner" />

Isto resulta na exibição da imagem:

note

Se você estiver usando @docusaurus/plugin-ideal-image, você precisa usar o componente de imagem dedicado, conforme documentado.

Arquivos

Da mesma forma, você pode vincular os assets existentes exigindo eles e usando a URL retornada nos vídeos, links, etc.

# Minha página de Markdown
<a  target="_blank"  href={require('./assets/docusaurus-asset-example-pdf.pdf').default}>  Baixe este PDF</a>
ou
[Baixe este PDF usando Markdown](./assets/docusaurus-asset-example-pdf.pdf)

Baixar este PDF

Baixar este PDF usando Markdown

SVGs inline

O Docusaurus suporta SVGs inline.

import DocusaurusSvg from './docusaurus.svg';
<DocusaurusSvg />;

Isto pode ser útil se você quiser alterar a parte da imagem SVG via CSS. Por exemplo, você pode alterar uma das cores de SVG com base no tema atual.

import DocusaurusSvg from './docusaurus.svg';
<DocusaurusSvg className="themedDocusaurus" />;

html[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] {  fill: greenyellow;}
html[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {  fill: seagreen;}

Imagens com tema

O Docusaurus suporta imagens com tema: o componente ThemedImage (incluído nos temas classic/bootstrap) permite que você alterne a fonte da imagem com base no tema atual.

import ThemedImage from '@theme/ThemedImage';
<ThemedImage  alt="Imagem com tema no Docusaurus"  sources={{    light: useBaseUrl('/img/docusaurus_light.svg'),    dark: useBaseUrl('/img/docusaurus_dark.svg'),  }}/>;