Hoe u de Django Admin kunt herontwerpen met Bootstrap

De Django-beheersite is geweldig — volledig uitgerust, gemakkelijk te gebruiken, veilig van ontwerp, robuust… en enigszins lelijk, wat een nadeel kan zijn wanneer u deze wilt integreren met de look en feel van de rest van uw website. Laten we dat aanpakken.

Als het niet kapot is…

Stel dat je net een web-app hebt geprototypeerd met Django en Vue.js. Voor een breed scala aan gevallen is het gebruik van Django’s admin voor back office-doeleinden zoals het is, en zelfs het overdragen aan uw klant na het gepaste instellen van machtigingen, prima. Immers, het werkt perfect en het kan sterk worden aangepast met de ingebouwde hulpmiddelen om veel situaties te dekken.

Dus nogmaals, waarom zorgen?

Redenen om het uiterlijk van de admin aan te passen

Er zijn echter een aantal geldige redenen om de integratie een stap verder te nemen:

Merken: er is niets mis met het willen van de naam en kleuren van uw bedrijf in plaats van “Django administration” (en voor de zekerheid, dit is in overeenstemming met Django’s BSD-licentie).
Gelijktijdige integratie tussen hoofdsite en beheerdersinterface: het kan handig zijn om tussen backoffice-functionaliteit te kunnen schakelen terwijl je de site navigeert, en vice versa, door middel van een gemeenschappelijke navigatiebalk.
Verfraaiing: hoewel de beheerdersinterface al redelijk eruit ziet, en zelfs de principes van responsieve webdesign sinds versie 2 heeft geïmplementeerd (het werkt goed zowel op mobiel als desktop), kan veel een goed uitgewerkte stijlblad doen om het er beter uit te laten zien.
Overslaan van functionaliteit: je zou ook aangepaste dropdown-menu’s voor de beheerder kunnen willen maken, waarbij de opties die je echt gebruikt worden weergegeven en wat je niet echt nodig hebt wordt verborgen van de gebruikersinterface, wat zou kunnen leiden tot een betere gebruikerservaring.

A Practical Example

Voor dit voorbeeld, en om onszelf niet te herhalen, zullen we de eenvoudige webpublicatie-applicatie hervatten die we begonnen waren voor het Artikel over het prototypen van een webapplicatie met Django en Vue.js.

Kort gezegd:

a Django app with two models:
Artikel met velden naam auteur (gekoppelde), inhoud en slug
Auteur: met velden naam en slug
A single view called frontend that queries all registries in both models.
A single template called template.
Implementatie van Vue.js met Vue Router en Vuex voor een reageerbare schaalbare interface.

We zullen de integratie van Vue.js in deze aflevering niet specifiek onder de aandacht brengen en zullen deze hier niet wijzigen.

Het Basis Sjabloon

Django templates zijn zeer veelzijdig en krachtig en kunnen worden aangemaakt op het app niveau (een onderdeel van de Django site) of op het site niveau, en kunnen zelfs de standaard templates van Django overschrijven (wat we hier zullen doen).

We hebben een basis sjabloon gemaakt dat linkt naar Bootstrap’s JavaScript en stijlblad, evenals zijn metgezellen, jQuery en Popper.

Hier is het basis sjabloon dat we gebruiken voor de hoofd site, helemaal niet anders dan wat we normaal gesproken zouden gebruiken voor elke andere Django site:

<!doctype html>
<html lang="en">
  <head>
    <!-- Vereiste meta-tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Django and Vue.js</title>
  </head>
  <body class="bg-light">
    <div class="bg-white container">
      <h1>Prototyping a Web App with Django and Vue.js</h1>

      <!-- Inhoud -->
    </div>

    <!-- Vue.js -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>

    <!-- jQuery eerst, gevolgd door Popper.js, dan Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Vervolgens integreren we dit in het beheer en voegen we een gedeelde navigatiebalk toe over beide kanten — de hoofdsite en de back office!

Integratie van de hoofd UI-sjabloon met het Beheer

Zoals eerder genoemd, kunnen we sjablonen overschrijven, inclusief die van het beheer. Echter, vanwege de ontwerp van Django, en niet verrassend, zijn de hoofdsite en de back office twee verschillende systemen, elk met zijn eigen sjablonen, stijlbladen en contrib pakketten. Dus zelfs als ze bijna identiek zullen zijn, moeten we twee verschillende sjablonen onderhouden — één voor de hoofd-UI en één voor het beheer.

