- 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 personlive_helpToutes les questions
De716
4 décembre 2023 - 04 décembre 2023 à 22:36
checkConversation résolue
5 réponses
css ne fonctionne pas
Salut Thibault, j'ai un soucis avec le css (je crois que c'était déjà le cas de plusieurs personnes sur udemy): - pas de prise en compte du css (message d'erreur …
00:00:00 :Généralement, quand on développe un site web, on va intégrer en plus du HTML d'autres langages comme le CSS ou le JavaScript.Ces langages sont généralement intégrés dans d'autres fichiers qu'on va pouvoir intégrer dans notre fichier HTML.
00:00:15 :Ces fichiers, on les appelle généralement des fichiers statiques.Dans cette partie, on va voir comment créer une feuille de style, donc un fichier CSS,et comment l'utiliser pour modifier le style de notre page index.html dans notre application.
00:00:29 :Donc les fichiers statiques, on pourrait faire une formation complète juste sur le sujet.Ça peut devenir assez vite complexe.Moi, je vais vraiment juste vous montrer la base et les choses les plus importantes à savoir.
00:00:39 :Par défaut, les fichiers statiques, c'est un peu comme les templates.Vous allez avoir certains endroits dans votre structure de dossier ici,dans lesquels Django va chercher automatiquement pour chercher des fichiers statiques.
00:00:50 :Par exemple, dans mon application blog ici, si je fais un dossier statique,tout ce qui se trouve à l'intérieur sera automatiquement répertorié par Django.Par contre, si dans DocBlog, je fais ce même dossier statique, là, ce ne sera pas le cas.
00:01:05 :Donc là, on a exactement le même cas de figure que ce qu'on avait avec les templates.Dès qu'on est à l'intérieur d'une application, il y a beaucoup de chemins de dossiersqui sont automatiquement reconnus, mais dès qu'on sort de ces applicationset qu'on revient par exemple au niveau de notre projet dans DocBlog
00:01:18 :ou même n'importe où ailleurs dans un autre dossier du projet qui n'est pas une application,et bien là, il va falloir modifier quelque chose.Alors, je vais déjà vous montrer dans blog ce que ça donne.
00:01:28 :Je vais faire un clic droit sur blog et ici, je vais cliquer sur directorypour créer un dossier qui s'appelle donc statique.Alors là encore, très important de bien le nommer de cette façonpour que ce soit reconnu automatiquement par Django.
00:01:40 :À l'intérieur de ça, je vais créer un sous-dossier que je vais appeler CSSet à l'intérieur de ce sous-dossier, je vais créer cette fois-ci un fichierque je vais appeler style.css.
00:01:49 :Je vais créer une feuille de style très basique.On va juste sur le body appliquer un background color qui va être blacket un color qui va être white.
00:01:59 :Donc, on va tout simplement inverser les couleurs.Et donc, cette feuille de style, on peut y avoir accès directementdepuis notre fichier HTML en utilisant une balise link.
00:02:09 :Donc là, je tape tout simplement link, j'appuie sur tabulationpour compléter automatiquement le reste.Donc là, on indique que la relation avec ce fichier,c'est une relation de type feuille de style, donc style sheet ici.
00:02:20 :Et dans href, on va indiquer le chemin vers cette feuille de style.Alors là, on va voir quelque chose que l'on n'a pas encore vuqui nous permet d'utiliser le langage de gabarit de Django.
00:02:30 :Et donc en fait, ce langage nous permet d'utiliser des baliseset ces balises vont nous permettre de générer différentes choses.Dans ce cas-ci, on va générer le chemin vers les ressources statiques.
00:02:39 :Donc ces balises, elles vont être définies par des accolades,un symbole pourcentage et de l'autre côté, un autre symbole pourcentageet une accolade qui ferme.
00:02:47 :A l'intérieur de ça, on va utiliser le mot statiquequi va nous permettre de récupérer automatiquementle chemin complet vers des ressources statiques.Donc dans ce cas-ci, le chemin complet, il va démarrer à partir du dossier statique.
00:02:59 :Donc nous, ce qu'on a besoin de mettre ici, c'est uniquement css-style.css.Donc on va l'indiquer entre guillemets.Là, je mets des guillemets simples, vous voyez,parce que j'ai déjà des guillemets doubles qui ouvrent le lienqui est associé à href ici.
00:03:12 :Donc j'ai des guillemets doubles qui ouvrent et qui fermentet donc pour ne pas avoir de problème,je mets des guillemets simples ici pour spécifier le chemin vers ma feuille de style.
00:03:19 :Donc le chemin, c'est css-style.csset grâce à cette balise statique ici,le chemin complet vers cette ressource va être dynamiquement généré.Donc c'est pratique puisque comme ça, je n'aurai pas besoinde mettre un chemin hardcoded ici.
00:03:33 :Et là encore, peu importe où mon dossier se trouverasur un ordinateur ou un autre serveur dans d'autres dossiers,ce chemin sera correctement résolu par Django.
00:03:42 :La dernière chose qu'il faut ajouter iciet qu'on va ajouter tout au début de notre fichier,c'est une balise qui nous permet d'utiliser ce mot statique ici.
00:03:49 :Donc cette balise, elle va encore être définiepar des accolades et des symboles pourcentageset on va indiquer ici tout simplement load static.Donc pour pouvoir utiliser static ici,il faut mettre load static au début.
00:04:00 :Si je reviens sur mon site et que j'actualise,actuellement, vous voyez que rien ne se passe.Alors ça, c'est parce que, en fait,quand on crée des fichiers comme ça, des fichiers statiqueset qu'on veut les mettre dans notre site,il va falloir arrêter le serveuret le relancer pour que ces changements soient pris en compte.
00:04:15 :Donc je reviens sur mon site.Une fois que le serveur a été relancé, j'actualiseet là, ma feuille de style est correctement prise en compte.
00:04:21 :J'ai bien le fond qui est noir et le texte qui est blanc.Donc ça, c'est en mettant le fichier CSSdirectement dans une application,donc dans ce cas-ci, dans blog.
00:04:31 :On va avoir le même problème avec des conflits potentielssur les noms des fichierssi vous avez plusieurs sources statiquesdans différentes applications et que les noms des fichiers sont similaires.
00:04:40 :Donc là encore, il faut faire bien attention.Si on a plusieurs fichiers style.css dans des dossiers styledans différentes applications,il faudra là encore les séparer, soit en modifiant le nom du fichierou alors en les mettant dans des dossiers différents,dans des sous-dossiers différents,pour qu'on puisse ici référencer des noms qui soient différents
00:04:57 :et ne pas avoir de conflits, par exemple,entre différents fichiers style.cssqui seraient contenus dans différentes applications.Avant de terminer cette vidéo,je veux juste vous montrer comment on peut utiliserdes ressources statiques qui se trouventen dehors des applications.
00:05:11 :Parce que là, en fait, on est sur la page index.htmlqui est dans DocBlog et pourtant,on utilise une ressource statique qui est dans l'application Blog.
00:05:18 :Donc nous, ça ne fait pas beaucoup de sens dans ce cas-ciet on préférerait déplacer ce dossierqui contient ce fichier statique directement dans DocBlog.
00:05:25 :Donc je vais le prendre, je le glisse ici dans DocBlog,je valide en cliquant sur Refactoret on a bien ici le dossier statiquequi a été déplacé.
00:05:34 :Sauf que là, si je stoppe le serveur, que je le relanceet que je reviens sur ma page,vous voyez que le style a disparu.
00:05:40 :Donc ça, c'est ce que je vous expliquais au début,le fait que Django va chercherles fichiers statiques uniquement dans les applications.Donc là, la seule application qu'on a actuellement,c'est Blog. Donc ce qu'on va faire,
00:05:50 :c'est qu'on va spécifier dans les settingsd'autres chemins dans lesquels Django va devoirchercher pour des fichiers statiques.Donc là encore, c'est assez similaire à ce qu'on avait faitavec les templates.
00:06:00 :On va aller dans le fichier settings.pyet tout en bas ici, on va utiliserstatic files-diret ça, c'est une liste qui va contenirdes dossiers. Donc on va faire la même
00:06:10 :astuce que pour les templates. On va utiliseros.pat.joinOn va joindre base-dir avecle chemin du dossier à partirdu chemin de sourcepuisque base-dir, c'est le dossiersource ici. Donc à partir
00:06:24 :de source, on va concatener avecdoc-blog-static.Donc ici, dans ma chaîne de caractère, je mets doc-blogstatic.Et du coup, notre chemin va êtrerésolu à partir de static et onpeut laisser dans notre fichier html uniquementcss-style.css.
00:06:40 :Donc en ajoutant cettevariable ici, donc static files-diret ici, on peut mettreautant de fichiers qu'on veut, et bienDjango va aller chercher dans ses dossierspour des fichiers statiques en plusdes dossiers statiques qui sont contenus à l'intérieurdes applications comme notre application blogici. Donc je vais redémarrer le serveur
00:06:58 :je l'arrête avec ctrl-cet je le repars avecmanage.py run serverje reviens sur mon site, j'actualiseet ça ne fonctionne pas parce que j'ai oubliéun s ici. Donc petite erreur
00:07:10 :il faut bien faire attention au nom des variablesici, ça me permet de le soulignerdonc static filestout attaché avec un s à files et dirici puisque comme je vous l'ai dit, on peut avoirplusieurs dossiers qui sont contenus danscette liste. Donc static files-dir
00:07:24 :je vais relancer le serveur juste pour m'assurerque tout est bien à jour, je revienssur mon site, j'actualise et làon a bien la feuille de style qui est appliquéeDonc voilà comment appliquerdes fichiers statiques, dans ce cas-ci une feuillede style, comment les mettreà l'intérieur d'une application ou en dehors
00:07:40 :d'une application en spécifiantces dossiers à l'intérieur de cette variablestatic files-dir et ensuiteà l'intérieur de nos fichiers, on peututiliser ces fichiers statiques grâceaux balises statiques qui sontdéfinies par les accolades et les pourcentageset la dernière chose à ne pas oublier, c'est de mettreici l'odd static, c'est généralement
00:07:58 :l'erreur la plus courante que je voissi vous n'avez pas cette balise ici que vousrevenez sur votre site, là vous voyezque vous avez une erreur, donc template syntaxerror et ça nous dit iciqu'on a un bloc invalideavec le bloc statique et il nousindique également, donc ça c'est assez sympa
00:08:14 :de la part de Django, il nous demande si par hasardon n'aurait pas oublié de chargerce tag static, donc si vous avez cetteerreur c'est vraiment parce que vous avez oubliéde mettre l'odd static ici tout en hautde votre fichier. Donc voilà pour
00:08:26 :la gestion des fichiers statiques avecDjango. Encore une fois c'est une toutepetite partie des fichiers statiques, il y apas mal d'autres choses à prendre en compte mais ça c'estvraiment au moins la base qui va vous permettred'ajouter d'autres types de fichierslà on l'a fait avec un fichier CSS
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.