OUJOOD.COM
La balise cycle dans un template Django
La balise cycle est particulièrement utile à l'intérieur d'une boucle. À chaque passage, elle produit l'un de ses arguments dans l'ordre : le premier à la première itération, le deuxième à la deuxième, et ainsi de suite. Quand tous les arguments ont été utilisés, elle repart automatiquement du premier.Syntaxe :
{% cycle 'valeur_1' 'valeur_2' ... valeur_n %}
Un cas d'usage classique : alterner la couleur de fond de chaque ligne d'une liste. Avec cinq couleurs, chaque élément reçoit une teinte différente, et le cycle recommence tous les cinq éléments :Fichier template.html 📋 Copier le code
<!DOCTYPE html>
<html>
<body>
<ul>
{% for x in membres %}
<li style="background-color:
{% cycle 'lightblue' 'pink' 'yellow' 'coral' '#ccc' %};
width:150px;padding-left:10px">
{{ x.prenom }}
</li>
{% endfor %}
</ul>
<p>Dans views.py, vous pouvez voir comment importer et
récupérer les membres de la base de données.</p>
</body>
</html>
Fichier views.py 📋 Copier le code
from django.http import HttpResponse
from django.template import loader
from .models import Membres
def testing(request):
monmembres = Membres.objects.all().values()
template = loader.get_template('template.html')
context = {
'membres': monmembres,
}
return HttpResponse(template.render(context, request))
Fichier template.html 📋 Copier le code
<!DOCTYPE html>
<html>
<body>
<ul>
{% for x in membres %}
<li style="background-color:
{% cycle 'pink' 'yellow'%};
width:150px;padding-left:10px">
{{ x.prenom }}
</li>
{% endfor %}
</ul>
<p>Dans views.py, vous pouvez voir comment importer et
récupérer les membres de la base de données.</p>
</body>
</html>
Stocker la valeur du cycle dans une variable
Dans les exemples précédents, la valeur du cycle est insérée directement à l'endroit où la balise est placée. Mais on peut aussi la capturer dans une variable pour la réutiliser ailleurs dans la boucle — par exemple pour appliquer la même couleur à plusieurs attributs d'un même élément.La syntaxe est {% cycle ... as nom_variable silent %}. Le mot-clé as nomme la variable, et silent empêche l'affichage immédiat de la valeur. Sans silent, la valeur serait affichée deux fois : une fois au moment de la balise cycle, une fois à l'endroit où la variable est utilisée.
Exemple — stocker les couleurs dans
bgcolor et les appliquer séparément :
Fichier template.html 📋 Copier le code
<!DOCTYPE html>
<html>
<body>
<ul>
{% for x in membres %}
{% cycle 'lightblue' 'pink' 'yellow' 'coral' '#eee' as bgcolor silent %}
<li style="background-color:{{ bgcolor }};
width:150px;padding-left:10px">
{{ x.prenom }}
</li>
{% endfor %}
</ul>
<p>Dans views.py, vous pouvez voir comment importer et
récupérer les membres de la base de données.</p>
</body>
</html>
Réinitialiser le cycle avec {% resetcycle %}
Par défaut, le cycle recommence seul quand tous ses arguments sont épuisés. Mais parfois on veut forcer un redémarrage à un moment précis — après un nombre fixe d'itérations, par exemple.La balise {% resetcycle %} fait exactement ça : elle remet le cycle à son premier argument, quelle que soit sa position actuelle. Dans l'exemple ci-dessous, le cycle repart du début tous les 3 éléments, grâce à
forloop.counter :
Fichier template.html 📋 Copier le code
<!DOCTYPE html>
<html>
<body>
<ul>
{% for x in membres %}
{% cycle 'lightblue' 'pink' 'yellow' 'coral' '#eee' as bgcolor silent %}
{% if forloop.counter == 3 %}
{% resetcycle %}
{% endif %}
<li style="background-color:{{ bgcolor }};
width:150px;padding-left:10px">
{{ x.prenom }}
</li>
{% endfor %}
</ul>
<p>Dans views.py, vous pouvez voir comment importer et
récupérer les membres de la base de données.</p>
</body>
</html>
forloop.counter compte les itérations depuis 1. Quand il atteint 3, {% resetcycle %} remet l'index du cycle à zéro — le quatrième élément reçoit donc à nouveau la première couleur.
Par carabde | Mis à jour le 01 juin 2026