Maken van een map voor sjablonen in het algemeen

Eerst moeten we Django vertellen waar we de aangepaste beheersjabloon in de basisdirectory zullen opslaan.

Dus we moeten myproject/settings.py bewerken. Eerst, zoek de TEMPLATES constante en deze DIRS sleutel:

'DIRS': [],

Verander dat code naar dit:

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

Inpakken van het Admin Template (`admin/base` Hack)

Als we alleen cosmetische veranderingen wilden aanbrengen, zoals het doorgeven van een aangepaste stijlblad aan de admin, of het verwijderen/vervangen van zijn header, dan zouden we dat kunnen doen door gewoon het admin/base_site template aan te passen en deze huidige stap over te slaan. Echter, als we het helemaal willen doen en de admin sectie “omwikkelen” alsof deze zich bevindt binnen onze hoofdwebsite, met de mogelijkheid om een gemeenschappelijke header en footer te hebben, lees dan verder.

We zullen Django’s admin/base.html moeten kopiëren naar onze templates directory in templates/admin/base.html, zodat we onze wrappers kunnen plaatsen.

We zullen de code rond de container sectie aanpassen, zodat deze verandert van:

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

naar:

{% block bodyheader %}{% endblock %}

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

{% block bodyfooter %}{% endblock %}

En dat is alles! We hebben simpelweg bodyheader en bodyfooter block tags aangemaakt, zodat we de code kunnen injecteren die de admin zal omvatten in de volgende stap.

Coding a Custom Admin Template (`admin/base_site` Hack)

Dan zullen we de eigenlijke sjabloon coderen in templates/admin/base_site.html (we zullen de mappen op de hoofdmap van ons project moeten aanmaken):

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

{% block title %}Django with Bootstrap | Admin site{% endblock %}

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

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

{% block extrastyle %}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
      #header, .breadcrumbs { display: none; }

      /* Problemen met Bootstrap bij admin */
      * { box-sizing: unset; }
      div.module caption { caption-side: top !important; }
      .collapse { display: block !important; }
    </style>
{% endblock %}

{% block bodyheader %}
    <div class="bg-white container">

      <div class="jumbotron">
        <h1 class="display-4">Hacking the Django Admin with Bootstrap</h1>
        <p class="lead">
          The <a ref="https://docs.djangoproject.com/en/dev/ref/contrib/admin/">Django administration site</a> is great—full-featured, easy to use, secure by design, rock solid… and somewhat ugly, which can be something of a downside when you want to integrate it with the look-and-feel of the rest of the website. Let’s sort that out.
        </p>
      </div>
{% endblock %}

{% block bodyfooter %}
    </div>

    <!-- jQuery eerst, dan Popper.js, dan Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
{% endblock %}

Uitleg

Laten we proberen uit te leggen wat we hier doen:

We vertellen de sjabloonengine dat we de admin/base_site.html sjabloon “uitbreiden” om effectief enkele van zijn definities te overschrijven.
We maken gebruik van de title block om een titel voor de bekijkte adminpagina aan te passen.
We maken de inhoud van de branding en breadcrumbs blokken leeg, omdat we ze niet echt nodig hebben.
We gebruiken de bodyclass block om Bootstrap’s bg-light in te stellen, zoals we deden in de frontend sjabloon.
We gebruiken de extrastyle block om Bootstrap in te bedden, en enkele CSS-code.
a. Oké, #header, .breadcrumbs { display: none; } is een soort herhaling van nummer 3; maar het is handig om te weten dat je de branding- en breadcrumbssecties op twee manieren kunt uitschakelen.
b. Er kunnen problemen optreden bij het overlappen van Bootstrap met Django’s CSS in de admin, dus dit zijn enkele oplossingen.
Gebruik de bodyheader en bodyfooter blokken om de admininhoud te omwikkelen.

Nu we toegang hebben tot de admin-sjabloon, kunnen we verdergaan met zijn stijlblad, of het er gewoon zo bij laten met een gedeelde stijl met de hoofd-UI.

Beperkingen

We zijn bezig met het onderhouden van twee verschillende templates (hoofd-UI en admin) om in wezen dezelfde presentatie te doen. Admittedly, dit is niet ideaal, aangezien we expliciet een van de uitgangspunten van softwareontwikkeling overtreden: herhaal jezelf niet (DRY).

