L'administration de Django

00:00:00 :Ce qui est vraiment génial avec Django, c'est qu'on peut vraiment tout personnaliser.On va même pouvoir personnaliser les feuilles de style et les pages de l'administration.
00:00:09 :Pour l'instant, on a juste marqué administration de Django en haut à gauche.On a ce style avec du bleu et du blanc.Sachez qu'il est tout à fait possible de, par exemple, changer les couleurs,pour avoir quelque chose de plus sombre ou avec des couleurs qui sont adaptées à celles de votre entreprise,
00:00:23 :et également de changer même les textes comme l'administration de Django ici.Pour ça, on va se rendre dans notre projet et on va créer un fichier de template qui va venir étendre ou modifier le comportement du fichier par défaut.
00:00:37 :Le fichier de template, il faut le mettre dans un endroit qui va être reconnu par votre projet Django.Soit vous pouvez le mettre directement dans le dossier template d'une application.
00:00:47 :Par exemple, dans l'application de blog ici, on a un dossier template.On pourrait le mettre ici, puisqu'automatiquement, les dossiers template des applications sont reconnus par Django.
00:00:55 :Ça, c'est si, dans settings ici, vous avez appdirs qui est à true, donc dans cette variable template.Sinon, vous pouvez mettre des dossiers ailleurs, mais il va falloir les renseigner dans cette variable dirs ici,donc en fait la clé du dictionnaire de cette variable template.
00:01:10 :Donc moi, je vais mettre ça directement dans le dossier website ici.Je vais faire un clic droit et je vais créer un nouveau dossier qui va s'appeler template.
00:01:17 :Et à l'intérieur de ce nouveau dossier, je vais faire un autre dossier qui va s'appeler admin.Et je vais créer un fichier html à l'intérieur de ce dossier admin.
00:01:26 :Donc je fais un clic droit, new, et on va l'appeler base-site.Et automatiquement, PyCharm va ajouter l'extension html.Donc il est bien important de nommer ce fichier comme ceci, donc base-site,pour que Django reconnaisse ce fichier comme un fichier qui va nous permettre de modifier l'interface d'administration.
00:01:47 :On va aller en fait modifier les templates de base qui sont à l'intérieur de l'administration de Django.Ces fichiers, vous pouvez les retrouver si vous allez dans votre environnement virtuel.
00:01:55 :Donc là, je vais dérouler un petit peu les librairies.Donc là, on a les librairies externes.Donc avec Python 3.9 qui correspond à mon environnement virtuel pour ce projet.
00:02:04 :Et si je descends un peu ici, je vais aller dans site packages qui contient tous les packages qui ont été installés pour mon environnement virtuel.
00:02:11 :Et dans Django, on va retrouver ici tous les fichiers de Django.Si vous allez dans contrib, admin, templates, vous allez retrouver tous les templates de l'admin de Django.
00:02:20 :Donc si je vais dans admin ici, on voit tout ce qu'on a.On voit le base-site.html.Donc c'est ce fichier ici que l'on va modifier.
00:02:28 :Vous remarquez ici qu'on a un bloc qui s'appelle branding avec ici le nom de mon site.Donc avec ici le Django administration que l'on retrouvait dans l'interface d'administration et qui est traduit automatiquement dans la langue qu'on a mis en fait dans les settings.
00:02:43 :Et tout ça c'est fait automatiquement et il ne faut pas aller modifier directement ce fichier.Puisque si vous modifiez ce fichier en fait, si par exemple vous installez une autre version de Django ou que vous le mettez à jour, ce fichier sera écrasé.
00:02:54 :Donc nous ce qu'on va faire c'est juste rajouter des informations ou modifier des informations comme par exemple modifier ici le bloc branding.Donc voilà, ça c'était juste pour vous montrer que ces fichiers sont disponibles ici.
00:03:04 :Si vous souhaitez aller les visionner, aller voir à quoi ça ressemble, ça peut être assez instructif.Nous on va revenir donc dans notre projet, on va revenir ici, je vais tout replier.
00:03:13 :Et donc on a bien notre fichier base-side, donc bien important de le nommer comme ceci et de le mettre à l'intérieur d'un dossier template et d'un sous-dossier admin.
00:03:22 :Pour l'instant ce dossier, il n'est pas reconnu comme un dossier de template.Il va falloir l'ajouter dans les settings puisqu'il n'est pas à l'intérieur d'une application.
00:03:29 :Ici je suis dans le dossier de mon application principale avec le fichier settings.py.Donc dans ce fichier settings.py ici, dans la clé dire du dictionnaire template,
00:03:39 :on va rajouter une ligne, donc cette ligne ici qui va nous permettre de joindre avec le module OS le dossier base-dir qui est défini tout en haut de mon fichier de settings.
00:03:47 :Donc si je reviens ici, voilà on a le dossier base-dir.N'oubliez pas d'importer le module OS puisque par défaut il n'est pas importé.Et on va pouvoir donc joindre le dossier de base qui est le dossier source avec le dossier website-templates.
00:03:59 :Donc ce dossier ici et ensuite on aura donc accès à tous les templates qui sont à l'intérieur.Donc dans ce fichier ici, je vais enlever tout ce que j'ai à l'intérieur du fichier puisqu'on va étendre le fichier de base.
00:04:10 :Et pour ça je vais utiliser le langage de gabarit de Django.Donc on va mettre une accolade, un pourcentage et on va dire qu'on veut étendre le fichier admin-base.html.
00:04:20 :Et je ferme mon template tag ici avec le pourcentage et l'accolade.Ensuite on n'oublie pas de mettre le load static, donc ça c'est pour loader les fichiers statiques.
00:04:30 :Et on va pouvoir ensuite modifier le bloc branding que je vous avais montré précédemment.Donc pour ça on va ouvrir le bloc avec là encore une accolade, un pourcentage.
00:04:38 :On met bloc branding, donc là bien attention à mettre ce nom ici.Il faut obligatoirement que ce bloc s'appelle branding pour pouvoir le modifier.Et ici on va pouvoir mettre quelque chose, par exemple un h1, on va dire mon super blog.
00:04:50 :Et je vais refermer mon blog donc en refaisant un pourcentage et on va dire end blog tout simplement pour fermer le bloc.Donc juste en refaisant ça vous voyez qu'en fait on va pouvoir étendre le template de base et modifier le bloc pour remplacer ce qui est contenu à l'intérieur de ce bloc par dans ce cas-ci un h1.
00:05:08 :Donc je vais relancer mon serveur juste pour m'assurer que tous les changements sont bien pris en compte.Et on va retourner sur notre site pour voir ce qui a changé, donc j'actualise.
00:05:16 :Et là vous voyez qu'on a bien changé le titre, donc maintenant on a mon super blog au lieu de l'administration de Django.Et on va pouvoir également donc modifier le style de cette interface.
00:05:26 :Pour ça on va revenir dans notre fichier et on va modifier un autre bloc qui est un bloc qui s'appelle extra style qui va nous permettre d'ajouter du style et de modifier ou de rajouter des règles de CSS dans notre interface.
00:05:39 :Donc je ferme mon bloc ici et à l'intérieur de ça je vais mettre tout simplement un tag style qui va me permettre d'écrire du CSS et de modifier donc l'interface d'administration.
00:05:48 :Donc je vais tout simplement copier ici cette feuille de style que j'avais préparée qui me permet de changer certains éléments.Alors si vous voulez savoir comment vous pouvez changer ces éléments, il vous suffit dans Chrome de faire une inspection.
00:05:59 :Donc avec un clic droit vous allez dans inspect et vous allez pouvoir inspecter le HTML et les différents éléments du site.Donc si on veut par exemple modifier le h1 ici, vous cliquez et vous voyez que le h1 est contenu à l'intérieur d'un div qui a un ID de branding.
00:06:13 :Donc on peut cibler ce ID branding et modifier le h1 à l'intérieur et on peut faire ça avec tout ce qui est à l'intérieur de mon HTML.
00:06:20 :Donc là si on revient dans mon fichier, on voit que je modifie le header, je change la couleur de background.Donc le header en fait c'est tout simplement la barre tout en haut où il y a marqué mon super blog et bienvenue Thibage voir le site etc.
00:06:32 :On a ensuite donc le branding qui est modifié, je change quelques petits paramètres comme le font size,je mets le text transform en capitalize, je mets en gras et je change également la couleur.
00:06:42 :Je change également la couleur de l'arrière-plan pour qu'on ait quelque chose d'un peu plus sombre qui fasse moins mal aux yeux et je change également le h1 du contenu pour qu'on voit quelque chose puisque vu que le background ici est assez sombre,si je ne modifie pas la couleur on n'arrivera plus à lire en fait ce h1.
00:06:57 :Donc voilà pour les petites modifications, là bien sûr vous pouvez faire à votre guise pour modifier l'interface et qu'elle corresponde à la charte graphique de vos sites web.
00:07:04 :Donc là si j'actualise, vous voyez que tout a pas mal changé, on a donc le titre ici avec le capitalize, avec le titre en gras un peu plus gros,avec le changement de couleur, on a encore du blanc ici donc là on pourra aller modifier les couleurs de tous les éléments pour que ce soit un vrai dark mode
00:07:19 :et pas un semi dark mode comme on a actuellement.Et si je vais voir sur d'autres pages, vous voyez qu'on garde cette mise en forme avec là encore certains éléments qui ne sont pas mis en forme puisqu'on ne les a pas spécifiés mais si je voulais modifier par exemple la table ici, je pourrais aller regarder dans le html ici qu'est-ce qui caractérise ce tableau
00:07:35 :en regardant par exemple le id, donc là on a content, content main, donc il y a différentes choses qu'on peut changer ici,vous pouvez faire des tests bien entendu dans Chrome ou votre navigateur directement,donc si je change pour du rouge par exemple ici vous voyez ce que ça change et vous pouvez aller répercuter ces changements à l'intérieur de ce fichier
00:07:50 :pour qu'il soit permanent.Donc voilà pour la modification de l'interface d'administration, on est vraiment juste à la surface ici, je voulais juste vous montrer que c'était possible,vous montrer où étaient ces fichiers html si vous souhaitez aller un peu explorer ce que vous pouvez faire, ce que vous pouvez modifier
00:08:05 :et après on va pas trop rentrer dans les détails parce qu'on pourrait faire un cours complet sur la modification de l'interface,la personnalisation avec des feuilles de style, avec des fichiers template comme ceci mais je vous montre quand même la base,sachez qu'il est donc possible de modifier tout ce que vous avez à l'intérieur de l'interface, même les titres, même les couleurs,
00:08:21 :tout ça vous pouvez le modifier, donc je vous conseille de regarder un peu tout ça et de vous amuser pour voir tout ce qu'il est possible de faire en modifiant les fichiers html et les feuilles de style.

Personnaliser l'interface avec du CSS

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Gabriel Trouvé

extends dans base_site.html

Rechercher sur le site