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

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:

# Your doc
/website/docs/myFeature.mdx

# Some assets you want to use
/website/docs/assets/docusaurus-asset-example-banner.png
/website/docs/assets/docusaurus-asset-example.docx

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:

Meu texto alternativo 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.

# My Markdown page

<a
target="_blank"
href={require('./assets/docusaurus-asset-example.docx').default}>
Download this docx
</a>

or

[Download this docx using Markdown](./assets/docusaurus-asset-example.docx)
Download this docx

Download this docx using 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

Docusaurus supports themed images: the ThemedImage component (included in the themes) allows you to switch the image source based on the current theme.

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'),
}}
/>;
Imagem com tema no DocusaurusImagem com tema no Docusaurus