Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Django Rückenwind

PHPz
Freigeben: 2024-08-29 06:30:31
Original
1154 Leute haben es durchsucht

Dieses Tutorial zeigt, wie man Django und TailwindCSS in einem neuen Projekt von Grund auf konfiguriert.

Django-Setup

Erstellen Sie eine neue virtuelle Umgebung mit dem Namen .venv.

# Windows
$ python -m venv .venv
$ .venv\Scripts\Activate.ps1
(.venv) $

# macOS/Linux
$ python3 -m venv .venv
$ source .venv/bin/activate
(.venv) $
Nach dem Login kopieren

Dann installieren Sie Django und erstellen Sie ein neues Projekt namens django_project.

(.venv) $ python -m pip install django
(.venv) $ django-admin startproject django_project .
Nach dem Login kopieren

Erstellen Sie über die Befehlszeile mit dem Befehl mkdir ein Vorlagenverzeichnis auf Projektebene.

(.venv) $ mkdir templates
Nach dem Login kopieren

Wir speichern unsere Vorlagen hier und nicht in jeder App. Allerdings müssen wir Django mitteilen, wo sie zu finden sind, indem wir die TEMPLATES-Konfiguration in Settings.py aktualisieren.

# django_project/settings.py
TEMPLATES = [
    {
        ...
        "DIRS": [BASE_DIR/"templates"],  # new
        ...
    }
]
Nach dem Login kopieren

Erstellen Sie eine templates/base.html-Datei.

<!-- templates/base.html -->
<h1>Hello, World</h1>
Nach dem Login kopieren

Wenn wir „django_project/urls.py“ geschickt verwenden, können wir die Ansicht und URLs in einer Datei zusammenfassen. Importieren Sie oben TemplateView und legen Sie dann einen Pfad fest, der auf die Vorlage verweist, base.html.

# django_project/urls.py
from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView  # new

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", TemplateView.as_view(template_name="base.html"),),  # new
]
Nach dem Login kopieren

Verwenden Sie den Befehl „runserver“, um zu bestätigen, dass die Homepage funktioniert.

(.venv) $ python manage.py runserver
Nach dem Login kopieren

Django Tailwind

Rückenwind-Konfiguration

Die Tailwind-Dokumente enthalten eine Installationsanleitung, der wir mit nur wenigen Änderungen folgen können. Öffnen Sie eine neue Terminalsitzung aus dem Projektverzeichnis: Letztendlich müssen zwei Sitzungen ausgeführt werden, eine mit unserem Django-Server und eine mit Node.

Stellen Sie im neuen Terminalfenster sicher, dass Node auf Ihrem Computer installiert ist. Sie können dies mit node-v überprüfen.

$ node -v
v20.17.0
Nach dem Login kopieren

Erstellen Sie eine package.json-Datei, um Node und Tailwind zusammen zu verwenden. Fügen Sie das Flag -y hinzu, um alle Standardeinstellungen mit „Ja“ zu bestätigen.

$ npm init -y
Nach dem Login kopieren

Dies ist die resultierende package.json-Datei.

{
  "name": "django-tailwind",
  "version": "1.0.0",
  "description": "How to configure Django and Tailwind from scratch in a new project.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
Nach dem Login kopieren

Tailwind über npm installieren.

$ npm install -D tailwindcss
Nach dem Login kopieren

Dadurch wird ein Verzeichnis „node_modules“ erstellt. Erstellen Sie als Nächstes eine tailwind.config.js-Datei.

$ npx tailwindcss init
Created Tailwind CSS config file: tailwind.config.js
Nach dem Login kopieren

Jetzt haben wir eine tailwind.config.js-Datei. Fügen Sie Pfade für unser Vorlagenverzeichnis hinzu.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./templates/**/"],  // updated line here!
  theme: {
    extend: {},
  },
  plugins: [],
}
Nach dem Login kopieren

Erstellen Sie im Django-Projekt ein statisches Verzeichnis und ein Unterverzeichnis namens src.

$ mkdir static
$ mkdir static/src
Nach dem Login kopieren

Wir müssen Django anweisen, hier nach Dateien zu suchen, indem wir die STATICFILES_DIRS-Konfiguration aktualisieren.

# settings.py
STATICFILES_DIRS = [BASE_DIR / "static",]  # new
Nach dem Login kopieren

Dann erstellen Sie eine neue CSS-Datei mit dem Namen static/src/styles.css und fügen Sie @tailwind-Anweisungen hinzu.

/* static/src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Nach dem Login kopieren

Der nächste Schritt besteht darin, den Tailwind CLI-Build-Prozess zu starten. Es durchsucht unsere Vorlagendateien nach Klassen und erstellt das erforderliche CSS. Wir haben die Pfade von der Tailwind-Website hier leicht geändert, sodass sie in der Datei src/styles.css angezeigt werden und in dist/styles.css ausgegeben werden.

$ npx tailwindcss -i ./static/src/styles.css -o ./static/dist/styles.css --watch
Nach dem Login kopieren

Um es auszuprobieren, aktualisieren Sie die Vorlagendatei base.html mit einigen Tailwind-Klassen. Es ist wichtig, oben das Load-Static-Tag hinzuzufügen und auch auf das neue Stylesheet zu verlinken. Dann fügen wir Grundklassen hinzu, um den Titel rot und den Text darunter blau zu machen.

<!-- templates/base.html -->
{% load static %}
<link href="{% static 'dist/styles.css' %}" rel="stylesheet">
<h1 class="text-red-600">Hello, World</h1>
<p class="text-blue-600">More text</p>
Nach dem Login kopieren

Aktualisieren Sie die Homepage gründlich.

Django Tailwind

Sie können die Aktualisierungen des Textes sehen, der darauf hinweist, dass Tailwind ordnungsgemäß installiert ist.

watch:css-Skript

Wir haben eine Grundinstallation in Betrieb, aber Sie werden bald feststellen, dass ein paar zusätzliche Funktionen die Dinge erheblich verbessern.

Erstens möchten wir uns nicht an den großen, langen Befehl erinnern, mit dem Node ausgeführt wird. Wir können es als Skript in die Datei package.json einfügen, das mit „watch:css“ beginnt.

// package.json
{
  "name": "django-tailwind",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch:css": "npx tailwindcss -i ./static/src/styles.css -o ./static/dist/styles.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "tailwindcss": "^3.4.10"
  }
}
Nach dem Login kopieren

Im Terminal, in dem Node ausgeführt wird, stoppen Sie es mit Strg+c. Geben Sie npm run watch:css ein und es sollte wie zuvor starten.

$ npm run watch:css
Nach dem Login kopieren

Aktualisieren Sie die Webseite, um sicherzustellen, dass alles weiterhin funktioniert.

Abschluss

Wie wir gesehen haben, funktioniert Tailwind gut mit Django. Für zusätzliche Extras schauen Sie sich django-browser-reload an, um Ihren Browser in der Entwicklung automatisch neu zu laden, sodass Sie nicht ständig harte Aktualisierungen durchführen müssen. Es gibt auch ein gut gepflegtes Drittanbieterpaket, django-tailwind, das einen weiteren Ansatz zur Integration von Tailwind in Django bietet.

Das obige ist der detaillierte Inhalt vonDjango Rückenwind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage