Skip to main content
Settings
Color Mode
Theme Skin
Background

Appearance preferences are saved in this browser only.

Environment
Current Environment Dev

Built with JEKYLL_ENV=development. Changes auto-reload under jekyll serve.

Theme & Build
Jekyll v3.10.0
Last Build Aug 07, 05:04
Page Location
Page Info
Layout default
Collection none
Path fr/docs/liquid/index.md
URL /fr/docs/liquid/
This page was translated automatically from the English original. View the original

Liquid

Les bases des templates Liquid utilisés par Jekyll et ce thème.

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)

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

Logique (accolades avec pourcentage)

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

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

Filtres courants

Manipulation de texte

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

Assistants d’URL

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

Formatage des dates

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

Tableaux

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

Flux de contrôle

Conditions

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

Boucles

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

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

Includes

Inclure des composants réutilisables :

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

Passer des paramètres aux includes :

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

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]]