Django Bootstrap

Das Hauptziel dieser kurzen Erklärung besteht darin, zu lernen, wie man Bootstrap zum Projekt in Django hinzufügt, und wir sehen uns auch einige Konfigurationen zu statischen Asserts an.

Einrichten von Bootstrap in Django

Lass uns anfangen. Wir haben ein Projekt namens demosite und eine einzelne App namens blog, aber das einzelne Projekt kann mehrere Apps haben. Jetzt werden wir sehen, wie statische Assets mit unserem Projekt verbunden werden, und wir werden statische Elemente hinzufügen, die anwendungsspezifisch sind.

Wir werden ein static Verzeichnis in der blog-App hinzufügen, damit sie nur von dieser App aus sichtbar und zugänglich sind. Manchmal möchten Sie einige globale Stile oder globale Assets hinzufügen, Bilder, die für alle Ihre Apps zugänglich sein müssen.

Der erste Schritt ist das Hinzufügen von Bootstrap zu unserer blog-Anwendung; Öffnen Sie den Browser, navigieren Sie zu Bootstrap 5 docs und klicken Sie auf die Download-Schaltfläche. Nach dem Herunterladen müssen wir die Datei extrahieren und diese JS- und CSS-Ordner aus dem extrahierten Ordner kopieren.

Wir haben in der App einen static Ordner erstellt und werden innerhalb dieses static Ordners einen weiteren Ordner mit dem Namen blog hinzufügen. Wir können sehen, dass wir ein Verzeichnis /static/blog haben, und Sie müssen Ihre Dateien nicht direkt in static ablegen, da dies empfohlen wird, um einen zusätzlichen Ordner darin hinzuzufügen.

Wenn Sie sich fragen, warum das so ist, obwohl wir technisch gesehen alle unsere Stile direkt unter diesem static Ordner ablegen könnten, anstatt einen weiteren blog-Ordner zu erstellen, wäre das eine schlechte Idee. Django wählt die erste statische Datei aus.

Jetzt fügen wir die kopierten Ordner in den Ordner blog ein. Es findet, wessen Name übereinstimmt, und wenn wir die statische Datei mit demselben Namen in einer anderen Anwendung haben, könnte Django nicht zwischen ihnen unterscheiden.

Einfacher gesagt, wenn wir Dateien wie Style-CSS haben und diese unter statisch ablegen und wir diese Datei auch in anderen Apps oder Projekten haben, kann Django nicht erkennen, welches Style-CSS wir laden möchten. Dies ist gut, um einen zusätzlichen Namen hinzuzufügen, um zu unterscheiden, welchen wir laden möchten.

Lassen Sie uns in der App einen Ordner namens template erstellen, und in diesem Ordner erstellen wir eine index.html-Datei. In dieser Datei müssen wir Django anweisen, unsere statische Variable mit diesem Jinja-Code {% load static %} zu laden, und wir verwenden das <link/>-Tag, um unsere CSS-Dateien von Bootstrap zu verknüpfen und den folgenden Code zu schreiben.

Bevor Sie das Projekt ausführen, stellen Sie bitte sicher, dass Sie eine Funktion für die Indexseite erstellt und die URL in der Datei urls.py festgelegt haben. Diese Codes dienen der Demonstration und in Ihrem Projekt kann der Code geändert werden.

Lassen Sie uns den Server ausführen; Wenn Sie Developer Tools öffnen, zu Network navigieren, CSS auswählen und die Seite aktualisieren, sehen wir, dass Bootstrap geladen wurde.

Fügen wir die Komponente card hinzu, kopieren ihren Code aus Bootstrap und fügen ihn in unsere Datei index.html ein.

Wir haben unsere Karte hier und uns fehlt ein Bild, also werden wir dieses Bild jetzt hinzufügen, aber wir werden Ihnen zeigen, wie Sie dieses Mal globale statische Assets hinzufügen.

Wenn wir ein Bild für andere Apps verfügbar machen möchten, erstellen wir einen static-Ordner in unserem root-Verzeichnis und erstellen einen image-Ordner innerhalb des static-Ordners. Lassen Sie uns ein Bild im Ordner image speichern.

Jetzt müssen wir zu unserer Datei settings.py gehen, nach unten scrollen und sehen, dass wir bereits STATIC_URL haben und eine weitere Variable hinzufügen, STATICFILES_DIRS. Mit diesem Befehl können wir mehr static Verzeichnisse angeben, wir verwenden nur eines, aber manchmal möchten Sie mehr haben.

Wir übergeben einen Bildpfad an das Attribut src in der Datei index.html.

Lassen Sie uns die Seite aktualisieren, und wir können sehen, dass unser Bild geladen wurde. Dieses Bild wird aus unserem Ordner root static geladen, und wir haben die CSS-Stile, die aus unserer Anwendung geladen werden.