Boucles for

Last updated:

Les boucles for peuvent être utilisées dans HubL pour itérer dans des séquences d'objets. Elles seront le plus souvent utilisées pour rendre le contenu du blog dans un format de liste, mais elles peuvent également être utilisées pour trier d'autres variables de séquence.

Les boucles for commencent par une fonction {% for %} et se terminent par une fonction {% endfor %} . Dans la fonction {% for %}, un seul élément de séquence est nommé, suivi de in, puis du nom de la séquence. Le code entre les fonctions for d'ouverture et de fermeture est imprimé à chaque itération, et comprend généralement la variable imprimée de l'élément de séquence individuel. Vous trouverez ci-dessous la syntaxe de base d'une boucle for :

{% for item in items %} {{ item }} {% endfor %}
Vous trouverez ci-dessous un exemple de base qui montre comment imprimer une séquence de valeurs de variable dans une liste.
{% set languages = ["HTML", "CSS", "Javascript", "Python", "Ruby", "PHP", "Java"] %} <h1>Languages</h1>; <ul> {% for language in languages %} <li>{{ language }}</li> {% endfor %} </ul><h1>Languages</h1> <ul> <li>HTML</li> <li>CSS</li> <li>Javascript</li> <li>Python</li> <li>Ruby</li> <li>PHP</li> <li>Java</li> </ul>

Propriétés de boucle

Lorsqu'une boucle est itérative, vous pouvez utiliser la logique conditionnelle pour définir son comportement. La propriété de variable loop.index tient un compte du nombre actuel d'itérations de la boucle. Il existe plusieurs autres propriétés de variable de boucle qui comptabilisent les itérations de différentes manières. Ces propriétés sont décrites ci-dessous :
VariableDescription
loop.cycle

Une fonction d'aide pour faire un cycle entre une liste de séquences. Consultez l'explication ci-dessous.

loop.depth

Indique à quelle profondeur d'une boucle récursive se trouve actuellement le rendu. Commence au niveau 1.

loop.depth0

Indique à quelle profondeur d'une boucle récursive se trouve actuellement le rendu. Commence au niveau 0.

loop.first

Cette variable est définie sur true s'il s'agit de la première itération de la boucle.

loop.index

L'itération actuelle de la boucle. Cette variable commence la comptabilisation à 1.

loop.index0

L'itération actuelle de la boucle. Cette variable commence la comptabilisation à 0.

loop.last

Cette variable est définie sur true s'il s'agit de la dernière itération de la boucle.

loop.length

Le nombre d'éléments dans la séquence.

loop.revindex

Le nombre d'itérations à partir de la fin de la boucle. Compte à rebours jusqu'à 1.

loop.revindex0

Le nombre d'itérations à partir de la fin de la boucle. Compte à rebours jusqu'à 0.

Vous trouverez ci-dessous quelques exemples qui utilisent différentes variables de boucle. L'exemple de base suivant utilise loop.index pour conserver un compte qui est imprimé à chaque itération.

{% set loopy = ["Content", "Social", "Contacts", "Reports"] %} {% for app in loopy %} {{ loop.index }}. {{app}} <br> {% endfor %}1. Content <br> 2. Social <br> 3. Contacts <br> 4. Reports <br>

L'exemple suivant utilise une logique conditionnelle pour vérifier si la longueur de la boucle est divisible par certains nombres. La largeur de la division est alors restituée en conséquence. L'exemple utilise la boucle standard des articles de blog et suppose qu'il y a 6 articles dans la boucle.

{% for content in contents %} {% if loop.length is divisibleby 4 %} <div style="width:25%">Post content</div> {% elif loop.length is divisibleby 3 %} <div style="width:33.33332%">Post content</div> {% else %} <div style="width:50%">Post content</div> {% endif %} {% endfor %}<div style="width:33.33332%">Post content</div> <div style="width:33.33332%">Post content</div> <div style="width:33.33332%">Post content</div> <div style="width:33.33332%">Post content</div> <div style="width:33.33332%">Post content</div> <div style="width:33.33332%">Post content</div> <div style="width:33.33332%">Post content</div>

Boucles imbriquées

