Aller au contenu

Filtres

Les filtres transforment les données dans les expressions en utilisant Liquid — un standard de langage de templating. Chaque filtre prend une valeur en entrée, applique une transformation et produit une nouvelle valeur.

Les filtres sont chaînés dans les expressions. Exemple : posts → first → title → upcase utilise trois filtres (first, title est une propriété de navigation, upcase est un filtre).

Cette page documente chaque filtre disponible avec son type d'entrée/sortie, ses options et ses exemples. Les filtres marqués (11ty) viennent d'Eleventy, l'outil qui construit votre site.

Filtres de chaînes de caractères

Ces filtres fonctionnent sur les valeurs textuelles.

strip_html

Supprime toutes les balises HTML d'une chaîne.

Entrée : String (par exemple, <p>Hello <strong>world</strong></p>) Sortie : String (par exemple, Hello world) Options : Aucune Exemple : post_content → strip_html supprime le HTML des champs de texte enrichi

append

Ajoute du texte à la fin d'une chaîne.

Entrée : String Sortie : String Options : value (texte à ajouter) Exemple : post_title → append(" - Blog") transforme "My Post" en "My Post - Blog"

prepend

Ajoute du texte au début d'une chaîne.

Entrée : String Sortie : String Options : value (texte à préfixer) Exemple : post_title → prepend("New: ") transforme "My Post" en "New: My Post"

upcase

Convertit une chaîne en majuscules.

Entrée : String Sortie : String Options : Aucune Exemple : post_title → upcase transforme "hello" en "HELLO"

downcase

Convertit une chaîne en minuscules.

Entrée : String Sortie : String Options : Aucune Exemple : post_title → downcase transforme "Hello" en "hello"

capitalize

Met en majuscule le premier caractère et met le reste en minuscules.

Entrée : String Sortie : String Options : Aucune Exemple : "hello WORLD" → capitalize devient "Hello world"

replace

Remplace toutes les occurrences d'une sous-chaîne par une autre.

Entrée : String Sortie : String Options : search (texte à trouver), replace (texte de remplacement) Exemple : "Hello World" → replace("World", "Silex") devient "Hello Silex"

replace_first

Remplace uniquement la première occurrence d'une sous-chaîne.

Entrée : String Sortie : String Options : search, replace Exemple : "aaa" → replace_first("a", "b") devient "baa"

replace_last

Remplace uniquement la dernière occurrence d'une sous-chaîne.

Entrée : String Sortie : String Options : search, replace Exemple : "aaa" → replace_last("a", "b") devient "aab"

remove

Supprime toutes les occurrences d'une sous-chaîne (équivalent à replace avec une chaîne vide).

Entrée : String Sortie : String Options : search (texte à supprimer) Exemple : "Hello World" → remove("World") devient "Hello "

remove_first

Supprime uniquement la première occurrence d'une sous-chaîne.

Entrée : String Sortie : String Options : search Exemple : "aaa" → remove_first("a") devient "aa"

remove_last

Supprime uniquement la dernière occurrence d'une sous-chaîne.

Entrée : String Sortie : String Options : search Exemple : "aaa" → remove_last("a") devient "aa"

truncate

Raccourcit une chaîne à une longueur maximale.

Entrée : String Sortie : String Options : length (nombre max de caractères, par défaut 50) Exemple : "This is a very long sentence" → truncate(10) devient "This is a "

truncatewords

Raccourcit une chaîne à un nombre maximum de mots.

Entrée : String Sortie : String Options : length (nombre max de mots, par défaut 15) Exemple : "This is a very long sentence" → truncatewords(3) devient "This is a"

escape

Échappe les guillemets doubles dans une chaîne.

Entrée : String Sortie : String Options : Aucune Exemple : post_title → escape convertit "Hello" en \"Hello\"

escape_once

Échappe les guillemets doubles (une seule fois, même si déjà échappés).

Entrée : String Sortie : String Options : Aucune

newline_to_br

Convertit les sauts de ligne (\n) en balises HTML de saut de ligne (<br />).

Entrée : String Sortie : String Options : Aucune Exemple : "Line 1\nLine 2" → newline_to_br devient "Line 1<br />Line 2"

strip_newlines

Supprime tous les sauts de ligne d'une chaîne.

Entrée : String Sortie : String Options : Aucune Exemple : "Line 1\nLine 2" → strip_newlines devient "Line 1Line 2"

default

Renvoie une valeur de remplacement quand la valeur est absente ou vide.

Entrée : Toute valeur seule (pas une liste) Sortie : Même type Options : value (la valeur de remplacement) Exemple : post → subtitle → default("Pas de sous-titre") affiche « Pas de sous-titre » pour les articles sans sous-titre

slugify (11ty)

