soit utiliser le shortcode Hugo figure décrit ci-dessus, mais les liens hypertextes dans le SVG seront inactifs
soit copier le SVG directement, mais cela peut être très verbeux, et il faut copier le contenu dans le markdown à chaque modification du dessin
Dessin draw.io
Draw.io permet d'intégrer les dessins de plusieurs manières. En plus de télécharger un fichier image (JPEG, PNG ou SVG), il est possible d'intégrer du code HTML et JavaScript qui interprète le dessin, encodé en base64 :
Comme pour l'intégration de balises SVG, c'est assez verbeux et il faut manuellement mettre le mardown à jour, mais on bénéficie alors des contrôles JavaScript de draw.io (zoom, plein écran, etc.)
J'ai réussi à faire fonctionner une iframe avec un fichier HTML exporté depuis draw.io dans /static/static/html (sic) (<iframe src="/decp-docs/html/processus-decp-rama.html"/>). Ce n'est cependant pas très pratique car les dimensions de l'iframe ne s'adaptent pas aux dimensions du contenu.
PNG, JPEG
[racine du projet]/static/img
(ces dossiers n'existent pas par défaut){{< figure src="/decp-docs/img/image.png" title="Mon image" >}}
SVG
Pour insérer des balises HTML ou SVG dans le markdown et qu'elles soient interprétées par Hugo, il faut modifier
config.yaml
:Voir la doc officielle
Ensuite on peut
figure
décrit ci-dessus, mais les liens hypertextes dans le SVG seront inactifsDessin draw.io
Draw.io permet d'intégrer les dessins de plusieurs manières. En plus de télécharger un fichier image (JPEG, PNG ou SVG), il est possible d'intégrer du code HTML et JavaScript qui interprète le dessin, encodé en base64 :
Comme pour l'intégration de balises SVG, c'est assez verbeux et il faut manuellement mettre le mardown à jour, mais on bénéficie alors des contrôles JavaScript de draw.io (zoom, plein écran, etc.)
J'ai réussi à faire fonctionner une iframe avec un fichier HTML exporté depuis draw.io dans
/static/static/html
(sic) (<iframe src="/decp-docs/html/processus-decp-rama.html"/>
). Ce n'est cependant pas très pratique car les dimensions de l'iframe ne s'adaptent pas aux dimensions du contenu.