le blog d'albâtre Blog d'Albâtre

Pelican-liquid-tags - permet d'insérer des balises de style Liquid dans Markdown

Publié le dimanche 10 août 2025
Par Jean-charles hoarau

Dans Services

Etiquettes: Service blog ssg pelican plugin

Pelican-liquid-tags permet d'insérer des balises de style Liquid dans Markdown dans les documents Pelican via des balises délimitées par {% ... %}, une convention également utilisée pour étendre Markdown dans d'autres plateformes de publication telles qu'Octopress.

Installation

Comme pour le plugin touch, j'ai ajouté le plugin dans le fichier requirements.txt et j'ai relancé la construction du docker Pelican.

Paramétrage

Je dois ajouter les liquid tags que je veux utiliser sur le site

LIQUID_TAGS = ["img", "youtube", "audio"]

Je vais détaillé ci-dessous les tags que j'utilise sur ce blog

Utilisation

Audio

Syntaxe

{% audio url/to/audio [url/to/audio] [/url/to/audio] %}

Je peux mettre jusqu'à trois versions du fichier.

Exemple

{% audio {static}/audios/DancingSpiral.mp3  %}

img

Syntaxe

{% img [class name(s)] [http[s]:/]/path/to/image [lazy | eager] [width [height]] [title text | "title text" ["alt text"]] %}

Exemple

{% img {static}/images/OliveTin1.webp "OliveTin accueil" "Page d accueil de OliveTin avec mes boutons préférés"%}

Page d accueil de OliveTin avec mes boutons préférés

youtube

Syntaxe

{% youtube id [width height] %}

Paramétrage

Pour n'avoir que l'image de la vidéo dans le code de la page, je dois ajouter à pelicanconf.py la ligne suivante

YOUTUBE_THUMB_ONLY = True
YOUTUBE_THUMB_SIZE = "maxres"

Exemple

{% youtube r11c20nC-gs %}

Comme je ne veux que l'image de la vidéo et pas la vidéo elle même dans la page, j'ai une image statique avec un lien automatique vers youtube et le code généré est léger

<a href="https://www.youtube.com/watch?v=r11c20nC-gs" class="youtube_video" alt="YouTube Video" title="Click to view on YouTube" target="_blank" rel="noopener noreferrer">
                    <img width="1280" height="720" src="https://img.youtube.com/vi/r11c20nC-gs/maxresdefault.jpg">
                </a>

J'ajouterais à cet article la documentation des tags que je pourrai utiliser à l'avenir.

à bientôt

Articles similaires