Die Django-Administration ist gro?artig-voll ausgestattet, einfach zu bedienen, sicher für Design, solide… und etwas h?sslich, was ein Nachteil sein kann, wenn Sie es in das Erscheinungsbild und das Gefühl des Restes integrieren m?chten Ihrer Website. Lassen Sie uns das aussortieren.

Key Takeaways

• Verwenden Sie Bootstrap, um die visuelle Anziehungskraft und die Benutzererfahrung des Django -Administrators zu verbessern, indem Sie die Entwurfsvorlagen von Bootstrap und reaktionsschnelle Funktionen integrieren.
• übergeordnete Standard -Admin -Vorlagen von Django erm?glicht eine nahtlose Integration in die Hauptstelle, wobei die konsistente Branding und Navigation aufrechterhalten wird.
• Der Anpassungsprozess umfasst das ?ndern der Einstellungen in `MyProject/Settings.py` und das Erstellen neuer Vorlagendateien im Vorlagenverzeichnis, um Bootstrap -Stile und -Skripts einzubeziehen.
• Freigegebene Navigationsleisten und andere gemeinsame Elemente k?nnen sowohl zum Hauptstandort als auch zum Administratorvorlagen hinzugefügt werden, wodurch eine einheitliche Benutzeroberfl?che über Plattformen hinweg f?rdert.
• Ansprechen potenzieller Probleme mit überlappenden CSS durch sorgf?ltiges Verwalten von Klassendefinitionen und Verwendung von Browser -Debugging -Tools, um sicherzustellen, dass die Funktionalit?t nicht beeintr?chtigt wird.

Wenn es nicht gebrochen ist ...

Sagen Sie, Sie haben gerade eine Web -App mit Django und Vue.js. Für eine Vielzahl von F?llen ist es in Ordnung, den Django -Administrator für Backoffice -Zwecke zu verwenden, wie es ist, und sogar nach angemessener Einstellung von Berechtigungen an Ihren Kunden zu behandeln. Schlie?lich funktioniert es perfekt und kann stark mit den integrierten Werkzeugen angepasst werden, um viele Situationen abzudecken.

Also wieder, warum st?ren?

Gründe, das Erscheinungsbild des Administrators zu hacken

Es gibt jedoch eine Reihe von gültigen Gründen, um eine Integration noch einen Schritt weiter zu stellen:

• Branding: Es ist nichts Falsches daran, den Namen und die Farben Ihres Unternehmens anstelle der ?Django -Verwaltung“ zu wünschen (und für die Aufzeichnung entspricht dies mit der BSD -Lizenz von Django).
• nahtlose Integration zwischen Hauptstandort und Administrator: M?glicherweise m?chten Sie in der Lage sein, zwischen Backoffice -Funktionen zu wechseln, w?hrend Sie die Website navigieren, und umgekehrt, indem Sie eine gemeinsame Navigationsleiste haben.
• hübsch: Obwohl der Administrator in Ordnung aussieht und seit V2 sogar reaktionsschnelle Webdesign-Prinzipien implementiert hat (es funktioniert sowohl auf Mobiltelefon als auch auf dem Desktop gut), gibt es viel ein gut ausgearbeitetes Stilblatt kann tun, damit es besser aussieht.
• Bypass -Funktionalit?t: M?glicherweise m?chten Sie auch nur benutzerdefinierte Dropdown -Menüs für den Administrator erstellen und die Optionen anzeigen, die Sie tats?chlich verwenden und sich vor der Benutzeroberfl?che verstecken, was Sie nicht wirklich ben?tigen, was für eine bessere Benutzererfahrung führen kann.

Ein praktisches Beispiel

Für dieses Beispiel und um uns nicht wieder zu wiederholen, werden wir die einfache Ver?ffentlichungsanwendung wieder aufnehmen, die wir für das Prototyping einer Web -App mit Django und Vue.js Artikel gestartet haben.

Kurz gesagt:

• Eine Django -App mit zwei Modellen:
• Artikel mit Fields Name Autor (verlinkt), Inhalt und Slug
• Autor: Mit Feldernname und Slug
• Eine einzelne Ansicht namens Frontend, die alle Register in beiden Modellen abfragt.
• Eine einzelne Vorlage namens Vorlage.
• Implementierung von Vue.js mit Vue -Router und Vuex für eine reaktive skalierbare Grenzfl?che.

Wir kümmern uns nicht besonders um die Integration von Vue.js in dieser Rate, und wir werden sie hier nicht ?ndern.

