Les gabarits avec Django

00:00:00 :Dans cette vidéo, on va voir la balise bloc qui va nous permettre d'étendre un template HTML.Dans ce cas-ci, on a notre fichier index.html qui étend le fichier de base et pareil pour le post,
00:00:12 :mais on aimerait bien rajouter du contenu, par exemple à la suite de body ici,ou par exemple remplacer le titre, puisque pour l'instant le titre affiche mon super site,mais on aimerait bien que le titre soit différent sur chacune des pages.
00:00:24 :Pour ça, accrochez-vous, puisque ce n'est pas forcément super logique au début,la première fois qu'on voit ça, mais vous allez voir qu'en fait c'est quand même assez simple.
00:00:31 :Donc ce qu'on va faire, c'est qu'on va indiquer à l'intérieur de ce template des endroits que l'on souhaite pouvoir modifier dans les fichiers qui étendent le fichier de base.
00:00:39 :Donc dans mon fichier base.html ici, par exemple, si je veux modifier le titre, je vais mettre une balise.Donc la balise, c'est tout simplement là encore avec une accolade, un pourcentage et on va utiliser le mot bloc.
00:00:52 :Et on va donner un titre à ce bloc, donc dans ce cas-ci, on va l'appeler title,puisqu'on va remplacer la balise title, mais ça peut être n'importe quoi,on pourra mettre Patrick ou n'importe quel nom qui va en fait représenter notre bloc.
00:01:03 :Donc on met un bloc qu'on appelle title, on met là encore les pourcentages et l'accolade,et on va ensuite indiquer où se termine ce bloc.
00:01:11 :Donc je remets une accolade, un pourcentage et on va dire end bloc tout simplement,et on referme notre balise.Donc là ce bloc, ça veut dire qu'on va pouvoir insérer des données ici,donc entre la balise qui ouvre et la balise qui ferme.
00:01:24 :Pour ça, c'est très simple, je peux me rendre sur le fichier index.html et à la suite ici, je vais utiliser la même balise, donc bloc,et le nom de la balise title, et on va dire ici tout simplement title,donc on va mettre un tag html title, et on va dire le bloc tout simplement,
00:01:40 :et on ferme notre bloc, donc end bloc.Donc là en fait ce que ça va faire, c'est que ça va insérer ce qu'on a mis ici dans notre bloc,dans le fichier html qui hérite de ce fichier de base,et ça va l'insérer à l'endroit où on a notre balise bloc ici.
00:01:56 :Donc je vais vous montrer ce que ça donne, je reviens ici sur mon site, j'actualise,et là on voit que le titre de la fenêtre a bien changé, et que c'est marqué maintenant le bloc à la place de mon super site.
00:02:06 :Donc ça c'est très pratique puisqu'on va pouvoir modifier différents endroits de ma page.Par exemple si je souhaite garder mon super site ici, mais permettre de rajouter du contenu à la suite,je peux mettre un autre bloc ici, je vais l'appeler content, donc bloc content,et on va le fermer, donc end bloc, et je vais pouvoir donc rajouter du contenu ici.
00:02:25 :Donc dans mon fichier index.html, je vais afficher par exemple les articles du bloc,donc ici je fais un bloc avec le nom de content,on va refaire notre boucle sur les posts, donc on va dire for post in post,et on va afficher les articles, donc post.title,
00:02:43 :et on ferme notre boucle.Donc voilà, j'ai mon bloc contenu, je fais ma boucle, je ferme ma boucle,et je vais fermer mon bloc, donc ne pas oublier de fermer les blocs à chaque fois.
00:02:54 :Donc on a le bloc du contenu, on a notre boucle pour boucler sur les posts,et afficher le titre des posts, donc je vais faire une indentation pour que ce soit bien clair,et on ferme notre bloc de contenu.
00:03:03 :Et donc tout ce qui est ici, à l'intérieur de ce bloc, ça va être inséré directement à la place de ce bloc ici, dans mon fichier de base.
00:03:10 :Donc je reviens, j'actualise, et là j'ai bien mon super site qui est toujours présent,puisqu'on l'avait indiqué dans le fichier de base, on a 1H1 ici,et ensuite on a le bloc de contenu qui se rajoute, qui provient du fichier index.html.
00:03:23 :Donc je reviens ici, et là j'ai bien mes articles qui sont affichés.Et je peux faire la même chose après pour le post.Donc là on va remettre les liens, on va faire un tag A,et on va remettre les liens vers nos articles de blog avec la balise URL,
00:03:38 :donc bloc post, et on va dire que le slug est égal à post.slug.Et on ferme notre balise, donc là si je reviens, que j'actualise,j'ai bien un lien vers chacun de mes articles, donc je clique, j'accède à mon article,donc là pour l'instant on a toujours mon super site qui est affiché,
00:03:53 :mais on a plus le contenu de l'article.Donc de la même façon, je reviens dans mon post, et je vais étendre le contenu.Donc on va refaire le bloc content, et à l'intérieur de ce bloc,on va afficher le contenu du post.
00:04:06 :Donc on va mettre la variable post, alors je ne sais plus si c'était post ou bloc post,donc c'est juste post ici, donc post.content avec le filtre safe pour qu'il soit bien affiché,
00:04:16 :et je ferme mon bloc, end bloc.Et j'ai bien donc mon contenu ici.Alors là je mets une indentation, c'est vraiment juste pour le visuel,vous n'êtes pas obligés de la mettre, là encore on est dans du HTML,donc il n'y a pas d'indentation, pas comme avec Python où l'indentation est très importante,
00:04:30 :là dans le fichier HTML c'est juste pour que ce soit un peu plus clair visuellement.Donc je reviens, j'actualise, et là j'ai bien le contenu de mon blog qui s'affiche.
00:04:39 :Donc le contenu de ce post particulier.Donc si je vais voir un autre article, là j'aurais bien toujours mon super site avec la couleur de fond,avec le titre qui va changer.
00:04:49 :Donc là je ne l'ai pas changé, en fait vous voyez qu'on a juste le chemin de l'URL,donc je pourrais également changer le titre.Donc rajouter ici le bloc titre, donc bloc title,et ici on refait une balise title qui va être égale au titre en fait de notre article,
00:05:05 :et on ferme notre balise.Donc vous voyez que ce n'est vraiment pas très compliqué en fait,c'est juste que c'est un petit peu mélangeant,mais là si j'actualise j'ai bien donc un terminal pour Windows qui s'affiche,donc c'est parfait.
00:05:15 :Donc vous voyez qu'en fait on a ici notre fichier de base,avec des endroits dans lesquels on spécifie par exemple ici qu'on veut modifier,donc on veut ajouter des choses,et là aussi également avec le titre,et ensuite dans les fichiers enfants on va reprendre toute la base,donc on va reprendre tout le fichier au complet,
00:05:30 :et on va juste pouvoir par la suite modifier certaines parties du fichier grâce à ces blocs.Donc on a un bloc de titre, un bloc de contenu,et on le met à la suite ici avec notre bloc de titre, notre bloc de contenu,on n'est même pas obligé de les mettre dans l'ordre,
00:05:42 :je pourrais très bien inverser tout ça ici,et ça ne posera pas de problème.Donc là si je reviens sur ma vue de bloc,j'actualise, là vous voyez que ça fonctionne de la même façon.
00:05:51 :Donc on n'est pas obligé de garder l'ordre,c'est vraiment juste qu'il faut mettre le bloc avec le titre du bloc,et vous voyez qu'on n'est même pas obligé de remplir tous les blocs,si j'enlève le bloc du titre ici je n'ai pas d'erreur.
00:06:01 :Donc vous pouvez très bien faire des blocs ici,qui ne contiendront rien, ça ne pose absolument aucun problème.Là si je reviens sur mon fichier, j'actualise,on a juste le titre qui n'est maintenant plus présent,mais ça ne pose pas de problème et on n'a pas d'erreur sur notre site.
00:06:14 :Donc voilà comment rajouter du contenu à partir d'un fichier de base,donc ça c'est quelque chose qu'on fait très souvent,pour éviter de répéter du code,vous allez avoir un fichier de base avec les éléments de base,donc le doc type, le html, le head,avec forcément des blocs à l'intérieur du head,
00:06:29 :puisqu'on va vouloir spécifier par exemple,les tags pour les sites comme Facebook,donc les fameux tags og,donc là je ne rentre pas dans les détails,mais c'est des choses qu'on a besoin de modifier,pour chaque page à l'intérieur du head.
00:06:40 :Ensuite le body bien entendu,on va avoir besoin de modifier le body,mais vous pouvez par exemple garder un footer,qui va être le même sur toutes les pages.

La balise block

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Christian Aucane

Remplir un block avec un texte par defaut

Rechercher sur le site