- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Dans cette partie, on va donc créer la page d'accueil de notre boutique.Cette page d'accueil, on va donc la créer à l'intérieur de notre application Store.
00:00:08 :On va donc devoir créer un dossier qui va s'appeler Templates,donc je vais faire un clic droit New Directory,et cette fois-ci, je vais l'appeler Templates.
00:00:16 :C'est bien important qu'il s'appelle comme ceci,sinon il ne sera pas reconnu par Django comme un dossier qui contient des templates HTML.Je vais également directement, en mettant un slash, créer un sous-dossier Store,puisque, en fait, ça va nous permettre d'éviter d'avoir des clashes potentielles.
00:00:30 :Par exemple, imaginez que vous ayez deux fichiers index.html dans différentes applications.Si les deux fichiers HTML se retrouvent directement à l'intérieur des dossiers Templates,eh bien, on n'aura aucun moyen de les distinguer.
00:00:41 :Ils s'appelleront les deux index.html.Si on met tout ça à l'intérieur d'un sous-dossier,on aura d'un côté store slash index.html,et imaginons qu'on ait une application de blog, on aurait blog slash index.html.
00:00:53 :Donc, c'est très important de créer un sous-dossier à l'intérieur du dossier Template.Ça fait un petit peu bizarre parce qu'on a Store, Template et encore une fois Store,mais c'est vraiment juste pour avoir, si vous voulez, un nom qui permet de protéger le nom du fichierpour pouvoir le distinguer d'une autre application.
00:01:08 :Donc, à l'intérieur de ce dossier Store, on va créer un fichier HTML,que je vais appeler cette fois-ci index, tout simplement.Et là, on va enlever toute cette partie d'HTML, puisqu'on n'en a pas besoin.
00:01:18 :On va utiliser le HTML qui est dans le fichier de base.Donc, c'est tout là l'intérêt d'étendre ce fichier de base,c'est de ne pas répéter tout ce qui est à l'intérieur de ce fichier.
00:01:28 :Donc, ce qu'on va faire dans le fichier index.html, c'est étendre le fichier de base.Pour ça, on va utiliser la balise Extend, donc avec une accolade et un pourcentage.
00:01:38 :N'oubliez pas l'espace entre tout ça.Donc là, il ne faut pas d'espace entre l'accolade et le pourcentage,mais ensuite, il faut bien un espace avec l'instruction Extend, donc un espace ici.
00:01:47 :Et ensuite, on va dire qu'on souhaite étendre le fichier base.htmlet on ferme la balise avec les pourcentages et l'accolade qui ferment.Donc là, c'est base.html, tout simplement, parce que le dossier de template,
00:01:59 :on n'a rien à l'intérieur, on n'a pas de sous-dossier à l'intérieur.Donc, comme on a mis le dossier template dans les settings,eh bien, on met juste le nom du fichier à partir du dossier template.
00:02:09 :Donc, on n'a pas besoin ici de mettre template.html, c'est juste base.html.Maintenant, ce qu'on va vouloir faire, c'est étendre ce fichier de base.Ce qu'on veut, nous, c'est rajouter des éléments à l'intérieur du body, ici.
00:02:20 :Donc là, on pourrait mettre, par exemple, un h1 et dire la boutique de DuckString.Nous, on va vouloir mettre ce h1, par exemple, dans le fichier de index.html.
00:02:28 :Donc, ce qu'on va faire, c'est indiquer ici qu'on souhaite avoir un bloc de contenuqu'on va pouvoir modifier dans les différents fichiers qui étendent le fichier de base.
00:02:37 :Donc, pour ça, on va là encore créer une autre balise, donc avec l'accolade et le pourcentage.Et cette fois-ci, on va utiliser la balise bloc et on va lui donner un nom.
00:02:45 :Donc, le nom, ça va être tout simplement content et on referme la balise comme ceci.Donc, ça, c'est le nom de la balise et ça, c'est ce qui permet d'indiquer qu'on a une balise de type bloc.
00:02:54 :Et cette balise, il faut la refermer pour dire, en fait, jusqu'où elle va aller.Donc, on va remettre l'accolade et le pourcentage et on va dire endBloc comme ceci, tout coller.
00:03:03 :Et là encore, n'oubliez pas les espaces. Si vous mettez ça comme ça, ça ne va pas fonctionner.Donc, on met bien la balise qui ouvre, l'espace, endBloc, l'espace et la balise qui ferme.
00:03:12 :Donc, ce bloc de contenu ici, on va pouvoir le modifier à l'intérieur de notre fichier index.html.Et pour ce faire, on va remettre tout simplement cette balise bloc ici avec le nomet on va mettre notre H1 à l'intérieur et la fermer comme ceci.
00:03:26 :Donc, c'est exactement la même chose que ce soit dans le fichier base.html.C'est bloc, le nom du bloc et ici, bloc, le nom du bloc et ensuite, on met ce qu'on veut mettre à l'intérieur.
00:03:37 :Donc, en fait, c'est vraiment comme si on prenait ce qui est à l'intérieur de ce blocet qu'on le mettait ici à la place de ce bloc dans le fichier qu'on étend.
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.