Zoals we al aangaven, is dit omdat de Django-admin is ontworpen om los te staan van de hoofd-UI. En daar is niets mis mee, net zoals er niets mis is met buiten de kaders denken. Maar ja, dat dwingt ons om twee templates te gebruiken met bijna dezelfde inhoud.

Eigenlijk, in principe zouden we een templatepatroon kunnen ontwerpen dat die navbar en andere gemeenschappelijke elementen van de hoofd-UI en de admin omvat, en deze hergebruiken uit die enkele bron; maar op dit moment, en met het oog op dit artikel, zou die aanpak een beetje overkill zijn. Hoe dan ook, ik zal het idee voor jou geplant laten. 😉

Een gedeelde navigatiebalk maken

Nu de hoofd-UI en de admin-site bijna hetzelfde uitzien, kunnen we verder gaan in onze integratie en een gezamenlijk navigatieverhaal creëren… en zelfs verder gaan, en enkele admin-opties rechtstreeks op het hoofdmenu presenteren!

Hier is de code voor de navigatiebalk:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a
        class="nav-link text-primary"
        href="/author/"
      >
        Go to Authors
      </a>
    </li>
    <li class="nav-item">
      <a
        class="nav-link text-primary"
        href="/article/"
      >
        Go to Articles
      </a>
    </li>
    {% if user.is_authenticated %}
    <li class="nav-item dropdown">
      <a
        aria-expanded="false"
        aria-haspopup="true"
        class="font-weight-bold nav-link text-primary dropdown-toggle"
        data-toggle="dropdown"
        href="#"
        role="button"
      >
        Admin
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="/admin/myapp/author/">
          Manage authors
        </a>
        <a class="dropdown-item" href="/admin/myapp/article/">
          Manage articles
        </a>
      </div>
    </li>
    {% endif %}
  </ul>
</nav>

Let op het dropdown-menu gedeelte, dat zorgt voor het presenteren van een adminmenu (zie Bootstrap’s Navbar component voor meer informatie).

We doen ook een voorwaardelijke controle met {% if user.is_authenticated %} /{% endif %}, om te beslissen of we het admin menu laten zien of niet.

Tot slot, onthoud dat, aangezien we nu twee verschillende hoofdtemplates onderhouden, we de HTML-code van de navigatiebalk aan beide moeten toevoegen, myapp/templates/myapp/template.html en templates/admin/base_site.html.

Extra: het Admin Login Screen

De admin site is afgehandeld, maar er is nog een los eind: het loginscherm.

Nu kunnen we zoiets als dit:

… omzetten in zoiets als dit:

We kunnen iets dichter bij dat bereiken door het volgende template te creëren in templates/admin/login.html:

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

{% load i18n static %}

{% block extrastyle %}
{{ block.super }}
<style>
#header {
  background-color: transparent !important;
}
</style>
{% endblock %}

{% block branding %}
<h1>
  <span style="color: #57C5A5 !important">ActionPlanNow.com</span>
  <br />
  <small>{% block head_title %}{% endblock %}</small>
</h1>
{% endblock %}

{% block content_title %}
<p class="lead" style="font-size: larger">
A Simple Tool for Leaders, Coaches, and Counselors.
</p>
{% endblock %}

Uitwerking

Wat we hier doen:

De {{ block.super }} tag vertelt de template-engine dat we de inhoud van extrastyle niet overschrijven (die we gedefinieerd hebben in het templates/admin/base_site.html template) maar dat we gewoon inhoud aan toe te voegen (zie template-erfenis voor meer informatie).
De branding block stelt ons in staat om de “Django beheer” header te veranderen in iets interessanters.
We verwijderen de head_title block door een lege definitie in te stellen.
We gebruiken het content_title blok om extra informatie toe te voegen.

Enkele overwegingen

Net als Bootstrap levert de Django admin site ook zijn eigen bundel van jQuery, maar gelukkig heeft het ontwikkelaars team van Django hierover nagedacht en om conflicten te voorkomen met door de gebruiker geleverde scripts en bibliotheken, is Django’s jQuery genamespaced als django.jQuery. Zo kunnen we veilig uw eigen kopie opnemen (zoals we hebben gedaan).

