Modèles et héritage
Une des plus puissantes fonctionnalités de Flask+Jinja est l’héritage de modèle : un modèle de base sert de squelette à des modèles enfant.
Ceci est très utile pour un site qui doit comporter plusieurs pages ayant des éléments en commun : en-tête, pied de page, menu de navigation, …
Exemple de structure simple
Le modèle de base
Il contient la structure commune à toutes les pages du site.
- Des modèles, sous forme de fichiers HTML, y sont intégrés avec la déclaration
{% include monFichier.html %}, - Des blocs HTML y sont intégré avec la déclaration
{% block monBloc %}{% endblock %}.
Exemple avec un fichier modèle base.html :
<!DOCTYPE html >
<html lang="fr">
{% block head %}
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
</head>
{% endblock %}
<body>
{% include "header.html" %}
<div class="interieur">
{% block content %}{%- endblock %}
</div>
{% include "footer.html" %}
</body>
</html>
Ainsi les modèles « enfant » sont des extensions du modèle de base, grâce à la déclaration {% extends "base.html" %}.
Exemple avec le fichier maPage.html :
{% extends "base.html" %}
{% block head %}
{{ super() }}
<style type="text/css">
.interieur{ color: #336699; }
</style>
{% endblock %}
{% block title %}Titre de la page{% endblock %}
{% block content %}
<p> Bonjour ! </p>
{% endblock %}
Et les fichiers header.html :
<div> Mon plus beau site Web !</div>
et footer.html :
<a href="https://info.blaisepascal.fr">Visitez info.blaisepascal.fr !</a>
Du point de vue du navigateur Web, le rendu final de la page sera :
<!DOCTYPE html >
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de la page</title>
<style type="text/css">
.interieur{ color: #336699; }
</style>
</head>
<body>
<div> Mon plus beau site Web !</div>
<div class="interieur">
<p> Bonjour ! </p>
</div>
<a href="https://info.blaisepascal.fr">Visitez info.blaisepascal.fr !</a>
</body>
</html>
Quelques explications :
- Coté modèle de base, on déclare des blocs avec
{% block monBloc %}{% endblock %} - Un bloc peut être initialement vide, ou pas : s’il n’est pas vide à la déclaration (le bloc
headpar exemple) :- son contenu sera remplacé par celui de la déclaration
{% block monBloc %}...{% endblock %}coté modèle enfant - ou bien complété par celui du modèle enfant lorsqu’il est précédé de
{{ super() }}
- son contenu sera remplacé par celui de la déclaration
- Les variables déclarées dans le modèle de base sont utilisables dans les modèles enfant.
