Catégories
Astuces et Design

Comment repenser et personnaliser l'administrateur Django avec Bootstrap – SitePoint

Le site d'administration de Django est génial – complet, facile à utiliser, sécurisé par sa conception, solide comme le roc… et quelque peu laid, ce qui peut être quelque chose d'un inconvénient lorsque vous souhaitez l'intégrer à l'apparence du reste de votre site Web . Voyons ça.

Si ce n'est pas cassé…

L'administrateur Django par défaut
L'administrateur Django par défaut. (La source)

Supposons que vous venez de prototyper une application Web avec Django et Vue.js. Pour un large éventail de cas, l'utilisation de l'administration de Django à des fins de back-office telles quelles, et même la gestion de votre client après avoir correctement défini les autorisations, est très bien. Après tout, cela fonctionne parfaitement bien et il peut être fortement personnalisé avec les outils intégrés pour couvrir de nombreuses situations.

Encore une fois, pourquoi s'embêter?

Raisons de pirater l'apparence de l'administrateur

Cependant, il existe un certain nombre de raisons valables pour pousser l'intégration plus loin:

  • l'image de marque: il n'y a rien de mal à vouloir le nom et les couleurs de votre entreprise au lieu de "Django administration" (et pour mémoire, c'est conforme à la licence BSD de Django).
  • Intégration transparente entre le site principal et l'administrateur: vous souhaiterez peut-être pouvoir faire la transition entre les fonctionnalités de back-office lors de la navigation sur le site, et inversement, en ayant une barre de navigation commune.
  • Embellissant: même si l'administrateur semble correct et qu'il a même mis en œuvre des principes de conception de sites Web réactifs depuis la v2 (il fonctionne bien à la fois sur mobile et sur ordinateur), beaucoup une feuille de style bien conçue peut le rendre plus beau.
  • Fonction de contournement: vous pouvez également créer des menus déroulants personnalisés pour l'administrateur, afficher les options que vous utilisez réellement et masquer dans l'interface utilisateur ce dont vous n'avez pas vraiment besoin, ce qui pourrait améliorer l'expérience utilisateur.

Un exemple pratique

Pour cet exemple, et pour ne pas nous répéter, nous allons reprendre la simple application Web de publication que nous avons lancée pour l'article Prototypage d'une application Web avec Django et Vue.js.

En un mot:

  • une application Django avec deux modèles:
  • Article avec champs name author (lié), content et slug
  • Author: avec champs name et slug
  • Une seule vue appelée frontend qui interroge tous les registres des deux modèles.
  • Un modèle unique appelé template.
  • Implémentation de Vue.js avec Vue Router et Vuex pour une interface évolutive réactive.

Nous ne nous soucierons pas particulièrement de l'intégration de Vue.js dans cet épisode, et nous ne la modifierons pas ici.

Le modèle de base

La source

Les modèles Django sont très polyvalents et puissants, et peuvent être créés au niveau de l'application (un composant du site Django) ou au niveau du site, et peuvent même remplacer les modèles fournis avec Django (ce que nous ferons ici ).

Logo Bootstrap
La source

Nous avons créé un modèle de base qui relie le code JavaScript et la feuille de style de Bootstrap, ainsi que ses outils compagnons, jQuery et Popper.

Voici le modèle de base que nous utilisons pour le site principal, pas du tout différent de ce que nous utiliserions normalement pour tout autre site Django:



  
    
    
    

    
    

    Django et Vue.js
  
  
    

Prototypage d'une application Web avec Django et Vue.js

Ensuite, nous allons l'intégrer dans l'admin et ajouter une barre de navigation partagée aux deux extrémités – le site principal et le back-office!

Intégration du modèle d'interface utilisateur principal avec l'administrateur

Comme mentionné, nous pouvons remplacer les modèles, y compris ceux de l'administrateur. Cependant, en raison de la conception de Django, et sans surprise, le site principal et le back-office sont deux systèmes différents, chacun avec ses propres modèles, feuilles de style et contrib paquets. Donc, même s'ils le seront presque identique, nous devons conserver deux modèles différents: un pour l'interface utilisateur principale et un pour l'administrateur.

Activation d'un répertoire pour les modèles en général

Tout d'abord, nous devons dire à Django où nous allons stocker le modèle d'administration piraté dans le répertoire de base.

Nous devons donc modifier myproject/settings.py. premièrement, trouvez le TEMPLATES constant et cela DIRS clé:

'DIRS': (),

Changez ce code en ceci:

'DIRS': (os.path.join(BASE_DIR, 'templates')),

Enveloppement du modèle d'administration (admin/base Pirater)

Si nous voulions juste faire des changements cosmétiques, comme passer une feuille de style personnalisée à l'administrateur, ou supprimer / remplacer son en-tête, nous pourrions nous en sortir en modifiant simplement le admin/base_site modèle et sauter cette étape en cours. Cependant, si nous voulons aller jusqu'au bout et «envelopper» la section d'administration comme si elle était contenue dans notre site principal, avec la possibilité d'avoir un en-tête et un pied de page communs, alors continuez à lire.

Nous devrons copier Django admin/base.html à notre répertoire de modèles dans templates/admin/base.html, afin que nous puissions placer nos emballages.

Nous allons modifier le code autour du container section, de sorte que cela passe de ceci:


(...)

pour ça:

{% block bodyheader %}{% endblock %}


(...)
{% block bodyfooter %}{% endblock %}

Et c'est tout! Nous avons simplement créé bodyheader et bodyfooter bloquer les balises, afin que nous puissions injecter le code qui encapsulera l'administrateur à l'étape suivante.

Codage d'un modèle d'administration personnalisé (admin/base_site Pirater)

Ensuite, nous coderons le modèle réel dans templates/admin/base_site.html (nous devrons créer les répertoires à la racine de notre projet):

{% étend "admin / base_site.html"%}

{% block title%} Django avec Bootstrap | Site d'administration {% endblock%}

{% block branding%} {% endblock%}
{% block breadcrumbs%} {% endblock%}

{% block bodyclass%} bg-light {% endblock%}

{% block extrastyle%}
    
    
{% endblock%}

{% block bodyheader%}
    

Piratage de l'administrateur Django avec Bootstrap

le Site d'administration de Django est génial - complet, facile à utiliser, sécurisé par sa conception, solide comme le roc ... et quelque peu laid, ce qui peut être quelque chose d'un inconvénient lorsque vous souhaitez l'intégrer à l'apparence du reste du site Web. Voyons ça.

{% endblock%} {% block bodyfooter%}
{% endblock%}

Panne

Essayons d'expliquer ce que nous faisons ici:

  1. Nous disons au moteur de modèle que nous «étendons» admin/base_site.html modèle, pour remplacer efficacement certaines de ses définitions.
  2. Nous utilisons le title bloc pour personnaliser un titre pour la page d'administration parcourue.
  3. Nous vidons le contenu de branding et breadcrumbs blocs, car nous n'en avons pas vraiment besoin.
  4. Nous utilisons le bodyclass bloc pour définir Bootstrap bg-light, comme nous l'avons fait dans le frontend modèle.
  5. Nous utilisons le extrastyle bloc pour incorporer Bootstrap, et du code CSS.
    une. D'accord, #header, .breadcrumbs { display: none; } est quelque chose d'une reformulation du numéro 3; mais il est utile de savoir que vous pouvez désactiver les sections de branding et de fil d'Ariane dans les deux sens.
    b. Il peut y avoir des problèmes lors du chevauchement de Bootstrap avec le CSS de Django dans l'admin, donc ce sont quelques correctifs.
  6. Utilisez le bodyheader et bodyfooter blocs pour envelopper le contenu administrateur.

Maintenant que nous avons accès au modèle d'administration, nous pourrions approfondir sa feuille de style, ou simplement le laisser avec un style partagé avec l'interface utilisateur principale.

Avertissements

Nous conservons deux modèles différents (interface utilisateur principale et administrateur) pour faire essentiellement la même présentation. Certes, ce n'est pas idéal, car nous brisons explicitement l'une des maximes du développement logiciel: ne vous répétez pas (DRY).

Comme nous l'avons commenté, cela est dû au fait que l'administrateur Django a été conçu pour être détaché de l'interface utilisateur principale. Et il n'y a rien de mal à cela, tout comme il n'y a rien de mal à sortir des sentiers battus. Mais oui, cela nous oblige à utiliser deux modèles avec presque le même contenu.

Réellement, en principe, nous pourrions concevoir un modèle de modèle comprenant cette barre de navigation et d'autres éléments communs de l'interface utilisateur principale et de l'administrateur, et les réutiliser à partir de cette source unique; mais à ce stade, et aux fins de cet article, cette approche serait un peu exagérée. Quoi qu'il en soit, je vais laisser l'idée plantée pour vous. 😉

Création d'une barre de navigation partagée

Maintenant que l'interface utilisateur principale et le site d'administration se ressemblent, nous pouvons aller plus loin dans notre intégration et créer une expérience de navigation commune… et même plus loin, présenter quelques options d'administration directement dans le menu principal!

Voici l'extrait de la barre de navigation:


Remarquez le dropdown-menu , qui se chargera de présenter un menu d'administration (voir le composant Navbar de Bootstrap pour plus d'informations).

