Liquid¶

Liquid est le langage de templates utilisé par Jekyll pour traiter les templates et créer du contenu dynamique.

Syntaxe de base¶

Sortie (doubles accolades)¶

{% raw %}

{{ page.title }}
{{ site.description }}
{{ content }}

{% endraw %}

Logique (accolades avec pourcentage)¶

{% raw %}

{% if page.title %}
  <h1>{{ page.title }}</h1>
{% endif %}

{% for post in site.posts %}
  <li>{{ post.title }}</li>
{% endfor %}

{% endraw %}

Filtres courants¶

Manipulation de texte¶

{% raw %}

{{ "hello" | capitalize }}       <!-- Hello -->
{{ "hello world" | upcase }}     <!-- HELLO WORLD -->
{{ page.content | truncate: 100 }}
{{ page.content | strip_html }}

{% endraw %}

Assistants d'URL¶

{% raw %}

{{ "/about/" | relative_url }}   <!-- Prepends baseurl -->
{{ "/about/" | absolute_url }}   <!-- Full URL with domain -->

{% endraw %}

Formatage des dates¶

{% raw %}

{{ page.date | date: "%B %d, %Y" }}  <!-- January 15, 2025 -->
{{ page.date | date_to_xmlschema }}   <!-- 2025-01-15T00:00:00+00:00 -->

{% endraw %}

Tableaux¶

{% raw %}

{{ page.tags | join: ", " }}
{{ site.posts | size }}
{{ page.categories | first }}

{% endraw %}

Flux de contrôle¶

Conditions¶

{% raw %}

{% if page.layout == "post" %}
  <!-- Post content -->
{% elsif page.layout == "page" %}
  <!-- Page content -->
{% else %}
  <!-- Default content -->
{% endif %}

{% endraw %}

Boucles¶

{% raw %}

{% for post in site.posts limit:5 %}
  <a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}

{% for tag in page.tags %}
  <span>{{ tag }}</span>
{% endfor %}

{% endraw %}

Includes¶

Inclure des composants réutilisables :

{% raw %}

{% include navigation/navbar.html %}
{% include components/post-card.html post=post %}

{% endraw %}

Passer des paramètres aux includes :

{% raw %}

{% include card.html
   title="My Card"
   content="Card content here"
%}

{% endraw %}

Exemples du thème¶

Explorez l'utilisation de Liquid dans Zer0-Mistakes :

_layouts/ - Templates de page
_includes/ - Composants réutilisables
_includes/navigation/ - Composants de navigation

Ressources¶

Connexe¶

Voir aussi¶

[[Jekyll]]
[[Customization]]
[[front-matter]]