Le moteur de template
Les composants Nexy s'appuient sur le puissant moteur de template Jinja2 pour la génération du code HTML. Cette intégration vous permet d'exploiter les fonctionnalités de templating directement dans vos composants.
Syntaxe de base
Jinja2 utilise trois types de délimiteurs essentiels :
1. Affichage de variables {{ ... }}
Ce délimiteur permet d'afficher le contenu d'une variable. Exemple simple :
Template<h1>{{ username }}</h1>
<p>Bienvenue {{ user.firstname }} {{ user.lastname }}</p>
2. Instructions de contrôle {% ... %}
Ces délimiteurs permettent d'exécuter des instructions comme les conditions ou les boucles. Nous les verrons en détail plus loin.
3. Commentaires {# ... #}
Pour ajouter des notes dans votre template qui ne seront pas rendues dans le HTML final :
Template{# Ceci est un commentaire qui n'apparaîtra pas dans le HTML #}
<div>Contenu visible</div>
Variables et expressions
1. Variables simples
L'affichage basique d'une variable :
Template<p>Nom: {{ name }}</p>
<p>Age: {{ age }}</p>
<p>Prix: {{ price }} €</p>
2. Accès aux attributs d'objets
Vous pouvez accéder aux attributs d'objets avec le point :
Template<p>Email: {{ user.email }}</p>
<p>Téléphone: {{ user.phone }}</p>
<p>Adresse: {{ user.address.street }}</p>
3. Accès aux éléments de liste
Accéder aux éléments par index :
Template<p>Premier élément: {{ items[0] }}</p>
4. Expressions mathématiques
Les expressions peuvent inclure des calculs :
Template<p>Total: {{ price * quantity }} €</p>
<p>TVA (20%): {{ price * 0.2 }} €</p>
<p>Prix final: {{ (price * quantity) * 1.2 }} €</p>
5. Concaténation de chaînes
Combiner plusieurs variables :
Template<p>Nom complet: {{ firstname + " " + lastname }}</p>
<p>URL: {{ "https://" + domain + "/" + path }}</p>
Structures conditionnelles
1. Condition simple IF
La structure conditionnelle de base :
Template{% if user.is_logged_in %}
<p>Bienvenue {{ user.name }}</p>
{% else %}
<p>Veuillez vous connecter</p>
{% endif %}
2. Conditions multiples avec ELIF
Utilisation de elif pour des conditions plus complexes :
Template{% if temperature > 30 %}
<p class="hot">Il fait très chaud</p>
{% elif temperature > 20 %}
<p class="warm">Il fait bon</p>
{% elif temperature > 10 %}
<p class="cool">Il fait frais</p>
{% else %}
<p class="cold">Il fait froid</p>
{% endif %}
3. Opérateurs de comparaison
Différents types de conditions :
Template{% if age >= 18 %}
<button>Accès autorisé</button>
{% endif %}
{% if status == "active" %}
<span class="badge-green">Actif</span>
{% endif %}
{% if items|length > 0 %}
<p>Vous avez {{ items|length }} articles</p>
{% endif %}
4. Conditions logiques
Combinaison de conditions avec AND, OR :
Template{% if user.is_admin and user.is_active %}
<a href="/admin">Panel Admin</a>
{% endif %}
{% if user.role == "editor" or user.role == "admin" %}
<button>Modifier</button>
{% endif %}
Structures de boucles
1. Boucle FOR
Itération sur une liste :
Template<ul>
{% for fruit in fruits %}
<li>{{ fruit }}</li>
{% endfor %}
</ul>
2. Boucle avec index
Utilisation des variables spéciales de boucle :
Template<ol>
{% for product in products %}
<li class="{{ 'first' if loop.first else '' }}">
Article #{{ loop.index }}: {{ product.name }}
</li>
{% endfor %}
</ol>
3. Boucle sur un dictionnaire
Itérer sur les clés et valeurs :
Template<dl>
{% for key, value in user_info.items() %}
<dt>{{ key }}</dt>
<dd>{{ value }}</dd>
{% endfor %}
</dl>
4. Boucle avec condition
Filtrer les éléments dans une boucle :
Template<ul>
{% for user in users if user.is_active %}
<li>{{ user.name }} - {{ user.email }}</li>
{% endfor %}
</ul>
Filtres de base
1. Filtres de formatage
Modifier l'affichage des variables :
Template<p>Nom: {{ name|upper }}</p>
<p>Description: {{ description|lower }}</p>
<p>Titre: {{ title|title }}</p>
<p>Date: {{ created_at|strftime('%d/%m/%Y') }}</p>
2. Filtres numériques
Manipulation des nombres :
Template<p>Prix: {{ price|round(2) }} €</p>
<p>Nombre d'articles: {{ items|length }}</p>
<p>Moyenne: {{ total|float / count|float }}</p>
3. Filtres conditionnels
Valeurs par défaut et vérifications :
Template<p>Email: {{ user.email|default('Non renseigné') }}</p>
<p>Bio: {{ user.bio|default('Aucune biographie', true) }}</p>