今、ローカルの仮想環境でWEBアプリ作成を進めています。
前々回、「Flask」の「Jinja2」というテンプレートエンジン使ってテンプレートファイルの内容を表示してみました。
テンプレートファイルには、htmlファイル「index.html」とcssファイル「index.css」を使用。
これらを「main.py」で呼び出して、サーバー側で新たに HTMLコードを生成（レンダリング）しました。
下の画像ように、表示される状態です。（前々回の記事は→こちら）
テンプレートエンジンは、データとテンプレートを組み合わせて文字列を作成するフレームワークで、動的なコンテンツの生成ができるようですが、まだ、テンプレートとなる元のhtmlファイルが持っている情報を表示させただけで、組み合わせるデータは送っていない状態です。
そこで、テンプレートのHTMLファイルにデータを送って組み合わせた内容を表示してみたいと思います。
今回の実施内容
今回実施することは2つあります。
①HTMLファイルに、データを組み合わせて表示
②レイアウトテンプレートの作成
一つ目は、前述の通りで、
二つ目は、
テンプレートとなるHTMLファイルのヘッダー部分などの共通部分をレイアウトとして切り出して、レイアウトテンプレートとして、共通化するというものです。
①②を実施するために
既に作成済の次の二つのファイルを修正します。
「index.html」
「main.py」
そして新たにファイルを一つ作成し、ファイル名を「layout.html」として、プロジェクトに追加します。
ファイルとフォルダの構成は、下図のようになります。
C:\Py\Project\MyPj\FlaskPj\
|--templates\
| |--index.html ★修正
| |--layout.html ★追加
|--static\
| |--index.css
|--main.py ★修正
HTMLファイルに、データを組み合わせて表示
まず、データをhtmlファイルに引き渡す部分です。
(1)辞書データを定義し、そのデータを(2)return render_templateでindex.htmlファイルに送ってやります。
main.pyファイルに修正を施しました。
★印が追記、修正箇所です。
main.py
@app.route('/index')
def index():
# ★（１）追記
insert_dict = {
'insert_1': 'insert_1部分です。',
'insert_2': 'insert_2部分です。',
}
# ★（２）修正 return render_template('index.html', title='Webアプリテスト', insert_dict=insert_dict)
次にテンプレートの「index.html」ファイルを修正します。
main.pyファイルから受け取った辞書データをテンプレートの組み合わせたい場所に{{ }}で囲って配置します。
index.html
<h1>index.html表示</h1>
<p>{{ insert_dict.insert_1 }}</p>
<p>{{ insert_dict.insert_2 }}</p>
更に、各ページで共通する部分、たとえば、headタグ等のレイアウトを定義している部分を抜き出して新たに作成するレイアウトテンプレートに移植します。
そのため、「index.html」ファイルからは上図で表示されている部分以外は全て削除します。
レイアウトテンプレートの作成
レイアウトテンプレートとなる「layout.html」ファイルを作成します。
このファイルには「index.html」ファイルで削除した部分を移植します。
具体的には下図のようになります。
layout.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<!-- index.cssへのリンク -->
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='index.css') }}">
</head>
<body>
{% block content %}
<!-- ここに「index.html」の内容が取り込まれる -->
{% endblock %}
</body>
</html>
</html>
そして、bodyタグ内に
{% block content %}
{% endblock %}
と記述しておきます。
この記述をしておくことで、テンプレートエンジンが、この部分に「index.html」ファイルの内容を組み合わせてくれます。
また、タイトルは、各ページで異なるため、titleタグの間を
{{ title }}
としておきます。
先程は説明していませんでしたが
main.pyのreturn render_templateで
titleの情報も送っておくと、ここで引数を受け取って組み合わせてくれます。
あとは、もう一度「index.html」ファイルを開いて、
ファイルの冒頭部分に
{% extends "layout.html" %}
{% block content %}
ファイルの最後に、
{% endblock %}
と記述を追加しておきます。
index.html
{% extends "layout.html" %}
{% block content %}
<h1>index.html表示</h1>
<p>{{ insert_dict.insert_1 }}</p>
<p>{{ insert_dict.insert_2 }}</p>
{% endblock %}
これでレイアウトテンプレートである「layout.html」ファイルとこのファイルが組み合わされます。
余談ですが、
VSCodeを使っていれば、「SHIFT 」キー +「 ALT」キー+「 F」キーを同時押しすれば、htmlファイルの体裁を整えてくれます。
結果
http://127.0.0.1:5000/index
として表示すると、このように表示されました。
おわりに
以上、今回は、テンプレートにデータを送ってテンプレートエンジンで組み合わせたコンテンツをローカルの仮想環境で表示してみました。
まだまだ、テスト段階で実用的なアプリになっていませんが、テンプレートエンジンの使い方を少しずつ理解していきたいと思います。
今回使用したプログラムのソースコードをご覧になりたい場合は、こちらをご覧ください（→参照）
main.py 最新版 2024/12/7
layout.html最新版 2024/12/7
index.html 最新版 2024/12/7
index.css 最新版 2024/12/3
0 件のコメント:
コメントを投稿