Les bases de Django

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 dossiers qui sont automatiquement reconnus, mais dès qu'on sort de ces applications et 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 directory pour créer un dossier qui s'appelle donc statique.Alors là encore, très important de bien le nommer de cette façon pour 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 CSS et à l'intérieur de ce sous-dossier, je vais créer cette fois-ci un fichier que 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 black et 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 directement depuis notre fichier HTML en utilisant une balise link.
00:02:09 :Donc là, je tape tout simplement link, j'appuie sur tabulation pour 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 vu qui nous permet d'utiliser le langage de gabarit de Django.
00:02:30 :Et donc en fait, ce langage nous permet d'utiliser des balises et 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 pourcentage et une accolade qui ferme.
00:02:47 :A l'intérieur de ça, on va utiliser le mot statique qui va nous permettre de récupérer automatiquement le 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 lien qui est associé à href ici.
00:03:12 :Donc j'ai des guillemets doubles qui ouvrent et qui ferment et 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.css et 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 besoin de mettre un chemin hardcoded ici.
00:03:33 :Et là encore, peu importe où mon dossier se trouvera sur 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 ici et 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éfinie par des accolades et des symboles pourcentages et 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 statiques et qu'on veut les mettre dans notre site,il va falloir arrêter le serveur et 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'actualise et 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 CSS directement dans une application,donc dans ce cas-ci, dans blog.
00:04:31 :On va avoir le même problème avec des conflits potentiels sur les noms des fichiers si vous avez plusieurs sources statiques dans 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 style dans différentes applications,il faudra là encore les séparer, soit en modifiant le nom du fichier ou 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.css qui seraient contenus dans différentes applications.Avant de terminer cette vidéo,je veux juste vous montrer comment on peut utiliser des ressources statiques qui se trouvent en dehors des applications.
00:05:11 :Parce que là, en fait, on est sur la page index.html qui 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-ci et on préférerait déplacer ce dossier qui 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 Refactor et on a bien ici le dossier statique qui a été déplacé.
00:05:34 :Sauf que là, si je stoppe le serveur, que je le relance et 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 chercher les 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 settings d'autres chemins dans lesquels Django va devoir chercher pour des fichiers statiques.Donc là encore, c'est assez similaire à ce qu'on avait fait avec les templates.
00:06:00 :On va aller dans le fichier settings.py et tout en bas ici, on va utiliser static files-dir et ça, c'est une liste qui va contenir des dossiers. Donc on va faire la même
00:06:10 :astuce que pour les templates. On va utiliser os.pat.join On va joindre base-dir avec le chemin du dossier à partir du chemin de source puisque base-dir, c'est le dossier source ici. Donc à partir
00:06:24 :de source, on va concatener avec doc-blog-static.Donc ici, dans ma chaîne de caractère, je mets doc-blog static.Et du coup, notre chemin va être résolu à partir de static et on peut laisser dans notre fichier html uniquement css-style.css.
00:06:40 :Donc en ajoutant cette variable ici, donc static files-dir et ici, on peut mettre autant de fichiers qu'on veut, et bien Django va aller chercher dans ses dossiers pour des fichiers statiques en plus des dossiers statiques qui sont contenus à l'intérieur des applications comme notre application blog ici. Donc je vais redémarrer le serveur
00:06:58 :je l'arrête avec ctrl-c et je le repars avec manage.py run server je reviens sur mon site, j'actualise et ç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 variables ici, ça me permet de le souligner donc static files tout attaché avec un s à files et dir ici puisque comme je vous l'ai dit, on peut avoir plusieurs dossiers qui sont contenus dans cette liste. Donc static files-dir
00:07:24 :je vais relancer le serveur juste pour m'assurer que tout est bien à jour, je reviens sur mon site, j'actualise et là on a bien la feuille de style qui est appliquée Donc voilà comment appliquer des fichiers statiques, dans ce cas-ci une feuille de style, comment les mettre à l'intérieur d'une application ou en dehors
00:07:40 :d'une application en spécifiant ces dossiers à l'intérieur de cette variable static files-dir et ensuite à l'intérieur de nos fichiers, on peut utiliser ces fichiers statiques grâce aux balises statiques qui sont définies par les accolades et les pourcentages et la dernière chose à ne pas oublier, c'est de mettre ici l'odd static, c'est généralement
00:07:58 :l'erreur la plus courante que je vois si vous n'avez pas cette balise ici que vous revenez sur votre site, là vous voyez que vous avez une erreur, donc template syntax error et ça nous dit ici qu'on a un bloc invalide avec le bloc statique et il nous indique également, donc ça c'est assez sympa
00:08:14 :de la part de Django, il nous demande si par hasard on n'aurait pas oublié de charger ce tag static, donc si vous avez cette erreur c'est vraiment parce que vous avez oublié de mettre l'odd static ici tout en haut de votre fichier. Donc voilà pour
00:08:26 :la gestion des fichiers statiques avec Django. Encore une fois c'est une toute petite partie des fichiers statiques, il y a pas mal d'autres choses à prendre en compte mais ça c'est vraiment au moins la base qui va vous permettre d'ajouter d'autres types de fichiers là on l'a fait avec un fichier CSS

Ajouter un fichier CSS

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Sylvain FOWO

Lier des fichiers CSS à des fichiers HTML

De716

css ne fonctionne pas

Rechercher sur le site