Die grundlegende Vorlage

Django -Vorlagen sind sehr vielseitig und leistungsstark und k?nnen entweder auf App -Ebene (eine Komponente der Django -Site) oder auf Standortebene erstellt werden und k?nnen sogar die Vorlagen, die mit Django geliefert werden (was wir sind, überschreiben k?nnen. Ich werde es hier tun).

Wir haben eine grundlegende Vorlage erstellt, die mit Bootstraps JavaScript- und Style -Blatt und seinen Begleitwerkzeugen, JQuery und Popper, verlinkt.

.

Hier ist die Basisvorlage, die wir für die Hauptseite verwenden, nicht von dem, was wir normalerweise für eine andere Django -Site verwenden würden:

<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>

Als n?chstes integrieren wir dies in den Administrator und fügen eine gemeinsame Navigationsleiste über beide Enden hinzu - die Hauptseite und die Back Office!

integrieren Sie die Haupt UI -Vorlage in den Administrator

Wie bereits erw?hnt, k?nnen wir Vorlagen, einschlie?lich der des Administrators, überschreiben. Aufgrund des Designs von Django und nicht überraschend sind die Hauptstelle und die Backoffice zwei verschiedene Systeme mit eigenen Vorlagen, Stilbl?ttern und Beitragspaketen. Selbst wenn sie fast identisch sein werden, müssen wir zwei verschiedene Vorlagen beibehalten - eine für die Hauptoberfl?che und eine für den Admin. ein Verzeichnis für Vorlagen im Allgemeinen

aktivieren

Erstens müssen wir Django mitteilen, wo wir die gehackte Administratorvorlage im Basisverzeichnis speichern.

SE Wir müssen MyProject/Settings.py bearbeiten. Finden Sie zun?chst die Vorlagen konstant und dieser Dirs -Schlüssel:

<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>

?ndern Sie diesen Code darauf:

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

wickeln Sie die Administratorvorlage (Admin/Base Hack)

ein

Wenn wir nur kosmetische ?nderungen vornehmen wollten, z. B. ein benutzerdefiniertes Stylesheet an den Administrator übertragen oder seinen Header entfernen/ersetzt werden, k?nnen wir mit dem auskommen, indem wir nur die admin/base_sitesvorlage bearbeiten und diesen aktuellen Schritt insgesamt überspringen. Wenn wir jedoch den ganzen Weg gehen und den Administratorabschnitt ?einwickeln“ m?chten, als ob er in unserer Hauptstelle enthalten w?re, mit der M?glichkeit, einen gemeinsamen Kopf- und Fu?zeilen zu haben, dann lesen Sie weiter.

Wir müssen Djangos admin/base.html in unser Vorlagenverzeichnis in Vorlagen/admin/base.html kopieren, damit wir unsere Wrapper platzieren k?nnen.

wir bearbeiten den Code um den Containerabschnitt, damit er daraus geht:

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

dazu:

<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>

Und das ist alles! Wir haben einfach BodyHeader- und Bodyfooter -Block -Tags erstellt, damit wir den Code injizieren k?nnen, der den Administrator im n?chsten Schritt einpackt.

codieren einer benutzerdefinierten Administratorvorlage (Admin/Base_sit Hack)

Dann codieren wir die tats?chliche Vorlage in den Vorlagen/admin/base_sit.html (wir müssen die Verzeichnisse auf dem Stammer unseres Projekts erstellen):

{% 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 %}

Breakdown

Versuchen wir zu erkl?ren, was wir hier tun:

1. Wir sagen der Vorlagenmotor, dass wir die admin/base_sit.html -Vorlage ?erweitern“, um einige seiner Definitionen effektiv zu überschreiben.
2. Wir nutzen den Titelblock, um einen Titel für die durchstrowen Administratorseite anzupassen.
3. wir leeren den Inhalt von Branding- und Brotkrumenbl?cken, da wir sie nicht wirklich brauchen.
4. Wir verwenden den BodyClass-Block, um den BG-Licht von Bootstrap zu setzen, wie wir es in der Frontend-Vorlage getan haben.
5. Wir verwenden den Extrastyle -Block, um Bootstrap und einige CSS -Code einzubetten. A. Okay, #header, .breadcrumbs {display: keine; } ist so etwas wie eine Wiederholung von Nummer 3; Es ist jedoch nützlich zu wissen, dass Sie die Abschnitte von Branding und Brotkrumen in beide Richtungen deaktivieren k?nnen. B. Es kann einige Probleme geben, wenn Sie Bootstrap mit Djangos CSS im Administrator überlappten. Dies sind also einige Korrekturen.
6. Verwenden Sie die BodyHeader- und Bodyfooterbl?cke, um den Administratorinhalt zu wickeln.

