Flask で静的フォルダを作成する
![Flask で静的フォルダを作成する](/img/Python-Flask/feature-image---flask-static-folder.webp)
この説明では、静的ディレクトリ内で静的アセットまたは静的ファイルを使用する方法を学習します。また、カスタム 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