Nous effectuons également une vérification conditionnelle avec {% if user.is_authenticated %} /{% endif %}, pour décider d'afficher ou non le menu d'administration.

Enfin, n'oubliez pas que, étant donné que nous gérons maintenant deux modèles principaux différents, nous devons ajouter le code HTML de la barre de navigation aux deux, myapp/templates/myapp/tempalte.html et templates/admin/base_site.html.

Le site d'administration a été pris en charge, mais il y a encore une fin lâche: l'écran de connexion.

Maintenant, nous pouvons transformer quelque chose comme ceci:

Connexion administrateur
La source

… En quelque chose comme ça:

Nouvelle disposition de connexion "width =" 391 "height =" 433 "class =" aligncenter size-full wp-image-176072

Nous pouvons accomplir quelque chose de plus proche de cela en créant le modèle suivant dans templtes/admin/login.html:

{% extends "admin/login.html" %}

{% load i18n static %}

{% block extrastyle %}
{{ block.super }}

{% endblock %}

{% block branding %}

ActionPlanNow.com
{% block head_title %}{% endblock %}

{% endblock %} {% block content_title %}

A Simple Tool for Leaders, Coaches, and Counselors.

{% endblock %}

Panne

Ce que nous faisons ici:

  1. le {{ block.super }} est là pour dire au moteur de modèle que nous ne remplaçons pas le contenu de extrastyle (que nous avons défini dans le templates/admin/base_site.html modèle) mais que nous y ajoutons simplement du contenu (voir l'héritage du modèle pour plus d'informations).
  2. le branding Le bloc nous permet de changer l'en-tête «Administration Django» en quelque chose de plus intéressant.
  3. Nous nous débarrassons de la head_title bloquer en définissant une définition vide.
  4. Nous utilisons le content_title bloquer pour ajouter des informations supplémentaires.

