Flask で静的フォルダを作成する
この説明では、静的ディレクトリ内で静的アセットまたは静的ファイルを使用する方法を学習します。また、カスタム CSS ファイルを Flask にインポートする方法についても学習します。
Flask で静的フォルダを作成する
Flask アプリでは、画像を表示してカスタム CSS クラスにロードし、カスタム JavaScript を使用するという奇妙な方法があります。それでは、先に進んで始めましょう。
ゼロから始めているので、まったく新しいプロジェクトを作成します。Flask からいくつかのクラスをインポートし、モジュールを小文字で記述してから、アプリオブジェクトを作成します。
from flask import Flask, render_template
app = Flask(__name__)
index() と呼ばれる基本的なホームページ関数を作成します。個々のデコレータの 2つのルーツを'/home'と'/'として設定します。
2つのルートを追加する目的は、1つの関数で複数の route() を使用できることを示すことです。つまり、これらの異なるルートの両方がこの関数にアクセスできます。
return キーワードを使用して render_template() を返し、home.html ファイルを渡します。
@app.route("/home")
@app.route("/")
def index():
return render_template("home.html")
アプリを実行するには、以下のコードを使用する必要があります。
run() メソッドは、Flask アプリの実行に役立ちます。デバッグを確認したいので、debug は True に等しいものを渡す必要がありますが、サイトを本番レベルに持ってくるときに False と書くことでオフにできます。
if __name__ == "__main__":
app.run(debug=True)
次に、すべての HTML ファイルを配置するテンプレートフォルダーを設定する必要があります。そのために、新しいフォルダを作成し、それを templates と呼びます。次に、static と呼ばれる別の新しいフォルダを作成する必要があります。
これで、特定のファイルをどこに配置するかがすでにわかる場合があります。templates フォルダー内に移動し、base.html という名前の新しいファイルを作成してから、home.html という名前の新しいファイルを作成します。
base.html ファイル内に非常に基本的な HTML コードを記述し、head にブロックタイトルを設定し、body タグ内に別のブロックコンテンツを追加します。
Flask アプリケーションは、すべての static ファイルのデフォルトを設定します。これは static というフォルダーに保存されます。つまり、このフォルダーを静的にする必要があります。ここで、必要な特定のファイル名を参照します。 {{ url_for('static',filename='style.css') }} を href 属性に渡し、二重引用符で囲みます。
このように、link タグの Python コードを使用して、static フォルダーの URL を取得します。これにより、URL が提供され、正確なファイル名が指定されます。
<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>
これで、base テンプレートができました。home.html ファイル内の {% extends 'base.html' %} jinja コードを使用してこの base テンプレートを拡張し、いくつかのブロックを使用して base.html 要素にアクセスしてみましょう。
{% extends 'base.html' %}
{% block title %}
Home Page
{% endblock %}
{% block content %}
<h1> Home Page</h1>
{% endblock %}
次に、static ディレクトリ内に static ファイルを作成する方法と、カスタム CSS をインポートする方法について説明します。static ディレクトリ内に新しい CSS ファイルを作成し、それを style.css と呼ぶ必要があります。あなたがそれを何と呼ぶかは問題ではありません。
拡張子の代わりにファイル名を変更できますが、名前を覚えておいてください。シンプルにするために、style.css ファイル内に基本的なスタイルを記述します。
CSS の body セレクターを設定し、color プロパティを使用してから、crimson の色の値を渡します。
body {color: crimson;}
そして、これで完了です。これで、このアプリケーションを実行できます。
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)
次に、Web ブラウザーを開き、見出しのあるホームページに移動します。
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