Aller au contenu principal
Version: 2.0.0-beta.3

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 :

Texte alternatif de mon 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 />;

This can be useful, if you want to alter the part of the SVG image 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'),  }}/>;
Image thématique DocusaurusImage thématique Docusaurus