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

Ressources

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

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.docx

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.docx').default}>
Télécharger ce docx
</a>

ou

[Télécharger ce docx à l'aide de Markdown](./assets/docusaurus-asset-example.docx)
Télécharger ce docx

Télécharger ce docx à l'aide de 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) 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

Ressources statiques

Si un lien ou une image Markdown a un chemin absolu, le chemin sera considéré comme un chemin de fichier et sera déterminé à partir des répertoires statiques. Par exemple, si vous avez configuré les répertoires statiques avec ['public', 'static'], alors pour l'image suivante :

my-doc.md
![Une image depuis static](/img/docusaurus.png)

Docusaurus essayera de le rechercher dans static/img/docusaurus.png et public/img/docusaurus.png. Le lien sera ensuite converti en un appel require au lieu de rester en tant qu'URL. C'est souhaitable à deux égards :

  1. Vous n'avez pas à vous soucier de l'URL de base, dont Docusaurus se chargera au moment de diffuser la ressource;
  2. L'image entre dans le pipeline de construction de Webpack et son nom sera complété par un hachage, ce qui permet aux navigateurs de mettre l'image en cache de manière agressive et améliore les performances de votre site.