Quelques considérations

logo jquery
La source

Tout comme Bootstrap, le site d'administration de Django expédie également son propre ensemble de jQuery, mais heureusement, les développeurs de Django ont réfléchi à cela et pour éviter les conflits avec les scripts et les bibliothèques fournis par l'utilisateur, jQuery de Django est espacé comme django.jQuery. Nous pouvons donc inclure votre propre copie (comme nous l'avons fait) en toute sécurité.

Soyez prudent lorsque vous devenez fou avec les définitions de classe dans votre feuille de style principale, car cela affectera également le site d'administration, affectant sa fonctionnalité de manière inattendue. Dans ce cas, vous pouvez toujours voir ce qui se passe avec les outils de débogage de votre navigateur, tels que Chrome DevTools, Firefox Developer Tools (en particulier Page Inspector) ou Safari Developer Tools.

Démo et code complet

Cette implémentation dont nous avons discuté ici ressemblera à ceci:

Vous pouvez parcourir tout le code du projet dans mon référentiel GitHub, luzdealba / djangovuejs.

Emballer

Alors que certains pourraient affirmer – tout à fait raisonnablement – qu’il n’est pas vraiment nécessaire de modifier l’apparence d’administrateur de Django, il est également vrai que intégrer en douceur les différents points de terminaison d'un site est un bon hack pour une meilleure UX, car il peut fournir une transition transparente entre les deux, et même une navigation plus contrôlée de l'administrateur.

Et ce n'est pas si difficile. Ce que vous devez faire attention, c'est comment vous envelopper l'administrateur, et aussi comment vous mélangez les bibliothèques tierces avec votre propre code JavaScript et vos propres feuilles de style. Heureusement, vous pouvez très facilement en intégrer certains dans l'administration, certains dans le reste du site principal et d'autres dans les deux.

J'espère que vous avez des idées sur la façon de personnaliser davantage Django d'une manière qui n'était pas si évidente!

Si vous avez besoin d'une excuse pour créer une application Web afin de pouvoir jouer avec l'administrateur Django, consultez le didacticiel de la semaine dernière sur le prototypage d'une application Web avec Django et Vue.js – c'est une tonne de plaisir. Et si vous voulez approfondir vos compétences Django, la bibliothèque SitePoint Premium a des tas de ressources pour vous.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *