Erstellen einen statischen Ordner in Flask
Mit dieser Erklärung lernen wir, wie statische Assets oder statische Dateien im statischen Verzeichnis verwendet werden. Wir werden auch lernen, wie Sie unsere benutzerdefinierte CSS-Datei in Flask importieren.
Erstellen einen statischen Ordner in Flask
In einer Flask-App gibt es eine seltsame Art, Bilder anzuzeigen und in Ihre benutzerdefinierten CSS-Klassen zu laden und Ihr benutzerdefiniertes JavaScript zu verwenden. Also, lass uns weitermachen und loslegen.
Da wir bei Null anfangen, werden wir ein brandneues Projekt erstellen. Wir importieren einige Klassen aus Flask, schreiben das Modul in Kleinbuchstaben und erstellen dann ein App-Objekt.
from flask import Flask, render_template
app = Flask(__name__)
Wir werden eine grundlegende Homepage-Funktion namens index() erstellen. Wir werden die beiden Wurzeln in einzelnen Dekorateuren als '/home' und '/' setzen.
Der Zweck des Hinzufügens von zwei Wurzeln besteht darin, Ihnen zu zeigen, dass wir mehr als eine route() in einer einzigen Funktion verwenden können, was bedeutet, dass diese beiden verschiedenen Routen auf diese Funktion zugreifen können.
Wir werden das Schlüsselwort return verwenden, um render_template() zurückzugeben und die Datei home.html zu übergeben.
@app.route("/home")
@app.route("/")
def index():
return render_template("home.html")
Um unsere App auszuführen, müssen wir den folgenden Code verwenden.
Die Methode run() hilft beim Ausführen der Flask-App. Wir müssen debug gleich True übergeben, weil wir das Debugging sehen wollen, aber Sie können es ausschalten, indem Sie False schreiben, wenn Sie Ihre Site auf die Produktionsebene bringen.
if __name__ == "__main__":
app.run(debug=True)
Jetzt müssen wir einen Vorlagenordner einrichten, in dem wir alle unsere HTML-Dateien ablegen. Dazu erstellen wir einen neuen Ordner und nennen ihn templates. Dann müssen wir einen weiteren neuen Ordner erstellen, den wir statisch nennen.
Jetzt können wir vielleicht schon sagen, wo wir bestimmte Dateien ablegen werden. Wir gehen in den Ordner templates und erstellen eine neue Datei mit dem Namen base.html, und dann erstellen wir eine neue mit dem Namen home.html.
Lassen Sie uns einen sehr einfachen HTML-Code in die Datei base.html schreiben, und im head richten wir einen Blocktitel ein, und im body-Tag fügen wir einen weiteren Blockinhalt hinzu.
Die Flask-Anwendung legt einen Standardwert für alle unsere statischen Dateien fest, die im Ordner namens statisch gespeichert werden, was bedeutet, dass Sie diesen Ordner statisch machen müssen. Jetzt werden wir auf den spezifischen Dateinamen verweisen, den wir wollen; Wir übergeben {{ url_for('static',filename='style.css') }} an das Attribut href und setzen es in doppelte Anführungszeichen.
Auf diese Weise verwenden wir den Python-Code im link-Tag, um die URL für den statischen Ordner abzurufen, der uns die URL gibt, und geben dann den genauen Dateinamen an.
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='style.css') }}">
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Jetzt haben wir unsere base-Vorlage. Lassen Sie uns diese base-Vorlage mit dem {% extends 'base.html' %}-Jinja-Code in unserer home.html-Datei erweitern und einige Blöcke verwenden, um auf base.html-Elemente zuzugreifen.
{% extends 'base.html' %}
{% block title %}
Home Page
{% endblock %}
{% block content %}
<h1> Home Page</h1>
{% endblock %}
Jetzt werden wir über das Erstellen einer static Datei in unserem static Verzeichnis sprechen und wie wir unser benutzerdefiniertes CSS importieren können. Wir müssen eine neue CSS-Datei in unserem static Verzeichnis erstellen und sie style.css nennen; es ist egal, wie du es nennst.
Sie können den Dateinamen anstelle der Erweiterung ändern, aber stellen Sie sicher, dass Sie sich den Namen merken. Wir werden jetzt nur ein grundlegendes Styling in die Datei style.css schreiben, um es einfach zu halten.
Wir werden einen CSS-Selektor body setzen, die Eigenschaft color verwenden und dann den Farbwert crimson übergeben.
body {color: crimson;}
Und wir sind fertig. Jetzt können wir diese Anwendung ausführen.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/home")
@app.route("/")
def index():
return render_template("home.html")
if __name__ == "__main__":
app.run(debug=True)
Öffnen Sie nun einen Webbrowser und navigieren Sie zur Startseite mit einer Überschrift.
Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.
LinkedIn