Transforme un texte en nom adapté à une URL : en minuscules, avec des tirets à la place des espaces.

Entrée : String Sortie : String Options : Aucune Exemple : "My First Post" → slugify devient "my-first-post"

Filtres de tableaux

Ces filtres fonctionnent sur les listes.

where

Filtre une liste pour ne garder que les éléments correspondant à une condition.

Entrée : Liste d'objets Sortie : Liste d'objets Options : key (nom du champ), value (valeur à rechercher) Exemple : posts → where(category = "news") renvoie uniquement les articles de la catégorie actualités

find

Renvoie le premier élément d'une liste correspondant à une condition.

Entrée : Liste d'objets Sortie : Un objet Options : key, value Exemple : posts → find(id = 5) renvoie l'article avec l'id 5

first

Renvoie le premier élément d'une liste.

Entrée : Liste Sortie : Un élément Options : Aucune Exemple : posts → first renvoie le premier article

last

Renvoie le dernier élément d'une liste.

Entrée : Liste Sortie : Un élément Options : Aucune Exemple : posts → last renvoie le dernier article

join

Joint une liste de chaînes en une seule chaîne avec un séparateur.

Entrée : Liste de chaînes Sortie : String Options : separator (ce qui est placé entre les éléments, par défaut ",") Exemple : tags → join(", ") joint les tags avec des virgules : "tag1, tag2, tag3"

split

Divise une chaîne en une liste en utilisant un séparateur.

Entrée : String Sortie : Liste de chaînes Options : separator (ce sur quoi diviser, par défaut ",") Exemple : "tag1, tag2, tag3" → split(", ") devient une liste de trois tags

map

Extrait un champ spécifique de chaque élément d'une liste.

Entrée : Liste d'objets Sortie : Liste de valeurs Options : key (nom du champ à extraire) Exemple : posts → map(title) extrait tous les titres d'articles dans une liste

reverse

Inverse l'ordre d'une liste.

Entrée : Liste Sortie : Liste (inversée) Options : Aucune Exemple : posts → reverse renvoie les articles dans l'ordre inverse

size

Renvoie le nombre d'éléments dans une liste.

Entrée : Liste Sortie : Number Options : Aucune Exemple : posts → size renvoie le nombre d'articles

slice

Extrait une portion d'une liste par index de début et de fin.

Entrée : Liste Sortie : Liste Options : start (index de début), end (index de fin) Exemple : posts → slice(0, 3) renvoie les 3 premiers éléments

sort

Trie une liste d'objets par un nom de champ (alphabétiquement ou numériquement).

Entrée : Liste d'objets Sortie : Liste (triée) Options : key (champ de tri) Exemple : posts → sort(title) trie les articles alphabétiquement par titre

compact

Supprime les éléments vides/null/false d'une liste.

Entrée : Liste Sortie : Liste (sans valeurs vides) Options : Aucune Exemple : authors → compact supprime les entrées d'auteur null

sample

Choisit un ou plusieurs éléments aléatoires dans une liste.

