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

Publié le 10 août 2025

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 controls style="width:100%;margin:1em 0">
      <source src="/audios/audio" type="audio//audios/audio">
      <source src="/audios/audio]" type="audio//audios/audio]">
      <source src="/audios/audio]" type="audio//audios/audio]">
      <source src="/audios/%}" type="audio//audios/%}">
      <source src="/audios/````" type="audio//audios/````">
      <source src="/audios/Je" type="audio//audios/je">
      <source src="/audios/peux" type="audio//audios/peux">
      <source src="/audios/mettre" type="audio//audios/mettre">
      <source src="/audios/jusqu'à" type="audio//audios/jusqu'à">
      <source src="/audios/trois" type="audio//audios/trois">
      <source src="/audios/versions" type="audio//audios/versions">
      <source src="/audios/du" type="audio//audios/du">
      <source src="/audios/fichier." type="audio/">
      <source src="/audios/###" type="audio//audios/###">
      <source src="/audios/Exemple" type="audio//audios/exemple">
      <source src="/audios/````liquid" type="audio//audios/````liquid">
      <source src="/audios/{%" type="audio//audios/{%">
      <source src="/audios/audio" type="audio//audios/audio">
      <source src="/audios/DancingSpiral.mp3" type="audio/mpeg">
      <source src="/audios/%}" type="audio//audios/%}">
      <source src="/audios/````" type="audio//audios/````">
      <source src="/audios/{%" type="audio//audios/{%">
      <source src="/audios/audio" type="audio//audios/audio">
      <source src="/audios/DancingSpiral.mp3" type="audio/mpeg">
      <source src="/audios/%}" type="audio//audios/%}">
      <source src="/audios/##" type="audio//audios/##">
      <source src="/audios/img" type="audio//audios/img">
      <source src="/audios/###" type="audio//audios/###">
      <source src="/audios/Syntaxe" type="audio//audios/syntaxe">
      <source src="/audios/````liquid" type="audio//audios/````liquid">
      <source src="/audios/{%" type="audio//audios/{%">
      <source src="/audios/img" type="audio//audios/img">
      <source src="/audios/[class" type="audio//audios/[class">
      <source src="/audios/name(s)]" type="audio//audios/name(s)]">
      <source src="/audios/image" type="audio//audios/image">
      <source src="/audios/[lazy" type="audio//audios/[lazy">
      <source src="/audios/|" type="audio//audios/|">
      <source src="/audios/eager]" type="audio//audios/eager]">
      <source src="/audios/[width" type="audio//audios/[width">
      <source src="/audios/[height]]" type="audio//audios/[height]]">
      <source src="/audios/[title" type="audio//audios/[title">
      <source src="/audios/text" type="audio//audios/text">
      <source src="/audios/|" type="audio//audios/|">
      <source src="/audios/"title" type="audio//audios/"title">
      <source src="/audios/text"" type="audio//audios/text"">
      <source src="/audios/["alt" type="audio//audios/["alt">
      <source src="/audios/text"]]" type="audio//audios/text"]]">
      <source src="/audios/%}" type="audio//audios/%}">
      <source src="/audios/````" type="audio//audios/````">
      <source src="/audios/###" type="audio//audios/###">
      <source src="/audios/Exemple" type="audio//audios/exemple">
      <source src="/audios/````liquid" type="audio//audios/````liquid">
      <source src="/audios/<img" type="audio//audios/<img">
      <source src="/audios/OliveTin1.webp"" type="audio/webp"">
      <source src="/audios/alt="Page" type="audio//audios/alt="page">
      <source src="/audios/d" type="audio//audios/d">
      <source src="/audios/accueil" type="audio//audios/accueil">
      <source src="/audios/de" type="audio//audios/de">
      <source src="/audios/OliveTin" type="audio//audios/olivetin">
      <source src="/audios/avec" type="audio//audios/avec">
      <source src="/audios/mes" type="audio//audios/mes">
      <source src="/audios/boutons" type="audio//audios/boutons">
      <source src="/audios/préférés"" type="audio//audios/préférés"">
      <source src="/audios/title="OliveTin" type="audio//audios/title="olivetin">
      <source src="/audios/accueil"" type="audio//audios/accueil"">
      <source src="/>" type="audio//>">
      <source src="/audios/````" type="audio//audios/````">
      <source src="/audios/<img" type="audio//audios/<img">
      <source src="/audios/OliveTin1.webp"" type="audio/webp"">
      <source src="/audios/alt="Page" type="audio//audios/alt="page">
      <source src="/audios/d" type="audio//audios/d">
      <source src="/audios/accueil" type="audio//audios/accueil">
      <source src="/audios/de" type="audio//audios/de">
      <source src="/audios/OliveTin" type="audio//audios/olivetin">
      <source src="/audios/avec" type="audio//audios/avec">
      <source src="/audios/mes" type="audio//audios/mes">
      <source src="/audios/boutons" type="audio//audios/boutons">
      <source src="/audios/préférés"" type="audio//audios/préférés"">
      <source src="/audios/title="OliveTin" type="audio//audios/title="olivetin">
      <source src="/audios/accueil"" type="audio//audios/accueil"">
      <source src="/>" type="audio//>">
      <source src="/audios/##" type="audio//audios/##">
      <source src="/audios/youtube" type="audio//audios/youtube">
      <source src="/audios/###" type="audio//audios/###">
      <source src="/audios/Syntaxe" type="audio//audios/syntaxe">
      <source src="/audios/````liquid" type="audio//audios/````liquid">
      <source src="/audios/{%" type="audio//audios/{%">
      <source src="/audios/youtube" type="audio//audios/youtube">
      <source src="/audios/id" type="audio//audios/id">
      <source src="/audios/[width" type="audio//audios/[width">
      <source src="/audios/height]" type="audio//audios/height]">
    </audio>

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

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;margin:1em 0">
        <iframe src="https://www.youtube-nocookie.com/embed/r11c20nC-gs"
          style="position:absolute;top:0;left:0;width:100%;height:100%"
          frameborder="0" allowfullscreen></iframe>
      </div>

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

Blog d'Albâtre

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

Installation

Paramétrage

Utilisation

Audio

Syntaxe

Paramétrage

Exemple

Articles similaires