Flaskのjinja2テンプレート

前回に作成したWebページより、HTMLを整理するためにjinja2テンプレートを使用します。

jinja2テンプレートとは、Flaskのデフォルトのテンプレートエンジンで、HTMLの中にPythonを埋め込むことができます。また、複数のHTMLファイルを使用する場合、同じようなタイトルを各ページに記載するのは手間がかかります。ここでは、各ページに継承できるように「base.html」を作成してきます。

今回対象となるファイルの配置は以下のようになります。


(1) base.html

全体の枠組みとして「base.html」を作成します。titleやbodyタグにある{& … &}はjinja2テンプレートにおいてのコマンドになります。{& block … &}と{& endblock … &}は、ブロックの開始と終了のペアで使用します。

 


(2) search.html

前回の「search.html」より、「base.html」の継承した記述に変更しました。尚、継承はextendsで行います(1行目)。「base.html」を継承する箇所は、{& block … &}{& endblock … &}を使用します。


(3) result.html

検索結果のHTMLページです。search.pyにあった<p>…</p>の箇所を移動して作成しています。


(4) search.py(一部抜粋)

「result.html」の作成に伴い、result関数のreturnの箇所をテンプレート「result.html」を呼び出すように修正しました。


■動作確認

・検索画面

・検索結果画面

「base.html」で作成した、titleタグの”商品検索システム”やbodyタグの”商品データベース”が各画面に継承されています。jinja2テンプレートを使用で少し整理されました。

 

以上です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です