So können Sie den Django -Administrator mit Bootstrap neu gestalten und anpassen

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

Der Standard -Django -Admin. (Quelle)

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

Quelle

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

Quelle

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>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta> 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> 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>></title></span>Django and Vue.js<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div> class<span>="bg-white container"</span>>
      <span><span><span><h1 id="gt">></h1></span>Prototyping a Web App with Django and Vue.js<span><span></span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></span></span></span></span>
</div></span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue-router"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script> src<span >="https://code.jquery.com/jquery-3.4.1.slim.min.js"</script></span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</script></span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</script></span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></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>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta> 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> 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>></title></span>Django and Vue.js<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div> class<span>="bg-white container"</span>>
      <span><span><span><h1 id="gt">></h1></span>Prototyping a Web App with Django and Vue.js<span><span></span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></span></span></span></span>
</div></span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue-router"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script> src<span >="https://code.jquery.com/jquery-3.4.1.slim.min.js"</script></span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</script></span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</script></span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></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> id<span>="container"</span>>
(...)
<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> id<span>="container"</span>>
(...)
<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>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta> 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> 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>></title></span>Django and Vue.js<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div> class<span>="bg-white container"</span>>
      <span><span><span><h1 id="gt">></h1></span>Prototyping a Web App with Django and Vue.js<span><span></span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></span></span></span></span>
</div></span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue-router"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script> src<span >="https://code.jquery.com/jquery-3.4.1.slim.min.js"</script></span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</script></span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</script></span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></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:

Quelle

… in so etwas:

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

erstellen:

<span><span>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta> 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> 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>></title></span>Django and Vue.js<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div> class<span>="bg-white container"</span>>
      <span><span><span><h1 id="gt">></h1></span>Prototyping a Web App with Django and Vue.js<span><span></span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></span></span></span></span>
</div></span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue-router"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script> src<span >="https://code.jquery.com/jquery-3.4.1.slim.min.js"</script></span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</script></span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</script></span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></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!