102 lines
3.6 KiB
TeX
102 lines
3.6 KiB
TeX
\chapter{Templates}
|
|
|
|
Avant de commencer à interagir avec nos données au travers de listes, formulaires et d'interfaces sophistiquées, quelques mots sur les templates: il s'agit en fait de \textbf{squelettes} de présentation, recevant en entrée un dictionnaire contenant des clés-valeurs et ayant pour but de les afficher selon le format que vous définirez.
|
|
|
|
Un squelette de page HTML basique ressemble à ceci:
|
|
|
|
\begin{minted}{html}
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title></title>
|
|
</head>
|
|
<body>
|
|
<p>Hello world!</p>
|
|
</body>
|
|
</html>
|
|
\end{minted}
|
|
|
|
Notre première vue permettra de récupérer la liste des objets de type \texttt{Wishlist} que nous avons définis dans le fichier \texttt{wish/models.py}.
|
|
Supposez que cette liste soit accessible \textit{via} la clé \texttt{wishlists} d'un dictionnaire passé au template.
|
|
Cette liste devient dès lors accessible grâce aux tags \texttt{\{\% for wishlist in wishlists \%\}}.
|
|
A chaque tour de boucle, nous pourrons directement accéder à la variable \texttt{\{\{ wishlist \}\}}.
|
|
De même, il sera possible d'accéder aux propriétés de cette objet de la même manière: \texttt{\{\{ wishlist.id \}\}}, \texttt{\{\{ wishlist.description \}\}}, \ldots et d'ainsi respecter la mise en page que nous souhaitons.
|
|
|
|
En reprenant l'exemple de la page HTML définie ci-dessus, nous pouvons l'agrémenter de la manière suivante:
|
|
|
|
\begin{minted}{html}
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title></title>
|
|
</head>
|
|
<body>
|
|
<p>Mes listes de souhaits</p>
|
|
<ul>
|
|
{% for wishlist in wishlists %}
|
|
<li>{{ wishlist.name }}: {{ wishlist.description }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</body>
|
|
</html>
|
|
\end{minted}
|
|
|
|
|
|
\begin{figure}[H]
|
|
\centering
|
|
\scalebox{1.0}{\includegraphics[max size={\textwidth}{\textheight}]{images/html/my-first-wishlists.png}}
|
|
\end{figure}
|
|
|
|
\section{Entête, héritage et extensions}
|
|
|
|
Plutôt que de réécrire à chaque fois le même entête, nous pouvons nous simplifier la vie en implémentant un héritage au niveau des templates.
|
|
Pour cela, il suffit de définir des blocs de contenu, et d'\emph{étendre} une page de base, puis de surcharger ces mêmes blocs.
|
|
|
|
Par exemple, si on repart de notre page de base ci-dessus, on va y définir deux blocs réutilisables:
|
|
|
|
\begin{minted}{html}
|
|
<!-- templates/base.html -->
|
|
|
|
{% load static %}<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>{% block title %}Gwift{% endblock %}</title> <1>
|
|
</head>
|
|
<body>
|
|
{% block body %}<p>Hello world!</p>{% endblock %} <2>
|
|
</body>
|
|
</html>
|
|
\end{minted}
|
|
|
|
Nous avons à présent un bloc \texttt{title} et un bloc \texttt{body}, qui peuvent être surchargés dès qu'une page se définit comme extension de notre page \texttt{base.html}:
|
|
|
|
\begin{minted}{html}
|
|
<!-- templates/wishlist/wishlist_list.html -->
|
|
|
|
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ block.super }} - Listes de souhaits{% endblock %} <2>
|
|
|
|
{% block body %}
|
|
<p>Mes listes de souhaits</p>
|
|
<ul>
|
|
{% for wishlist in wishlists %}
|
|
<li>{{ wishlist.name }}: {{ wishlist.description }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endblock% %}
|
|
\end{minted}
|
|
|
|
\section{Structure et configuration}
|
|
|
|
Il est conseillé que les templates respectent la structure de vos différentes applications, mais dans un répertoire à part.
|
|
Par convention, nous les placerons dans un répertoire \texttt{templates}.
|
|
La hiérarchie des fichiers devient alors celle-ci:
|
|
|