Aller au contenu principal
Version: 2.0.0-beta.1 🚧

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 utiliser les images dans le format Markdown, ou en les demandant et en utilisant une balise image JSX :

# Ma page Markdown
<img
src={require('./assets/docusaurus-asset-example-banner.png').default}
alt="Exemple de bannière"
/>
ou
![Bannière d'exemple](./assets/docusaurus-asset-example-banner.png)

La syntaxe des importations ES fonctionne également :

# Ma page Markdown
import myImageUrl from './assets/docusaurus-asset-example-banner.png';
<img src={myImageUrl} alt="Texte alternatif de mon image" />

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