Les boucles peuvent également être imbriquées dans d'autres boucles. La boucle for enfant sera exécutée à chaque itération de la boucle for parent. Dans l'exemple ci-dessous, une liste d'éléments enfants est imprimée dans un élément <ul> imbriqué dans un élément <ul> d'éléments parents.

{% set parents = ["Parent item 1", "Parent item 2", "Parent item 3"] %} {% set children = ["Child item 1", "Child item 2", "Child item 3"] %} <ul> {% for parent in parents %} <li>{{parent}}<ul> {% for child in children %} <li>{{child}}</li> {% endfor %} </ul> </li> {% endfor %} </ul><ul> <li>Parent item 1<ul> <li>Child item 1</li> <li>Child item 2</li> <li>Child item 3</li> </ul> </li> <li>Parent item 2<ul> <li>Child item 1</li> <li>Child item 2</li> <li>Child item 3</li> </ul> </li> <li>Parent item 3<ul> <li>Child item 1</li> <li>Child item 2</li> <li>Child item 3</li> </ul> </li> </ul>

cycle

La balise cycle peut être utilisée dans une boucle for pour parcourir une série de valeurs de chaîne et les imprimer à chaque itération. L'une des applications les plus pratiques de cette technique consiste à appliquer des classes alternées à vos articles de blog dans une liste. Cette balise peut être utilisée sur plus de deux valeurs et répétera le cycle s'il y a plus d'itérations de boucle que de valeurs de cycle. Dans l'exemple ci-dessous, une classe d'éléments odd et even est appliquée aux articles d'une liste (l'exemple suppose qu'il y a 5 articles dans la boucle).  

Veuillez noter qu'il n'y a pas d'espace entre les valeurs des chaînes de cycle séparées par des virgules.

{% for content in contents %} <div class="post-item {% cycle "odd","even" %}">Blog post content</div> {% endfor %}<div class="post-item odd">Blog post content</div> <div class="post-item even">Blog post content</div> <div class="post-item odd">Blog post content</div> <div class="post-item even">Blog post content</div> <div class="post-item odd">Blog post content</div>

Variables dans les boucles

Toutes les variables définies dans les boucles sont limitées à la portée de cette boucle et ne peuvent pas être exécutées depuis l'extérieur de la boucle.

Vous pouvez exécuter des variables définies en dehors d'une boucle, à partir d'une boucle, mais pas l'inverse.

Paires (clé, valeur) dans les boucles

Si le dictionnaire d'informations que vous parcourez en boucle comporte des paires (clé, valeur), une simple boucle for n'aurait accès qu'aux valeurs. Si vous souhaitez avoir accès à la fois aux clés et aux valeurs dans la boucle for, le HubL sera formaté comme suit :

{% set dict_var = {"name": "Cool Product", "price": "$20", "size":"XL"} %} {% for key, val in dict_var.items() %} {{ key }}: {{ val }}<br> {% endfor %}name: Cool Product <br> price: $20 <br> size: XL <br>

Itérer un nombre défini de fois

Parfois, vous souhaitez itérer un nombre défini de fois, ce qui peut être utile pour générer du HTML ou des CSS. Pour ce faire, vous pouvez utiliser la fonction de plage.

{% for x in range(0,5) %} {{loop.index}} {% endfor %}1 2 3 4 5

Utilisation des balises HubL dans des boucles

Lorsque vous ajoutez une balise à une page, HubSpot attribue automatiquement un id au HTML d'encadrement. Cette balise est unique par nom de balise. Si vous devez utiliser une balise dans une boucle for, la définition de noms uniques n'est pas pratique. Ajoutez le paramètre unique_in_loop à votre balise pour générer des identifiants uniques. Ce paramètre ajoute le nom du module au numéro d'itération de la boucle en cours, ce qui garantit qu'il est unique. Les identifiants uniques ne sont pas seulement nécessaires à la validité du code HTML. Ils sont également importants pour l'accessibilité.

{% for item in module.icon_field %} {% icon name="{{ item.name }}", style="{{ item.type }}", unicode="{{ item.unicode }}", unique_in_loop=True %} {% endfor %}
Cet article vous a-t-il été utile ?
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.