Comment repenser et personnaliser l'administrateur Django avec bootstrap-Industrie informatique-php.cn

Comment repenser et personnaliser l'administrateur Django avec bootstrap

Le site d'administration de Django est super - entièrement-suivi, facile à utiliser, sécurisé par la conception, solide roc… et quelque peu laid, ce qui peut être quelque chose d'un inconvénient lorsque vous voulez l'intégrer avec l'aspect et la sensation du reste de votre site Web. Terons cela.

Les plats clés

Utilisez Bootstrap pour améliorer l'attrait visuel et l'expérience utilisateur de l'administrateur Django en intégrant les modèles de conception de bootstrap et les fonctionnalités réactives.
Les modèles d'administration par défaut de Django pour permettent une intégration transparente avec le site principal, en maintenant une marque et une navigation cohérentes.
Le processus de personnalisation consiste à modifier les paramètres dans `myproject / settings.py` et à créer de nouveaux fichiers de modèles dans le répertoire des modèles pour incorporer des styles et scripts bootstrap.
Les barres de navigation partagées et d'autres éléments courants peuvent être ajoutés aux modèles principaux du site et de l'administrateur, la promotion d'une interface utilisateur unifiée sur les plates-formes.
résoudre les problèmes potentiels avec le chevauchement des CSS en gérant soigneusement les définitions de classe et en utilisant des outils de débogage du navigateur pour garantir que les fonctionnalités ne sont pas compromises.

si ce n'est pas cassé…