Wees voorzichtig als je gek wordt van klassendefinities in je hoofdstylesheet, aangezien dit ook impact heeft op de admin site, waardoor de functionaliteit op onverwachte wijze wordt beïnvloed. In dat geval kun je altijd zien wat er aan de hand is met je browser debuggereedschappen, zoals Chrome DevTools, Firefox Developer Tools (met name Page Inspector), of Safari Developer Tools.

Demo en volledige code

Deze implementatie waar we het hier over hebben zal er zo uitzien:

Je kunt alle projectcode in mijn GitHub-repository navigeren, luzdealba / djangovuejs.

Conclusie

Terwijl sommigen misschien wel terecht beweren dat er niet veel behoefte is aan het aanpassen van de uitstraling van Django’s admin, is het ook waar dat het soepel integreren van de verschillende eindpunten van een site een fijne hack is voor verbeterde UX, aangezien het een soepele overgang tussen de twee kan bieden, en zelfs een meer gecontroleerde navigatie van de admin.

En het doen ervan is niet zo moeilijk. Wat je moet opvallen is hoe je de admin omwikkelt, en ook hoe je derde-partijbibliotheken mengt met je eigen JavaScript-code en stijlbladen. Gelukkig kun je ze heel gemakkelijk integreren in de admin, in de rest van de hoofdsite en in beide.

Hopelijk heb je een idee over hoe je Django verder kunt aanpassen op manieren die niet zo duidelijk waren!

Als je een excuus nodig hebt om een webapp te bouwen zodat je kunt spelen met de Django admin, bekijk dan de tutorial van vorige week over het prototypen van een webapp met Django en Vue.js – het is enorm leuk. En als je je Django-vaardigheden verder wilt ontwikkelen, heeft de SitePoint Premium bibliotheek veel bronnen voor je.

Veelgestelde vragen (FAQs) over het aanpassen van Django Admin met Bootstrap

Wat zijn de voordelen van het aanpassen van Django Admin met Bootstrap?

Aanpassing van Django Admin met Bootstrap biedt verschillende voordelen. Ten eerste verbetert het de visuele aantrekkelijkheid van uw beheerinterface, waardoor deze gebruiksvriendelijker en intuïtiever wordt. Bootstrap is een populaire front-end framework dat een verscheidenheid aan ontwerptemplates biedt voor typografie, formulieren, knoppen en andere interface-onderdelen. Door het te integreren met Django Admin, kunt u deze templates gebruiken om een visueel aantrekkelijkere en functionele beheerinterface te creëren. Ten tweede kunt u er custom functionaliteiten aan uw beheerinterface toevoegen. Bijvoorbeeld, u kunt aangepaste acties, filters en formulieren toevoegen om de bruikbaarheid van uw beheerinterface te verbeteren. Tot slot kan het de responsiviteit van uw beheerinterface verbeteren, waardoor deze toegankelijker wordt op verschillende apparaten en schermbreedtes.

Hoe voeg ik aangepaste acties toe aan Django Admin?

Django Admin stelt u in staat om aangepaste acties toe te voegen die kunnen worden uitgevoerd op geselecteerde objecten. Om een aangepaste actie toe te voegen, moet u een functie definiëren die de gewenste actie uitvoert op de geselecteerde objecten. Deze functie moet drie parameters hebben: de modelbeheerder, de aanvraag en een queryset van de geselecteerde objecten. Zodra u deze functie hebt gedefinieerd, kunt u deze toevoegen aan het ‘acties’ kenmerk van uw modelbeheerder. Dit zorgt ervoor dat de actie beschikbaar is in de vervolgkeuzelijst op de pagina met wijzigingslijsten van de beheerder.

Kan ik het uiterlijk van Django Admin aanpassen met behulp van Bootstrap?

Ja, je kunt de look and feel van Django Admin aanpassen met Bootstrap. Bootstrap is een front-end framework dat een verscheidenheid aan ontwerptemplates biedt voor typografie, formulieren, knoppen en andere interface-onderdelen. Door het te integreren met Django Admin, kun je deze templates gebruiken om een visueel aantrekkelijker en functioneler beheerdersinterface te creëren. Je kunt de kleuren, lettertypen, lay-out en andere ontwerpelementen van je beheerdersinterface aanpassen om overeen te komen met je merkidentiteit of persoonlijke voorkeuren.

Hoe kan ik aangepaste filters toevoegen aan Django Admin?

