Il est temps d'afficher des données ! Pour nous aider, Django fournit des balises de gabarit (template tags) qui sont intégrées au framework. Pour le reste du tutoriel, nous utiliserons plutôt le mot template, bien plus répandu que sa traduction "gabarit".
Il est temps d'afficher des données ! Pour nous aider, Django fournit des balises de gabarit (template tags) qui sont intégrées au framework. Pour le reste du tutoriel, nous utiliserons plutôt le mot template, bien plus répandu que sa traduction "gabarit".
-
Qu'est-ce que c'est que des balises de template ?
+
=== Qu'est-ce que c'est que des balises de template ? ===
En HTML, vous ne pouvez pas mettre directement du code Python car les navigateurs seraient incapables de le comprendre. Les navigateurs ne connaissent que le HTML. Nous vous avons signalé précédemment que HTML est du genre statique, alors que Python est bien plus dynamique.
En HTML, vous ne pouvez pas mettre directement du code Python car les navigateurs seraient incapables de le comprendre. Les navigateurs ne connaissent que le HTML. Nous vous avons signalé précédemment que HTML est du genre statique, alors que Python est bien plus dynamique.
Ligne 9:
Ligne 9:
Les Balises de template Django nous permettent de transférer des choses ressemblant à du Python dans du HTML afin de nous permettre de construire des sites web plus rapidement. Cool, non ?
Les Balises de template Django nous permettent de transférer des choses ressemblant à du Python dans du HTML afin de nous permettre de construire des sites web plus rapidement. Cool, non ?
-
Template d'affichage de la liste des billets
+
=== Template d'affichage de la liste des billets ===
Dans le chapitre précédent, nous avons donné à notre template une liste de billets à l'aide de la variable billets. Nous allons maintenant les afficher en HTML.
Dans le chapitre précédent, nous avons donné à notre template une liste de billets à l'aide de la variable billets. Nous allons maintenant les afficher en HTML.
Ligne 15:
Ligne 15:
Afin d'afficher une variable dans un template Django, nous utiliserons des doubles accolades avec le nom de la variable à l'intérieur. Ça ressemble à ceci :
Afin d'afficher une variable dans un template Django, nous utiliserons des doubles accolades avec le nom de la variable à l'intérieur. Ça ressemble à ceci :
-
blog/templates/blog/post_list.html
+
''blog/templates/blog/post_list.html''
<code>
<code>
{{ billets }}
{{ billets }}
</code>
</code>
-
Essayez de faire la même chose avec votre template blog/templates/blog/post_list.html. Ouvrez-le avec votre éditeur et remplacez tout ce qui se trouve entre la seconde balise <div> jusqu'au troisième </div> avec la ligne {{ billets }}. Sauvegardez votre fichier et rafraîchissez votre page pour voir le résultat :
+
Essayez de faire la même chose avec votre template ''blog/templates/blog/post_list.html''. Ouvrez-le avec votre éditeur et remplacez tout ce qui se trouve entre la seconde balise <div> jusqu'au troisième </div> avec la ligne {{ billets }}. Sauvegardez votre fichier et rafraîchissez votre page pour voir le résultat :
Comme vous pouvez le voir, tout ce que nous avons, c'est ceci :
Comme vous pouvez le voir, tout ce que nous avons, c'est ceci :
-
blog/templates/blog/post_list.html
+
''blog/templates/blog/post_list.html''
+
<code>
<QuerySet [<Billet: My second post>, <Billet: My first post>]>
<QuerySet [<Billet: My second post>, <Billet: My first post>]>
+
</code>
Cela signifie que Django l'interprète comme une liste d'objets. Essayez de vous rappeler comment afficher des listes en Python. Dans un template Django, vous pouvez les écrire de la façon suivante :
Cela signifie que Django l'interprète comme une liste d'objets. Essayez de vous rappeler comment afficher des listes en Python. Dans un template Django, vous pouvez les écrire de la façon suivante :
Ça marche ! Cependant, nous aimerions plutôt afficher les billets à la manière des billets statiques, comme lorsque nous les avions créés dans le chapitre Introduction au HTML. Vous pouvez mélanger HTML et balises de template. Notre <body> ressemble maintenant à ceci :
Ça marche ! Cependant, nous aimerions plutôt afficher les billets à la manière des billets statiques, comme lorsque nous les avions créés dans le chapitre Introduction au HTML. Vous pouvez mélanger HTML et balises de template. Notre <body> ressemble maintenant à ceci :
-
blog/templates/blog/post_list.html
+
''blog/templates/blog/post_list.html''
+
<code html>
<div>
<div>
<h1><a href="/">Django Girls Blog</a></h1>
<h1><a href="/">Django Girls Blog</a></h1>
Ligne 57:
Ligne 59:
</div>
</div>
{% endfor %}
{% endfor %}
+
</code>
-
Tout ce qui se situe entre {% for %} et {% endfor %} va être répété pour chaque objet présent dans la liste. Rafraîchissez votre page :
+
Tout ce qui se situe entre '{% for %}' et '{% endfor %}' va être répété pour chaque objet présent dans la liste. Rafraîchissez votre page :
Avez-vous remarqué que nous avons utilisé une notation légèrement différente cette fois-ci ({{ billet.title }} ou {{ billet.text }}) ? Nous accédons aux données associées à chaque champ défini dans notre modèle Billet. De même, le |linebreaksbr nous permet de rediriger le texte des billets à travers un filtre qui convertit automatiquement les fins de lignes en paragraphes.
+
Avez-vous remarqué que nous avons utilisé une notation légèrement différente cette fois-ci (''{{ billet.title }}'' ou ''{{ billet.text }}'') ? Nous accédons aux données associées à chaque champ défini dans notre modèle Billet. De même, le ''|linebreaksbr'' nous permet de rediriger le texte des billets à travers un filtre qui convertit automatiquement les fins de lignes en paragraphes.
-
Ça a marché ? Bravo ! Éloignez vous un peu de votre clavier maintenant : vous avez mérité de faire une pause. :)
+
Ça a marché ? Félicitations!
-
+
-
[Figure 13.4](image_link)
+
-
+
-
+
-
+
-
<html>
+
-
<h1 id="templates-django">Templates Django</h1>
+
-
<p>Il est temps d'afficher des données ! Pour nous aider, Django fournit des balises de gabarit (<strong>template tags</strong>) qui sont intégrées au framework. Pour le reste du tutoriel, nous utiliserons plutôt le mot template, bien plus répandu que sa traduction "gabarit".</p>
+
-
<h2 id="quest-ce-que-cest-que-des-balises-de-template-">Qu'est-ce que c'est que des balises de template ?</h2>
+
-
<p>En HTML, vous ne pouvez pas mettre directement du code Python car les navigateurs seraient incapables de le comprendre. Les navigateurs ne connaissent que le HTML. Nous vous avons signalé précédemment que HTML est du genre statique, alors que Python est bien plus dynamique.</p>
+
-
<p>Les <strong>Balises de template Django</strong> nous permettent de transferer des choses ressemblant à du Python dans du HTML afin de nous permettre de construire des sites web plus rapidement. Cool, non ?</p>
+
-
<h2 id="template-daffichage-de-la-liste-des-billets">Template d'affichage de la liste des billets</h2>
+
-
<p>Dans le chapitre précédent, nous avons donné à notre template une liste de billets à l'aide de la variable <code>billets</code>. Nous allons maintenant les afficher en HTML.</p>
+
-
<p>Afin d'afficher une variable dans un template Django, nous utiliserons des doubles accolades avec le nom de la variable à l'intérieur. Ça ressemble à ceci :</p>
<p>Essayez de faire la même chose avec votre template <code>blog/templates/blog/post_list.html</code>. Ouvrez-le avec votre éditeur et remplacez tout ce qui se trouve entre la seconde balise <code><div></code> jusqu'au troisième <code></div></code> avec la ligne <code>{{ billets }}</code>. Sauvegardez votre fichier et rafraichissez votre page pour voir le résultat :</p>
<pre><code class="lang-html"><QuerySet [<Billet: My second post>, <Billet: My first post>]>
+
-
</code></pre>
+
-
<p>Cela signifie que Django l'interprète comme une liste d'objets. Essayez de vous rappeler comment afficher des listes en Python. Dans un template Django, vous pouvez les écrire de la façon suivante :</p>
<p>Ça marche ! Cependant, nous aimerions plutôt afficher les billets à la manière des billets statiques, comme lorsque nous les avions créés dans le chapitre <strong>Introduction au HTML</strong>. Vous pouvez mixer HTML et balises de template. Notre <code>body</code> ressemble maintenant à ceci :</p>
<p>Tout ce qui se situe entre <code>{% for %}</code> et <code>{% endfor %}</code> va être répété pour chaque objet présent dans la liste. Rafraichissez votre page :</p>
<p>Avez-vous remarqué que nous avons utilisé une notation légèrement différente cette fois-ci (<code>{{ billet.title }}</code> ou <code>{{ billet.text }}</code>) ? Nous accédons aux données associées à chaque champ défini dans notre modèle <code>Billet</code>. De même, le <code>|linebreaksbr</code> nous permet de rediriger le texte des billets à travers un filtre qui convertit automatiquement les fins de lignes en paragraphes.</p>
+
-
<p>Ça a marché ? Bravo ! Éloignez vous un peu de votre clavier maintenant : vous avez mérité de faire une pause. :)</p>