| Les deux révisions précédentesRévision précédente | |
| dev:python:flask:templates [2026/03/29 14:10] – yoann | dev:python:flask:templates [2026/03/30 05:12] (Version actuelle) – yoann |
|---|
| {{tag>dev python flask templates jinja2}} | {{tag>dev python flask templates jinja2}} |
| |
| :TODO_DOCUPDATE: | |
| |
| ====== Flask : Utilisation des templates ====== | ====== Flask : Utilisation des templates ====== |
| ===== Généralités ===== | ===== Généralités ===== |
| |
| Grossièrement, le **template** est une page web à trous. Il contient des sections statiques en HTML/javascript directement interprétables par le navigateur web et des section non remplies désignées **placeholders**. Le contenu des **placeholders** est généré par l'application à l'exécution pour obtenir un comportement dynamique. | Grossièrement, le **template** est une page web à trous. Il contient des sections invariantes en HTML/javascript directement interprétables par le navigateur web et des sections dynamiques ou non remplies désignées **placeholders**. Le contenu des **placeholders** est généré par l'application à l'exécution pour obtenir un comportement dynamique. |
| |
| **Flask** s'appuie sur le moteur **Jinja2** pour la gestion des templates. Plusieurs éléments syntaxiques sont disponibles pour délimiter les sections à l'attention du moteur de templates : | **Flask** s'appuie sur le moteur **Jinja2** pour la gestion des templates. Plusieurs éléments syntaxiques sont disponibles pour délimiter les sections à l'attention du moteur de templates : |
| |
| * ''%%{{ }}%%'' Affiche le résultat du code Python ; | * ''%%{{ }}%%'' Affiche le résultat du code Python (balises HTML échappées) ; |
| * ''%%{% %}%%'' Code Python à interpréter ; | * ''%%{% %}%%'' Code Python à interpréter ; |
| * ''%%{# #}%%'' Commentaires. | * ''%%{# #}%%'' Commentaires. |
| |
| |
| <code html> | <code html [highlight_lines_extra="8,9"]> |
| <!DOCTYPE html> | <!DOCTYPE html> |
| <html lang="en"> | <html lang="en"> |
| La notion d'héritage appliquée au template va permettre de **factoriser** le code. La factorisation augmente la qualité du code et simplifie la maintenance. | La notion d'héritage appliquée au template va permettre de **factoriser** le code. La factorisation augmente la qualité du code et simplifie la maintenance. |
| * On définit un template parent contenant des **placeholders** ; | * On définit un template parent contenant des **placeholders** ; |
| * Chaque enfant héritant du document parent redéfini les **placeholders** ; | * Chaque enfant héritant du document parent devra définit le contenu des **placeholders** ; |
| |
| |
| * En général on définit un document ''base.html'' contenant la structure générale du site/application web ; | * En général on définit un document ''base.html'' contenant la structure générale du site/application web ; |
| * Chaque enfant complète les placeholders pour produire la réponse : la page web a retourner au client. | * Chaque enfant complète les placeholders pour produire la réponse (la page web complète à retourner au client). |
| |
| |
| Un exemple de document parent avec en surbrillance les placeholders : | Un exemple de document parent avec en surbrillance la définition des placeholders : |
| |
| <code html base.html [highlight_lines_extra="5,23"]> | <code html base.html [highlight_lines_extra="5,23"]> |
| |
| <note> | <note> |
| Dans le template enfant, le block "title" est défini à l'intéreur du block "content" : C'est parfaitement supporté par le moteur de template et cela permet de factoriser : le texte "Accueil" sera utilisé à la fois pour le titre de niveau 1 et pour le titre du document HTML dans le template parent. | Dans le template enfant, le block "title" est défini à l'intérieur du block "content" : C'est parfaitement supporté par le moteur de template et cela permet de factoriser : le texte "Accueil" sera utilisé à la fois pour le titre de niveau 1 et pour le titre du document HTML dans le template parent. |
| </note> | </note> |
| |
| |
| |
| La structure conditionnelle ''if'' utilise la syntaxe suivante : | La structure conditionnelle ''if'' est supportée avec la syntaxe suivante : |
| <code html [highlight_lines_extra="17,21"]> | <code html [highlight_lines_extra="17,21"]> |
| {% extends 'base.html' %} | {% extends 'base.html' %} |