Comment repenser et personnaliser l'administrateur Django avec bootstrap — L'administrateur Django par défaut. (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'administrateur de Django à des fins de back-office telles quelles, et même la manipuler à votre client après avoir établi des autorisations de manière appropriée, est très bien. Après tout, il fonctionne parfaitement bien et il peut être fortement personnalisé avec les outils intégrés pour couvrir de nombreuses situations.

Alors encore une fois, pourquoi s'embêter?

raisons de pirater l'apparence de l'administration

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

Branding: il n'y a rien de mal à vouloir le nom et les couleurs de votre entreprise au lieu de «l'administration Django» (et pour mémoire, c'est en conformité avec la licence BSD de Django).
Intégration transparente entre le site principal et l'administrateur: vous voudrez peut-être être en mesure de passer entre les fonctionnalités du back-office lors de la navigation sur le site, et vice versa, en ayant une barre de navigation commune.
Prétificateur: Bien que l'administrateur ait l'air bien et qu'il ait même mis en œuvre des principes de conception Web réactifs depuis la V2 (il fonctionne bien sur les deux, mobile et bureau), il y a beaucoup une feuille de style bien conçue peut faire pour le rendre plus beau.
Contournez les fonctionnalités: vous pouvez également simplement créer des menus déroulants personnalisés pour l'administrateur, affichant les options que vous utilisez réellement et vous cachez à partir de l'interface utilisateur dont vous n'avez pas vraiment besoin, ce qui pourrait faire une meilleure expérience utilisateur.

un exemple pratique

Pour cet exemple, et pour ne pas nous répéter, nous reprendrons l'application Web de publication simple que nous avons commencé pour le prototypage d'une application Web avec l'article Django et Vue.js.

en un mot:

Une application django avec deux modèles:
Article avec des champs Nom Auteur (lié), Contenu et Slug
Auteur: avec les champs nom et limace
Une seule vue appelée frontend qui interroge tous les registres dans les deux modèles.
un seul modèle appelé modèle.
Implémentation de Vue.js avec Vue Router et Vuex pour une interface évolutive réactive.

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

le modèle de base

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 qui viennent avec Django (c'est ce que nous ' ll faire ici).

Nous avons créé un modèle de base qui se lie à la feuille JavaScript et de style JavaScript de Bootstrap, ainsi que ses outils compagnon, 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:

<span><span><!doctype html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
</span>
    <span><!-- Bootstrap CSS -->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"</span> integrity<span>="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"</span> crossorigin<span>="anonymous"</span>></span>
</span>
    <span><span><span><title</span>></span>Django and Vue.js<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div</span> class<span>="bg-white container"</span>></span>
</span>      <span><span><span><h1</span>></span>Prototyping a Web App with Django and Vue.js<span><span></h1</span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></div</span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue-router"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.4.1.slim.min.js"</span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Copier après la connexion

Ensuite, nous intégrerons cela dans l'administrateur et ajouterons une barre de navigation partagée sur les 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, ses feuilles de style et ses packages contribus. Ainsi, même s'ils seront presque identiques, , nous devrons maintenir deux modèles différents - un pour l'interface utilisateur principale, et un pour l'administrateur.

Activer un répertoire pour les modèles en général

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

SE Nous devrons modifier myProject / settings.py. Tout d'abord, trouvez les modèles constants et cette clé de rédaction:

<span><span><!doctype html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
</span>
    <span><!-- Bootstrap CSS -->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"</span> integrity<span>="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"</span> crossorigin<span>="anonymous"</span>></span>
</span>
    <span><span><span><title</span>></span>Django and Vue.js<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div</span> class<span>="bg-white container"</span>></span>
</span>      <span><span><span><h1</span>></span>Prototyping a Web App with Django and Vue.js<span><span></h1</span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></div</span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue-router"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.4.1.slim.min.js"</span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Copier après la connexion

Changez ce code pour ceci:

<span>'DIRS': [],
</span>

Copier après la connexion

Emballage du modèle d'administration (Admin / Base Hack)

Si nous voulions simplement effectuer des changements cosmétiques, comme passer une feuille de style personnalisée à l'administrateur, ou en supprimant / remplaçant son en-tête, nous pourrions s'entendre en modifiant simplement le modèle admin / base_site et en sautant complètement cette étape actuelle. 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's 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 de la section des conteneurs, afin que cela en va:

<span>'DIRS': [os.path.join(BASE_DIR, 'templates')],
</span>

Copier après la connexion

à ceci:

<span><!-- Container -->
</span><span><span><span><div</span> id<span>="container"</span>></span>
</span>(...)
<span><span><span></div</span>></span>
</span><span><!-- END Container -->
</span>

Copier après la connexion

Et c'est tout! Nous avons simplement créé des étiquettes de bloc BodyHeader et Bodyfooter, afin que nous puissions injecter le code qui enveloppera l'administrateur à l'étape suivante.

codage d'un modèle d'administration personnalisé (admin / base_site hack)

Ensuite, nous coderons le modèle réel dans Templates / Admin / Base_Site.html (nous devrons créer les répertoires sur la racine de notre projet):

{% block bodyheader %}{% endblock %}

<span><!-- Container -->
</span><span><span><span><div</span> id<span>="container"</span>></span>
</span>(...)
<span><span><span></div</span>></span>
</span><span><!-- END Container -->
</span>
{% block bodyfooter %}{% endblock %}

Copier après la connexion

Breakdown

Essayons d'expliquer ce que nous faisons ici:

Nous disons au moteur de modèle que nous «étendons» le modèle admin / base_site.html, pour remplacer efficacement certaines de ses définitions.
Nous utilisons le bloc de titre pour personnaliser un titre pour la page d'administration en cours de navigation.
Nous vidons le contenu des blocs de marque et de chapelure, car nous n'en avons pas vraiment besoin.
Nous utilisons le bloc de classe corporelle pour régler la lumière BG de bootstrap, comme nous l'avons fait dans le modèle de frontend.
Nous utilisons le bloc Extrastyle pour intégrer le bootstrap et un code CSS. un. Ok, #Header, .BreadCrumbs {affichage: aucun; } est une sorte de repos du numéro 3; Mais il est utile de savoir que vous pouvez désactiver les sections de marque et de chapelure dans les deux sens. né Il peut y avoir des problèmes lors du chevauchement de l'amorçage avec le CSS de Django dans l'administrateur, donc ce sont quelques correctifs.
Utilisez les blocs Bodyheader et Bodyfooter pour envelopper le contenu de l'administrateur.

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

mises en garde

Nous maintenons deux modèles différents (interface utilisateur et administrateur principaux) 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 (sèche).

Comme nous l'avons commenté, c'est parce que l'administrateur de 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 à réfléchir à la boîte. Mais oui, cela nous oblige à utiliser deux modèles avec presque le même contenu.

En fait , en principe, nous pourrions concevoir un modèle de modèle qui comprenait cette barre navale et d'autres éléments communs de l'interface utilisateur principale et de l'administrateur, et les réutiliser à partir de cette seule source; 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. ?

Faire une barre de navigation partagée

Maintenant que l'interface utilisateur principal et le site d'administration se ressemblent presque, nous pouvons aller plus loin dans notre intégration et faire une expérience de navigation commune… et encore plus, présenter certaines options d'administration directement dans le menu principal!

Voici l'extrait de la barre de navigation:

<span><span><!doctype html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
</span>
    <span><!-- Bootstrap CSS -->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"</span> integrity<span>="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"</span> crossorigin<span>="anonymous"</span>></span>
</span>
    <span><span><span><title</span>></span>Django and Vue.js<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div</span> class<span>="bg-white container"</span>></span>
</span>      <span><span><span><h1</span>></span>Prototyping a Web App with Django and Vue.js<span><span></h1</span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></div</span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue-router"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.4.1.slim.min.js"</span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Copier après la connexion

Remarquez la section Dropdown-menu, qui s'occupera 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 {% si user.is_authenticated%} / {% endif%}, pour décider si nous affichons le menu administrateur ou non.

Enfin, n'oubliez pas que, puisque nous maintenons maintenant deux modèles principaux différents, nous devons ajouter le code HTML de la barre navale à la fois, MyApp / Modèles / MyApp / Tempalte.html et Templates / admin / base_site.html.

Extra: l'écran de connexion administrateur

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

Maintenant, nous pourrions transformer quelque chose comme ceci:

… dans quelque chose comme ceci:

Comment repenser et personnaliser l'administrateur Django avec bootstrap

Nous pouvons accomplir quelque chose de plus proche de cela en créant le modèle suivant dans Templtes / Admin / Login.html:

<span><span><!doctype html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
</span>
    <span><!-- Bootstrap CSS -->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"</span> integrity<span>="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"</span> crossorigin<span>="anonymous"</span>></span>
</span>
    <span><span><span><title</span>></span>Django and Vue.js<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div</span> class<span>="bg-white container"</span>></span>
</span>      <span><span><span><h1</span>></span>Prototyping a Web App with Django and Vue.js<span><span></h1</span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></div</span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue-router"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.4.1.slim.min.js"</span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Copier après la connexion

Breakdown

ce que nous faisons ici:

La balise {{block.super}} est là pour dire au moteur de modèle que nous ne dépassons pas le contenu d'Extastyle (que nous avons défini dans les modèles / admin / base_site.html) mais que nous sommes simplement contenu en ajoutant (voir l'héritage du modèle pour plus d'informations).
Le bloc de marque nous permet de changer l'en-tête «Administration Django» vers quelque chose de plus intéressant.
Nous nous débarrassons du bloc Head_title en définissant une définition vide.
Nous utilisons le bloc contenu_title pour ajouter des informations supplémentaires.

quelques considérations

Tout comme Bootstrap, le site d'administration Django expédie également son propre paquet de jQuery, mais heureusement, les développeurs de Django ont pensé à cela et pour éviter les conflits avec les scripts et les bibliothèques appliqués par l'utilisateur, le jQuery de Django est un étoilé en tant que 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 aura également un impact sur le site d'administration, affectant sa fonctionnalité de manière inattendue. Dans ce cas, vous pouvez toujours voir ce qui se passe avec vos outils de débogage de navigateur, tels que Chrome Devtools, Firefox Developer Tools (en particulier l'inspecteur de page), ou les outils de développeur Safari.

démo et code complet

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

Vous pouvez naviguer dans tout le code de projet dans mon référentiel GitHub, Luzdealba / djangovuejs.

enveloppent

Bien que certains puissent prétendre - tout à fait raisonnablement - qu'il n'est pas nécessaire de modifier l'apparence de l'administrateur de Django, il est également vrai que intégrer en douceur les différents points de terminaison d'un site est un hack fin pour l'amélioration de l'UX , car il peut fournir une transition transparente entre les deux, et même une navigation plus contrôlée de l'administrateur.

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

J'espère que vous avez quelques idées sur la façon dont vous pouvez 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 juste pour pouvoir jouer avec l'administrateur Django, consultez le tutoriel 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 souhaitez approfondir vos compétences en Django, la bibliothèque SitePoint Premium a des tas de ressources pour vous.

Questions fréquemment posées (FAQ) sur la personnalisation de l'administrateur Django avec bootstrap

Quels sont les avantages de la personnalisation de l'administrateur Django avec Bootstrap?

Personnaliser l'administrateur Django avec bootstrap offre plusieurs avantages. Premièrement, il améliore l'attrait visuel de votre interface d'administration, le rendant plus convivial et intuitif. Bootstrap est un cadre frontal populaire qui fournit une variété de modèles de conception pour la typographie, les formulaires, les boutons et autres composants d'interface. En l'intégrant à Django Admin, vous pouvez tirer parti de ces modèles pour créer une interface d'administration plus attrayante et fonctionnelle. Deuxièmement, il vous permet d'ajouter des fonctionnalités personnalisées à votre interface d'administration. Par exemple, vous pouvez ajouter des actions, des filtres et des formulaires personnalisés pour améliorer la convivialité de votre interface d'administration. Enfin, il peut améliorer la réactivité de votre interface d'administration, ce qui le rend plus accessible sur différents appareils et tailles d'écran.

Comment puis-je ajouter des actions personnalisées à Django Admin?

DJANGO L'administrateur vous permet de Ajoutez des actions personnalisées qui peuvent être effectuées sur des objets sélectionnés. Pour ajouter une action personnalisée, vous devez définir une fonction qui effectue l'action souhaitée sur les objets sélectionnés. Cette fonction doit prendre trois paramètres: l'administrateur du modèle, la demande et une questiont des objets sélectionnés. Une fois que vous avez défini cette fonction, vous pouvez l'ajouter à l'attribut «Actions» de votre administrateur modèle. Cela rendra l'action disponible dans la liste déroulante de l'action sur la page de la liste des modifications d'administration.

Puis-je personnaliser l'apparence de l'administrateur de Django à l'aide de bootstrap?

Oui, vous pouvez personnaliser l'apparence et sensation de django admin utilisant bootstrap. Bootstrap est un cadre frontal qui fournit une variété de modèles de conception pour la typographie, les formulaires, les boutons et autres composants d'interface. En l'intégrant à Django Admin, vous pouvez tirer parti de ces modèles pour créer une interface d'administration plus attrayante et fonctionnelle. Vous pouvez personnaliser les couleurs, les polices, la mise en page et d'autres éléments de conception de votre interface d'administration pour correspondre à votre identité de marque ou à vos préférences personnelles.

Comment puis-je ajouter des filtres personnalisés à Django Admin?

L'administrateur Django vous permet d'ajouter des filtres personnalisés qui peuvent être utilisés pour filtrer les objets affichés sur la page de la liste des modifications d'administration. Pour ajouter un filtre personnalisé, vous devez définir une sous-classe de django.contrib.admin.simplelistFilter. Cette sous-classe devrait définir deux méthodes: les recherches et les queyset. La méthode de recherche doit renvoyer une liste de tuples, chacune représentant une option de filtre. La méthode QuerySet doit renvoyer une querySet filtrée en fonction de l'option de filtre sélectionnée. Une fois que vous avez défini cette sous-classe, vous pouvez l'ajouter à l'attribut 'list_filter' de votre modèle admin.

Pour utiliser Bootstrap avec Django Admin sans packages supplémentaires, il est généralement plus facile et plus efficace d'utiliser un package comme Django-Admin-Bootstrap. Ce package fournit un thème basé sur Bootstrap pour Django Admin, ce qui facilite l'intégration de Bootstrap avec Django Admin. Il fournit également des fonctionnalités supplémentaires telles que la conception réactive et le rendu de formulaire personnalisé, qui peut encore améliorer la convivialité et les fonctionnalités de votre interface d'administration.

Comment puis-je personnaliser les champs de formulaire dans Django Admin?

Django L'administrateur vous permet de personnaliser les champs de formulaire utilisés pour créer ou modifier des objets. Pour personnaliser un champ de formulaire, vous devez remplacer la méthode «formfield_for_dbfield» de votre administrateur modèle. Cette méthode doit renvoyer une instance de champ de formulaire qui sera utilisée pour le champ de base de données spécifié. Vous pouvez personnaliser les attributs, les widgets et le comportement de validation du champ de formulaire pour répondre à vos besoins.

Puis-je ajouter des vues personnalisées à Django Admin?

Oui, vous pouvez ajouter des vues personnalisées à Django Admin. Pour ajouter une vue personnalisée, vous devez définir une méthode dans votre modèle d'administration qui gère la logique de vue. Cette méthode doit prendre une demande comme seul paramètre et renvoyer une réponse. Vous pouvez ensuite cartographier cette méthode à une URL en ajoutant un modèle URL à la méthode «get_urls» de votre administrateur modèle. Cela rendra la vue accessible à partir de l'interface d'administration.

Comment puis-je personnaliser l'affichage de la liste dans Django Admin?

L'administrateur Django vous permet de personnaliser l'affichage de la liste, qui est le tableau des objets affiché sur la page de la liste des modifications administratives. Pour personnaliser l'affichage de la liste, vous pouvez définir l'attribut «list_display» de votre administrateur modèle sur une liste de noms de champ que vous souhaitez afficher. Vous pouvez également inclure des noms de méthode dans cette liste, qui appellera la méthode correspondante sur chaque objet et affichera le résultat.

Puis-je utiliser Django Admin pour des modèles de base de données complexes?

Oui, Django Admin est conçu pour gérer les modèles de base de données complexes. Il fournit une variété de fonctionnalités qui peuvent vous aider à gérer des structures de données complexes, telles que l'édition en ligne d'objets connexes, les champs de formulaire personnalisés et les actions personnalisées. Cependant, pour les structures de données très complexes ou les opérations de base de données avancées, vous devrez peut-être étendre l'administrateur de Django avec des vues, des formulaires ou des actions personnalisés.

Comment puis-je améliorer les performances de Django Admin?

Il existe plusieurs façons d'améliorer les performances de Django Admin. Une façon consiste à optimiser vos requêtes de base de données. Django Admin génère automatiquement des requêtes de base de données en fonction de vos définitions de modèle et de vos options d'administration. Cependant, ces requêtes peuvent parfois être inefficaces, en particulier pour les structures de données complexes ou les grands ensembles de données. En personnalisant vos options d'administration et en utilisant les fonctionnalités d'optimisation de la base de données de Django, vous pouvez réduire considérablement le nombre de requêtes de base de données et améliorer les performances de votre interface d'administration. Une autre façon consiste à utiliser la mise en cache. Django fournit un cadre de mise en cache robuste que vous pouvez utiliser pour mettre en cache les résultats des opérations coûteuses ou des données fréquemment accessibles. En utilisant la mise en cache, vous pouvez réduire la charge de votre base de données et améliorer la réactivité de votre interface d'administration.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!