Including templates into LaTeX document
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
6f868de04b
commit
5de564b21f
|
@ -2,7 +2,12 @@
|
|||
|
||||
Ou comment valider proprement des données entrantes.
|
||||
|
||||
\includegraphics{images/xkcd-327.png}
|
||||
\begin{figure}[H]
|
||||
\centering
|
||||
\scalebox{1.0}{\includegraphics[max size={\textwidth}{\textheight}]{images/xkcd-327.png}}
|
||||
\caption{XKCD 327}
|
||||
\end{figure}
|
||||
|
||||
|
||||
\begin{quote}
|
||||
Le form, il s'assure que l'utilisateur n'a pas encodé de conneries et
|
||||
|
|
|
@ -0,0 +1,101 @@
|
|||
\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 \}\}}, ... 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:
|
||||
|
|
@ -47,9 +47,11 @@
|
|||
d'hébergement de fichiers, quels qu'ils soient. Il peut s'agir de
|
||||
fichiers de logs, de données applications, de fichiers média envoyés par
|
||||
vos utilisateurs, de vidéos et images ou de données de sauvegardes.
|
||||
\textbf{\url{https://aws.amazon.com/fr/s3/}.}
|
||||
\includegraphics{images/amazon-s3-arch.png}
|
||||
\end{description}
|
||||
|
||||
\textbf{\url{https://aws.amazon.com/fr/s3/}.}
|
||||
|
||||
\includegraphics{images/amazon-s3-arch.png}
|
||||
|
||||
|
||||
|
1
main.tex
1
main.tex
|
@ -71,6 +71,7 @@
|
|||
\include{chapters/administration.tex}
|
||||
\include{chapters/urls.tex}
|
||||
\include{chapters/forms.tex}
|
||||
\include{chapters/templates.tex}
|
||||
\include{chapters/authentication.tex}
|
||||
\include{chapters/context-processors.tex}
|
||||
\chapter{Conclusions}
|
||||
|
|
|
@ -1,104 +1,10 @@
|
|||
== 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 *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.
|
||||
|
||||
En intégrant un ensemble de *tags*, cela vous permettra de greffer les données reçues en entrée dans un patron prédéfini.
|
||||
|
||||
NOTE: (je ne sais plus ce que je voulais dire ici)
|
||||
|
||||
Un squelette de page HTML basique ressemble à ceci:
|
||||
|
||||
[source,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>
|
||||
----
|
||||
|
||||
Notre première vue permettra de récupérer la liste des objets de type `Wishlist` que nous avons définis dans le fichier `wish/models.py`. Supposez que cette liste soit accessible *via* la clé `wishlists` d'un dictionnaire passé au template. Elle devient dès lors accessible grâce aux tags `{% for wishlist in wishlists %}`. A chaque tour de boucle, on pourra directement accéder à la variable `{{ wishlist }}`. De même, il sera possible d'accéder aux propriétés de cette objet de la même manière: `{{ wishlist.id }}`, `{{ wishlist.description }}`, ... et d'ainsi respecter la mise en page que nous souhaitons.
|
||||
|
||||
En reprenant l'exemple de la page HTML définie ci-dessus, on pourra l'agrémenter de la manière suivante:
|
||||
|
||||
[source,django]
|
||||
----
|
||||
<!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>
|
||||
----
|
||||
|
||||
image::images/html/my-first-wishlists.png[]
|
||||
|
||||
Mais plutôt que de réécrire à chaque fois le même entête, on peut se 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'*é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:
|
||||
|
||||
[source,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>
|
||||
----
|
||||
<1> Un bloc `title`
|
||||
<2> Un bloc `body`
|
||||
|
||||
La page HTML pour nos listes de souhaits devient alors:
|
||||
|
||||
[source,html]
|
||||
----
|
||||
<!-- templates/wishlist/wishlist_list.html -->
|
||||
|
||||
{% extends "base.html" %} <1>
|
||||
|
||||
{% block title %}{{ block.super }} - Listes de souhaits{% endblock %} <2>
|
||||
|
||||
{% block body %} <3>
|
||||
<p>Mes listes de souhaits</p>
|
||||
<ul>
|
||||
{% for wishlist in wishlists %}
|
||||
<li>{{ wishlist.name }}: {{ wishlist.description }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
----
|
||||
<1> On étend/hérite de notre page `base.html`
|
||||
<2> On redéfinit le titre (mais on réutilise le titre initial en appelant `block.super`)
|
||||
<3> On définit uniquement le contenu, qui sera placé dans le bloc `body`.
|
||||
|
||||
=== Structure et configuration
|
||||
|
||||
==== Répertoires de découverte des templates
|
||||
|
||||
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 `templates`. La hiérarchie des fichiers devient alors celle-ci:
|
||||
|
||||
[source,bash]
|
||||
----
|
||||
$ tree templates/
|
||||
|
|
Loading…
Reference in New Issue