Django Admin staat toe om aangepaste filters toe te voegen die kunnen worden gebruikt om de weergegeven objecten op de beheerderswijzigingslijstpagina te filteren. Om een aangepaste filter toe te voegen, moet je een subclass definiëren van django.contrib.admin.SimpleListFilter. Deze subclass moet twee methoden definiëren: lookups en queryset. De lookups-methode moet een lijst van tupels teruggeven, elk vertegenwoordigend een filteroptie. De queryset-methode moet een gefilterde queryset retourneren op basis van de geselecteerde filteroptie. Zodra je deze subclass hebt gedefinieerd, kun je deze toevoegen aan het ‘list_filter’ attribuut van je model admin.

Kan ik Bootstrap gebruiken met Django Admin zonder extra pakketten?

Hoewel het mogelijk is om Bootstrap te gebruiken met Django Admin zonder extra pakketten, is het over het algemeen gemakkelijker en efficiënter om een pakket te gebruiken zoals django-admin-bootstrap. Dit pakket biedt een Bootstrap-gebaseerde thema voor Django Admin, waardoor het gemakkelijker is om Bootstrap te integreren met Django Admin. Het biedt ook aanvullende functies zoals responsief ontwerp en aangepaste formulierweergave, wat de gebruiksvriendelijkheid en functionaliteit van je beheerdersinterface verder kan verbeteren.

Hoe kan ik formuliervelden aanpassen in Django Admin?

Django Admin biedt de mogelijkheid om de formuliervelden te customizen die worden gebruikt om objecten te creëren of te bewerken. Om een formulierveld aan te passen, moet je de ‘formfield_for_dbfield’ methode van je model admin overschrijven. Deze methode moet een formulierveld instantie teruggeven die wordt gebruikt voor de specifieke databaseveld. Je kunt de eigenschappen, widgets en validatiegedrag van het formulierveld aanpassen aan je behoeften.

Kan ik aangepaste views toevoegen aan Django Admin?

Ja, je kan aangepaste views toevoegen aan Django Admin. Om een aangepaste view toe te voegen, moet je een methode definiëren in je model admin die de view logica aanstuurt. Deze methode moet een verzoek als enige parameter accepteren en een reactie teruggeven. Je kan deze methode dan koppelen aan een URL door een URL patroon toe te voegen aan de ‘get_urls’ methode van je model admin. Dit zal de view toegankelijk maken vanuit de admin interface.

Hoe kan ik de lijstweergave aanpassen in Django Admin?

Django Admin biedt de mogelijkheid om de lijstweergave, de tabel van objecten die wordt weergegeven op de admin veranderlijst pagina, aan te passen. Om de lijstweergave aan te passen, kan je de ‘list_display’ eigenschap van je model admin instellen op een lijst van veldnamen die je wilt weergeven. Je kan ook methode namen in deze lijst opnemen, die de overeenkomstige methode op elk object zal aanroepen en het resultaat zal weergeven.

Kan ik Django Admin gebruiken voor complexe database modellen?

Ja, Django Admin is ontworpen om complexe database modellen te verwerken. Het biedt een scala aan functies die u kunnen helpen bij het beheren van complexe gegevensstructuren, zoals inline bewerken van gerelateerde objecten, aangepaste formuliervelden en aangepaste acties. Voor zeer complexe gegevensstructuren of geavanceerde databasebewerkingen moet u echter mogelijk Django Admin uitbreiden met aangepaste weergaven, formulieren of acties.

Hoe kan ik de prestaties van Django Admin verbeteren?

Er zijn verschillende manieren om de prestaties van Django Admin te verbeteren. Een manier is om uw databasequery’s te optimaliseren. Django Admin genereert automatisch databasequery’s op basis van uw modeldefinities en beheeropties. Soms kunnen deze query’s echter inefficiënt zijn, vooral bij complexe gegevensstructuren of grote datasets. Door uw beheeropties aan te passen en Django’s databaseoptimalisatiefuncties te gebruiken, kunt u het aantal databasequery’s aanzienlijk verminderen en de prestaties van uw beheerinterface verbeteren. Een andere manier is het gebruik van caching. Django biedt een robuust cachingframework dat u kunt gebruiken om de resultaten van dure bewerkingen of vaak geaccessioneerde gegevens te cachen. Door caching te gebruiken, kunt u de belasting van uw database verminderen en de reageerbaarheid van uw beheerinterface verbeteren.