Ressources

Parfois, vous souhaitez établir un lien vers des ressources statiques directement à partir de fichiers Markdown, et il est pratique de placer la ressource à côté du fichier Markdown qui l'utilise.

Nous avons configuré des chargeurs Webpack pour gérer les types de fichiers les plus courants, de sorte que lorsque vous importez un fichier, vous obtenez son url et la ressource est automatiquement copiée dans le dossier de production.

Imaginons la structure de fichier suivante :

# Votre doc/website/docs/myFeature.mdx
# Quelques ressources que vous voulez utiliser/website/docs/assets/docusaurus-asset-example-banner.png/website/docs/assets/docusaurus-asset-example-pdf.pdf

Images

Vous pouvez afficher les images de trois manières différentes : la syntaxe Markdown, la syntaxe JSX require ou la syntaxe ES imports.

Affichez les images en utilisant la syntaxe simple de Markdown :

![Exemple de bannière](./assets/docusaurus-asset-example-banner.png)

Affichez les images en utilisant en ligne le CommonJS require dans la balise image de JSX :

<img  src={require('./assets/docusaurus-asset-example-banner.png').default}  alt="Exemple de bannière"/>

Affichez les images en utilisant la syntaxe ES import et la balise image JSX :

import myImageUrl from './assets/docusaurus-asset-example-banner.png';
<img src={myImageUrl} alt="Exemple de bannière" />

Ceci se traduit par l'affichage de l'image :

remarque

Si vous utilisez @docusaurus/plugin-ideal-image, vous devez utiliser le composant d'image dédié, comme documenté.

Fichiers

De la même manière, vous pouvez établir un lien avec des ressources existantes en les demandant et en utilisant l'url renvoyée sur les vidéos, les liens, etc.

# Ma page Markdown
<a  target="_blank"  href={require('./assets/docusaurus-asset-example-pdf.pdf').default}>  Télécharger ce PDF</a>
ou
[Télécharger ce PDF à l'aide de Markdown](./assets/docusaurus-asset-example-pdf.pdf)

Télécharger ce PDF

Télécharger ce PDF en utilisant Markdown

SVG en ligne

Docusaurus prend en charge la mise en place de SVG.

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

Cela peut être utile si vous voulez modifier la partie de l'image SVG via CSS. Par exemple, vous pouvez changer une des couleurs SVG en fonction du thème courant.

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;}

Images thématiques

Docusaurus prend en charge les images thématiques : le composant ThemedImage (inclus dans les thèmes classic/bootstrap) vous permet de basculer la source de l'image en fonction du thème actuel.

import ThemedImage from '@theme/ThemedImage';
<ThemedImage  alt="Image thématique Docusaurus"  sources={{    light: useBaseUrl('/img/docusaurus_light.svg'),    dark: useBaseUrl('/img/docusaurus_dark.svg'),  }}/>;