Das Styling einer Flask-Anwendung

Einführung

In diesem Lab werden wir lernen, wie wir CSS zu unserer Flask-Anwendung hinzufügen, um sie visuell ansprechend zu gestalten. Wir werden statische Dateien, speziell eine CSS-Datei, verwenden, um unsere Anwendung zu stylen. Statische Dateien sind Dateien, die sich nicht ändern, wie CSS-Dateien, JavaScript-Dateien und Bilder.

Hinweis: Sie müssen die Code-Datei selbst erstellen und sie in der Umgebung ausführen. Sie können den Status des Flask-Diensts auf Web 5000 voranschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL flask(("Flask")) -.-> flask/DataHandlingGroup(["Data Handling"]) flask(("Flask")) -.-> flask/CoreConceptsGroup(["Core Concepts"]) flask/DataHandlingGroup -.-> flask/incoming_request_data("Incoming Request Data") flask/DataHandlingGroup -.-> flask/response_objects("Response Objects") flask/CoreConceptsGroup -.-> flask/application_object("Application Object") flask/CoreConceptsGroup -.-> flask/useful_internals("Useful Internals") subgraph Lab Skills flask/incoming_request_data -.-> lab-136339{{"Das Styling einer Flask-Anwendung"}} flask/response_objects -.-> lab-136339{{"Das Styling einer Flask-Anwendung"}} flask/application_object -.-> lab-136339{{"Das Styling einer Flask-Anwendung"}} flask/useful_internals -.-> lab-136339{{"Das Styling einer Flask-Anwendung"}} end

CSS-Datei erstellen

Zunächst müssen wir eine CSS-Datei erstellen, in der unsere Stile gespeichert werden. In Flask werden statische Dateien in einem Verzeichnis namens static gespeichert. Lassen Sie uns eine CSS-Datei namens style.css im Verzeichnis flaskr/static erstellen.

## Wechseln Sie in das statische Verzeichnis
cd flaskr/static

## Erstellen Sie die style.css-Datei
touch style.css

CSS-Regeln hinzufügen

Als nächstes kopieren Sie die folgenden CSS-Regeln in die Datei style.css. Diese Regeln werden verschiedene HTML-Elemente in unserer Anwendung stylen.

/* flaskr/static/style.css */

html {
  font-family: sans-serif;
  background: #eee;
  padding: 1rem;
}
body {
  max-width: 960px;
  margin: 0 auto;
  background: white;
}
/* Weitere CSS-Regeln... */

CSS-Datei in HTML verknüpfen

Jetzt müssen wir unsere CSS-Datei in den HTML-Vorlagen verknüpfen. Flask fügt automatisch eine static-Ansicht hinzu, die statische Dateien bereitstellt. Wir können die url_for-Funktion im base.html-Template verwenden, um unsere CSS-Datei zu verknüpfen.

<!-- base.html -->

{{ url_for('static', filename='style.css') }}

Änderungen überprüfen

Um die Änderungen zu überprüfen, starten Sie Ihre Flask-Anwendung und navigieren Sie zur Anmeldeseite unter http://127.0.0.1:5000/auth/login. Die Seite sollte jetzt gemäß den Regeln in der Datei style.css gestaltet sein.

Zusammenfassung

In diesem Lab haben wir gelernt, wie wir unseren Flask-Anwendung Stile hinzufügen, indem wir eine CSS-Datei verwenden. Wir haben eine CSS-Datei erstellt, einige CSS-Regeln hinzugefügt und anschließend die CSS-Datei in unseren HTML-Vorlagen mithilfe der url_for-Funktion von Flask verknüpft. Jetzt sieht unsere Flask-Anwendung visuell viel attraktiver aus. Denken Sie daran, dass Sie möglicherweise die Browserseite aktualisieren oder den Browser-Cache leeren müssen, um Änderungen an einer statischen Datei zu sehen.