Jetzt, da wir Zugriff auf die Administratorvorlage haben, k?nnten wir das Stylesheet vorantreiben oder es einfach mit einem gemeinsamen Stil mit der Hauptoberfl?che lassen.

Vorbehalt

Wir pflegen zwei verschiedene Vorlagen (Haupt Benutzeroberfl?che und Administrator), um im Wesentlichen dieselbe Pr?sentation zu machen. Zugegeben, dies ist nicht ideal, da wir explizit einen der Maximen der Softwareentwicklung brechen: Wiederholen Sie sich nicht (trocken).

Wie wir kommentiert haben, liegt dies daran, dass der Django -Administrator für die Abteilung von der Haupt Benutzeroberfl?che entworfen wurde. Und daran ist nichts auszusetzen, genau wie es nichts falsch ist, über die Schachtel zu denken. Aber ja, das zwingt uns, zwei Vorlagen mit fast dem gleichen Inhalt zu verwenden.

eigentlich , im Prinzip konnten wir im Prinzip ein Vorlagenmuster entwerfen, das diese Navigationsleiste und andere gemeinsame Elemente aus der Haupt -Benutzeroberfl?che und dem Administrator enthielt und sie von dieser einzelnen Quelle wiederverwendet. Aber zu diesem Zeitpunkt und für den Zweck dieses Artikels w?re dieser Ansatz etwas übertrieben. Wie auch immer, ich lasse die Idee für Sie gepflanzt. ?

eine gemeinsame Navigationsleiste machen

Jetzt, da die Hauptoberfl?che und die Administratorseite nahezu gleich aussehen, k?nnen wir unsere Integration weiter in die Integration gehen und ein gemeinsames Navigationserlebnis machen… und noch weiter einige Administratoroptionen direkt im Hauptmenü pr?sentieren!

Hier ist das Snippet für die Navigationsleiste:

<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>

Beachten Sie den Abschnitt Dropdown-Menu, der sich um die Pr?sentation eines Admin-Menüs kümmert (Weitere Informationen finden Sie unter Bootstraps NAVBAR-Komponente).

.

Wir führen auch eine bedingte Prüfung mit { % if user.is_authenticated %} /{ % endif %}, um zu entscheiden, ob wir das Admin -Menü anzeigen.

Denken Sie zuletzt daran, dass wir, da wir jetzt zwei verschiedene Hauptvorlagen beibehalten haben templates/admin/base_sit.html.

extra: Der Administratoranmeldebildschirm

Die Administratorseite wurde gepflegt,

, aber gibt es immer noch ein loses Ende: den Anmeldebildschirm.

Jetzt k?nnten wir so etwas drehen:

… in so etwas:

Wir k?nnen etwas n?her daran erreichen, indem wir die folgende Vorlage in Templtes/admin/login.html:

erstellen:

<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>

Breakdown

was wir hier machen:

Das Tag {{block.super}} ist da, um der Vorlagen -Engine mitzuteilen, dass wir den Inhalt des Extrastyle nicht überschreiben (die wir in den Vorlagen der Vorlagen/admin/Base_Site.html definiert haben), aber wir sind einfach einfach Inhalte anh?ngen (siehe Vorlage Vererbung für weitere Informationen).
Der Branding -Block erm?glicht es uns, den Header ?Django Administration“ in etwas Interessanteres zu ?ndern.
wir entfernen den head_title block, indem wir eine leere Definition einstellen.
Wir verwenden den Content_title -Block, um zus?tzliche Informationen hinzuzufügen.

Einige überlegungen

Quelle

Genau wie Bootstrap versendet die Django-Administratorseite auch ein eigenes Bündel von JQuery, aber zum Glück dachten die Django-Entwickler dies durch und vermeiden Konflikte mit von Benutzer gelieferten Schriften und Bibliotheken. So k?nnen wir Ihre eigene Kopie (wie wir es getan haben) sicher einfügen.

Seien Sie vorsichtig, wenn Sie mit Klassendefinitionen in Ihrem Hauptstilblatt verrückt werden, da sich dies auch auf die Administratorstelle auswirkt und seine Funktionalit?t auf unerwartete Weise beeinflusst. In diesem Fall k?nnen Sie immer sehen, was mit Ihren Browser -Debugging -Tools wie Chrome Devtools, Firefox -Entwickler -Tools (insbesondere Seiteninspektor) oder Safari -Entwickler -Tools vor sich geht.

Demo und vollst?ndige Code

Diese hier diskutierte Implementierung wird wie folgt aussehen:

Sie k?nnen den gesamten Projektcode in meinem Github -Repository Luzdealba / djangovuejs navigieren.

up

W?hrend einige behaupten, dass es - ganz vernünftigerweise -, dass das Erscheinungsbild von Django nicht viel ver?ndert werden muss, ist es auch wahr, dass die verschiedenen Endpunkte einer Site reibungslos integriert, ein guter Hack für eine verbesserte UX , ist da es einen nahtlosen übergang zwischen den beiden und sogar eine kontrolliertere Navigation des Administrators liefern kann.

und dies ist nicht so schwierig. Sie müssen darauf achten, wie Sie den Administrator einwickeln und auch, wie Sie Bibliotheken von Drittanbietern mit Ihrem eigenen JavaScript-Code und Stilbl?ttern mischen. Glücklicherweise k?nnen Sie etwas leicht in den Administrator integrieren, einige in den Rest der Hauptstelle und einige in beide.

Hoffentlich haben Sie einige Ideen dazu

Wenn Sie eine Ausrede ben?tigen, um eine Web -App zu erstellen, damit Sie mit dem Django -Administrator spielen k?nnen, lesen Sie das Tutorial der letzten Woche zum Prototyping einer Web -App mit Django und Vue.js - es ist eine Tonne Spa?. Und wenn Sie Ihre Django -F?higkeiten weiter übernehmen m?chten, verfügt die SitePoint Premium Library enth?lt eine Menge Ressourcen für Sie.

h?ufig gestellte Fragen (FAQs) zum Anpassen von Django Admin mit Bootstrap

Was sind die Vorteile des Anpassens von Django Admin mit Bootstrap? Erstens verbessert es die visuelle Anziehungskraft Ihrer Administratoroberfl?che und macht sie benutzerfreundlicher und intuitiver. Bootstrap ist ein beliebtes Front-End-Framework, das eine Vielzahl von Designvorlagen für Typografie, Formulare, Schaltfl?chen und andere Schnittstellenkomponenten bietet. Durch die Integration in Django Admin k?nnen Sie diese Vorlagen nutzen, um eine optisch ansprechende und funktionale Administratorschnittstelle zu erstellen. Zweitens k?nnen Sie Ihrer Admin -Schnittstelle benutzerdefinierte Funktionen hinzufügen. Beispielsweise k?nnen Sie benutzerdefinierte Aktionen, Filter und Formulare hinzufügen, um die Benutzerfreundlichkeit Ihrer Administratorschnittstelle zu verbessern. Schlie?lich kann es die Reaktionsf?higkeit Ihrer Administratorschnittstelle verbessern und auf verschiedenen Ger?ten und Bildschirmgr??en besser zug?nglich machen.

Wie kann ich Django Admin? Fügen Sie benutzerdefinierte Aktionen hinzu, die an ausgew?hlten Objekten ausgeführt werden k?nnen. Um eine benutzerdefinierte Aktion hinzuzufügen, müssen Sie eine Funktion definieren, die die gewünschte Aktion auf den ausgew?hlten Objekten ausführt. Diese Funktion sollte drei Parameter erfolgen: den Modelladministrator, die Anforderung und ein Queryset der ausgew?hlten Objekte. Sobald Sie diese Funktion definiert haben, k?nnen Sie sie dem Attribut "Aktionen" Ihres Modelladministers hinzufügen. Dadurch wird die Aktion im Dropdown -Bereich der Aktion auf der Seite "Admin -?nderungsliste" verfügbar. Feel of Django Admin mit Bootstrap. Bootstrap ist ein Front-End-Framework, das eine Vielzahl von Designvorlagen für Typografie, Formulare, Schaltfl?chen und andere Schnittstellenkomponenten bietet. Durch die Integration in Django Admin k?nnen Sie diese Vorlagen nutzen, um eine optisch ansprechende und funktionale Administratorschnittstelle zu erstellen. Sie k?nnen die Farben, Schriftarten, Layout und andere Designelemente Ihrer Admin -Schnittstelle an Ihre Markenidentit?t oder pers?nliche Einstellungen anpassen.

