Différences

Ci-dessous, les différences entre deux révisions de la page.

--- public:appro-s7:td_web:heritage-templates [2021/11/15 00:15] – edauce
+++ public:appro-s7:td_web:heritage-templates [2023/11/04 18:07] (Version actuelle) – edauce
@@ Ligne 1: / Ligne 1: @@
+==== 14. Héritage de template ====
+Django vous réserve encore bien des surprises : une assez géniale est l'héritage de template. Qu'est ce que ça signifie ? C'est une fonctionnalité qui vous permet de réutiliser certains morceaux de HTML dans différentes pages de votre site web.
+Les modèles permettent d'utiliser les mêmes informations ou mises en page en plusieurs endroits. Vous n'avez pas à vous répéter dans chaque fichier. Et si vous voulez changer quelque chose, vous n'avez pas à le faire dans chaque modèle, mais juste un!
+Créer un template de base
+Un template de base est le template le plus simple que vous pouvez faire hériter à chaque page de votre site web.
+Créons le fichier base.html dans le dossier blog/templates/blog/ :
+    blog
+    └───templates
+        └───blog
+            base.html
+            post_list.html
+Ensuite, ouvrez ce fichier dans l'éditeur de code et collez-y tout ce qui se trouve dans le fichier post_list.html. Ça devrait ressembler à ça :
+''blog/templates/blog/base.html''
+<code html>
+{% load static %}
+<html>
+    <head>
+        <title>Django Girls blog</title>
+        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
+        <link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
+        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
+    </head>
+    <body>
+        <div class="page-header">
+            <h1><a href="/">Django Girls Blog</a></h1>
+        </div>
+        <div class="content container">
+            <div class="row">
+                <div class="col-md-8">
+                {% for billet in billets %}
+                    <div class="billet">
+                        <div class="date">
+                            {{ billet.published_date }}
+                        </div>
+                        <h2><a href="">{{ billet.title }}</a></h2>
+                        <p>{{ billet.text|linebreaksbr }}</p>
+                    </div>
+                {% endfor %}
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
+</code>
+Puis, dans le fichier ''base.html'', remplacez tout ce qui se trouve dans <body> (de <body> à </body>) par ceci :
+''blog/templates/blog/base.html''
+<code html>
+<body>
+    <div class="page-header">
+        <h1><a href="/">Django Girls Blog</a></h1>
+    </div>
+    <div class="content container">
+        <div class="row">
+            <div class="col-md-8">
+            {% block content %}
+            {% endblock %}
+            </div>
+        </div>
+    </div>
+</body>
+</code>
+Vous pouvez remarquer qu'on vient de remplacer tout ce qui était entre {% for billet in billets %} et {% endfor %} avec :
+''blog/templates/blog/base.html''
+<code html>
+{% block content %}
+{% endblock %}
+</code>
+Mais pourquoi? Vous venez de créer un block ! Vous avez utilisé la balise de modèle ''{% block %}'' pour créer une partie qui va contenir du HTML. Ce HTML viendra d'un autre modèle qui étendra ce modèle-ci (''base.html''). Nous vous expliquerons comment faire cela dans un instant.
+Enregistrez base.html et ouvrez votre ''blog/templates/blog/post_list.html'' à nouveau dans l'éditeur de code. Vous allez tout supprimer au-dessus de ''{% for billet in billets %}'' et en dessous de ''{% endfor %}''. Lorsque vous avez terminé, le fichier ressemblera à ceci :
+''blog/templates/blog/post_list.html''
+<code html>
+{% for billet in billets %}
+    <div class="billet">
+        <div class="date">
+            {{ billet.published_date }}
+        </div>
+        <h2><a href="">{{ billet.title }}</a></h2>
+        <p>{{ billet.text|linebreaksbr }}</p>
+    </div>
+{% endfor %}
+</code>
+Nous voulons utiliser ceci dans le cadre de notre modèle pour tous les blocs 'content'. Il est temps d'ajouter ajouter des balises block à ce fichier !
+Vous voulez que votre balise block corresponde à la balise dans votre fichier base.html . Vous voulez aussi qu'il inclue tout le code qui appartient à vos blocs de contenu. Pour faire cela, entourez tout le code de ''{% block content %}'' et ''{% endblock %}''. Comme ceci :
+''blog/templates/blog/post_list.html''
+<code html>
+{% block content %}
+    {% for billet in billets %}
+        <div class="billet">
+            <div class="date">
+                {{ billet.published_date }}
+            </div>
+            <h2><a href="">{{ billet.title }}</a></h2>
+            <p>{{ billet.text|linebreaksbr }}</p>
+        </div>
+    {% endfor %}
+{% endblock %}
+</code>
+Seule une chose reste à faire. Nous devons connecter ces deux modèles ensemble. C'est ça, étendre des modèles ! Nous allons le faire en ajoutant une balise 'extends' au début du fichier. Comme cela :
+''blog/templates/blog/post_list.html''
+<code html>
+{% extends 'blog/base.html' %}
+{% block content %}
+    {% for billet in billets %}
+        <div class="billet">
+            <div class="date">
+                {{ billet.published_date }}
+            </div>
+            <h2><a href="">{{ billet.title }}</a></h2>
+            <p>{{ billet.text|linebreaksbr }}</p>
+        </div>
+    {% endfor %}
+{% endblock %}
+</code>
+Et voilà ! Enregistrez le fichier et vérifiez que votre site fonctionne toujours correctement. :)
+Si vous obtenez l'erreur ''TemplateDoesNotExist'', cela signifie qu'il n'y a pas de fichier ''blog/base.html'' et que vous avez runserver en cours d'exécution dans la console. Arrêtez-le (en appuyant simultanément sur Ctrl+C, les touches Control et C de votre clavier) et relancez-le en tapant la commande python manage.py runserver.
+[[public:appro-s7:td_web:final|15. Finaliser votre application]]