public:appro-s7:td_web:heritage-templates

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
public:appro-s7:td_web:heritage-templates [2023/11/03 14:58] – edaucepublic:appro-s7:td_web:heritage-templates [2023/11/04 18:07] (Version actuelle) – edauce
Ligne 10: Ligne 10:
 Créons le fichier base.html dans le dossier blog/templates/blog/ : Créons le fichier base.html dans le dossier blog/templates/blog/ :
  
-blog +    blog 
-└───templates +    └───templates 
-    └───blog+        └───blog
             base.html             base.html
             post_list.html             post_list.html
Ligne 18: Ligne 18:
 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 : 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 +''blog/templates/blog/base.html'' 
 +<code html>
 {% load static %} {% load static %}
 <html> <html>
Ligne 51: Ligne 51:
     </body>     </body>
 </html> </html>
 +</code>
  
-Puis, dans le fichier base.html, remplacez tout ce qui se trouve dans <body> (de <body> à </body>) par ceci : +Puis, dans le fichier ''base.html'', remplacez tout ce qui se trouve dans <body> (de <body> à </body>) par ceci :
- +
-blog/templates/blog/base.html+
  
 +''blog/templates/blog/base.html''
 +<code html>
 <body> <body>
     <div class="page-header">     <div class="page-header">
Ligne 69: Ligne 70:
     </div>     </div>
 </body> </body>
 +</code>
 Vous pouvez remarquer qu'on vient de remplacer tout ce qui était entre {% for billet in billets %} et {% endfor %} avec : 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 +''blog/templates/blog/base.html'' 
 +<code html>
 {% block content %} {% block content %}
 {% endblock %} {% 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.+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 : +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+
  
 +''blog/templates/blog/post_list.html''
 +<code html>
 {% for billet in billets %} {% for billet in billets %}
     <div class="billet">     <div class="billet">
Ligne 92: Ligne 94:
     </div>     </div>
 {% endfor %} {% 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 ! 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 : +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+
  
 +''blog/templates/blog/post_list.html''
 +<code html>
 {% block content %} {% block content %}
     {% for billet in billets %}     {% for billet in billets %}
Ligne 110: Ligne 113:
     {% endfor %}     {% endfor %}
 {% endblock %} {% 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 : 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 +''blog/templates/blog/post_list.html'' 
 +<code html>
 {% extends 'blog/base.html' %} {% extends 'blog/base.html' %}
  
Ligne 128: Ligne 131:
     {% endfor %}     {% endfor %}
 {% endblock %} {% endblock %}
 +</code>
  
 Et voilà ! Enregistrez le fichier et vérifiez que votre site fonctionne toujours correctement. :) 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.+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]] [[public:appro-s7:td_web:final|15. Finaliser votre application]]
  
  • public/appro-s7/td_web/heritage-templates.1699019932.txt.gz
  • Dernière modification : 2023/11/03 14:58
  • de edauce