Wie kann ich Django -Administrator benutzerdefinierte Filter hinzufügen? Um einen benutzerdefinierten Filter hinzuzufügen, müssen Sie eine Unterklasse von django.contrib.admin.Simplelistfilter definieren. Diese Unterklasse sollte zwei Methoden definieren: Lookups und Queryset. Die Lookups -Methode sollte eine Liste von Tupeln zurückgeben, die jeweils eine Filteroption darstellen. Die QuerySet -Methode sollte einen gefilterten Queryset basierend auf der ausgew?hlten Filteroption zurückgeben. Sobald Sie diese Unterklasse definiert haben, k?nnen Sie sie dem Attribut "list_filter" Ihres Modelladministers hinzufügen.

Kann ich Bootstrap mit Django Admin ohne zus?tzliche Pakete verwenden? Um Bootstrap mit Django Admin ohne zus?tzliche Pakete zu verwenden, ist es im Allgemeinen einfacher und effizienter, ein Paket wie Django-Admin-Bootstrap zu verwenden. Dieses Paket bietet ein Bootstrap-basiertes Thema für Django admin, sodass die Integration von Bootstrap in Django Admin einfacher ist. Es bietet au?erdem zus?tzliche Funktionen wie Responsive Design und Custom Form Form Rendering, die die Benutzerfreundlichkeit und Funktionalit?t Ihrer Administratorschnittstelle weiter verbessern k?nnen. Mit dem Administrator k?nnen Sie die Formularfelder anpassen, die zum Erstellen oder Bearbeiten von Objekten verwendet werden. Um ein Formularfeld anzupassen, müssen Sie die Methode "formfield_for_dbfield" Ihres Modelladministers überschreiben. Diese Methode sollte eine Formularfeldinstanz zurückgeben, die für das angegebene Datenbankfeld verwendet wird. Sie k?nnen die Attribute, Widgets und Validierungsverhalten des Formularfelds an Ihre Anforderungen anpassen. Um eine benutzerdefinierte Ansicht hinzuzufügen, müssen Sie eine Methode in Ihrem Modelladministrator definieren, die die Ansichtslogik übernimmt. Diese Methode sollte eine Anforderung als einziger Parameter annehmen und eine Antwort zurückgeben. Sie k?nnen diese Methode dann einer URL zuordnen, indem Sie der Methode "get_urls" Ihres Modelladministers ein URL -Muster hinzufügen. Dadurch wird die Ansicht über die Admin -Schnittstelle zug?nglich. Auf der Seite "Admin -?nderungsliste" angezeigt. Um die Anzeige der Liste anzupassen, k?nnen Sie das Attribut "list_display" Ihres Modelladministrators auf eine Liste der Feldnamen festlegen, die Sie anzeigen m?chten. Sie k?nnen auch Methodennamen in diese Liste einbeziehen, die die entsprechende Methode für jedes Objekt aufrufen und das Ergebnis anzeigen.

Kann ich Django -Administrator für komplexe Datenbankmodelle verwenden? Es bietet eine Vielzahl von Funktionen, mit denen Sie komplexe Datenstrukturen verwalten k?nnen, z. Für sehr komplexe Datenstrukturen oder erweiterte Datenbankvorg?nge müssen Sie jedoch m?glicherweise den Django -Administrator mit benutzerdefinierten Ansichten, Formularen oder Aktionen erweitern. Es gibt verschiedene M?glichkeiten, die Leistung von Django Admin zu verbessern. Eine M?glichkeit besteht darin, Ihre Datenbankabfragen zu optimieren. Django admin generiert automatisch Datenbankabfragen basierend auf Ihren Modelldefinitionen und Administratoroptionen. Diese Abfragen k?nnen jedoch manchmal ineffizient sein, insbesondere für komplexe Datenstrukturen oder gro?e Datens?tze. Indem Sie Ihre Administratoroptionen anpassen und die Datenbankoptimierungsfunktionen von Django verwenden, k?nnen Sie die Anzahl der Datenbankabfragen erheblich reduzieren und die Leistung Ihrer Administratorschnittstelle verbessern. Ein anderer Weg ist die Verwendung von Caching. Django bietet ein robustes Caching -Framework, mit dem Sie die Ergebnisse teurer Vorg?nge oder h?ufig zugegriffenen Daten zwischenspeichern k?nnen. Durch die Verwendung von Caching k?nnen Sie die Last in Ihrer Datenbank reduzieren und die Reaktionsf?higkeit Ihrer Administratorschnittstelle verbessern.

Das obige ist der detaillierte Inhalt vonSo k?nnen Sie den Django -Administrator mit Bootstrap neu gestalten und anpassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!