Entrée : Liste Sortie : Liste ou élément unique Options : count (nombre d'éléments à choisir, par défaut 1) Exemple : posts → sample(3) renvoie 3 articles aléatoires

Filtres pour toute valeur

log (11ty)

Renvoie la valeur sans la changer et l'écrit dans le journal de construction (et dans la console du navigateur pendant que vous éditez), pour vérifier ce qu'une valeur contient.

Entrée : Toute valeur Sortie : Même valeur Options : Aucune Exemple : posts → log affiche les articles dans le journal de construction

Filtres mathématiques

Ces filtres fonctionnent sur les nombres.

plus

Ajoute un nombre à un autre nombre.

Entrée : Number Sortie : Number Options : value (nombre à ajouter) Exemple : price → plus(10) ajoute 10 au prix

minus

Soustrait un nombre.

Entrée : Number Sortie : Number Options : value (nombre à soustraire) Exemple : price → minus(5) soustrait 5 du prix

times

Multiplie un nombre.

Entrée : Number Sortie : Number Options : value (nombre par lequel multiplier) Exemple : quantity → times(2) double la quantité

divided_by

Divise un nombre.

Entrée : Number Sortie : Number Options : value (nombre par lequel diviser) Exemple : total → divided_by(2) divise le total par 2

modulo

Renvoie le reste après division.

Entrée : Number Sortie : Number Options : value (diviseur) Exemple : count → modulo(2) renvoie 0 si pair, 1 si impair

ceil

Arrondit au nombre entier supérieur.

Entrée : Number Sortie : Integer Options : Aucune Exemple : 3.2 → ceil devient 4

floor

Arrondit au nombre entier inférieur.

Entrée : Number Sortie : Integer Options : Aucune Exemple : 3.8 → floor devient 3

round

Arrondit au nombre entier le plus proche.

Entrée : Number Sortie : Integer Options : Aucune Exemple : 3.5 → round devient 4

abs

Renvoie la valeur absolue (positive).

Entrée : Number Sortie : Number Options : Aucune Exemple : -5 → abs devient 5

at_least

Renvoie le plus grand entre le nombre et une valeur minimale.

Entrée : Number Sortie : Number Options : value (minimum) Exemple : price → at_least(10) garantit que le prix est au moins 10

at_most

Renvoie le plus petit entre le nombre et une valeur maximale.

Entrée : Number Sortie : Number Options : value (maximum) Exemple : discount → at_most(50) garantit que la réduction ne dépasse pas 50

Filtres de dates

date

Formate une chaîne de date en utilisant une chaîne de format.

Entrée : String (date au format ISO, par exemple, "2025-03-27") Sortie : String (formatée, par exemple, "Mar 27, 25") Options : format (chaîne de format utilisant les codes %), timeZone (fuseau horaire IANA, par défaut "UTC")

Codes de format : - %Y — année à 4 chiffres (2025) - %y — année à 2 chiffres (25) - %m — mois à 2 chiffres (03) - %d — jour à 2 chiffres (27) - %b — nom abrégé du mois (Mar) - %a — nom abrégé du jour de la semaine (Thu) - %H — heure à 2 chiffres (14) - %M — minute à 2 chiffres (30) - %S — seconde à 2 chiffres (45)

Exemple : post_date → date("%a, %b %d, %Y") formate "2025-03-27" en "Thu, Mar 27, 2025"

Fuseaux horaires : Utilisez les noms de fuseaux horaires IANA standard : UTC, Europe/Paris, America/New_York, Asia/Tokyo, etc.

Combinaisons de filtres

Vous pouvez chaîner les filtres ensemble pour combiner les transformations.

Exemple 1 : liste de dates d'articles formatées 

posts → map(publish_date) → first → date("%Y-%m-%d")
Obtient tous les articles, extrait les dates de publication, prend la première et la formate.

Exemple 2 : extrait d'article sans HTML 

post_content → truncate(200) → strip_html
Raccourcit le contenu à 200 caractères et supprime les balises HTML.

Exemple 3 : nombre d'articles publiés 

posts → where(status = "published") → size
Filtre les articles publiés et les compte.

Erreurs courantes

  • Utiliser un filtre sur le mauvais type de données. upcase ne fonctionne que sur les chaînes. Silex empêchera cela dans l'éditeur.
  • Oublier les options du filtre. Certains filtres nécessitent des options (where a besoin de key et value). L'éditeur vous les demandera.
  • Chaîner des filtres incompatibles. Si un filtre produit un nombre, le filtre suivant doit accepter un nombre. Faites attention aux types d'entrée/sortie.
  • Ne pas échapper les caractères spéciaux dans les options. Si votre valeur where contient des guillemets, assurez-vous qu'elle est correctement encadrée.

En savoir plus

Quiz

Q1 : Vous souhaitez extraire les 3 premiers mots d'un titre d'article. Quel filtre utilisez-vous ?

  • A) truncate
  • B) truncatewords
  • C) slice
Réponse

B) truncatewords — truncatewords limite une chaîne à un nombre de mots. truncate limite les caractères. slice fonctionne sur les tableaux.

Q2 : Vous avez une liste d'articles et souhaitez obtenir uniquement ceux publiés dans la catégorie "news". Quel filtre utilisez-vous ?

  • A) find
  • B) where
  • C) slice
Réponse

B) where — where filtre une liste par condition. find renvoie la première correspondance. slice extrait une plage par index.

Q3 : Vous souhaitez ajouter "$" au début d'un prix. Quel(s) filtre(s) chaînez-vous ?

  • A) prepend("$")
  • B) plus("$")
  • C) append("$")
Réponse

A) prepend("$") — prepend ajoute au début. append ajoute à la fin. plus sert à additionner des nombres.

Q4 : Vous souhaitez afficher le nombre d'articles de blog. Quelle expression renvoie un nombre ?

  • A) posts
  • B) posts → size
  • C) posts → count
Réponse

B) posts → size — size renvoie le nombre d'éléments dans une liste. posts seul renvoie la liste elle-même, pas un compte.

Q5 : Vous avez une date "2025-03-27" et souhaitez l'afficher comme "27/03/2025". Quelle chaîne de format de date utilisez-vous ?

  • A) %d/%m/%Y
  • B) %Y/%m/%d
  • C) %d-%m-%Y
Réponse

A) %d/%m/%Y — %d est le jour, %m est le mois, %Y est l'année à 4 chiffres. Cela produit jour/mois/année.

Éditer cette page sur GitLab