HTML 共通テンプレートを作成する（HTMLで変数、if文、for文の使い方）
はじめに
Pythonのjinja2モジュールの使います。（HTMLだけでは機能しません）
PythonのFlaskでWebサイトを作る時に、複数のページで同じ内容（ヘッダーやフッターなど）を利用することが多いです。jinja2モジュールを使って共通テンプレートを作成しておくと、複数のページからテンプレートを呼び出して使えるので便利です。また、jinja2を利用してPythonでの変数をHTMLに読み込む方法も解説していきます。
jinja2での共通テンプレートの使い方
{% extends "ファイル名" %}
ベース（基本）となる「HTMLファイル」で共通テンプレート（ヘッダーやフッターの部分など）を作成します。その中の{% block 変数名 %}{% endblock %}の部分をテンプレートを継承する「HTMLファイル」に記述します。
わかりにくいと思うので実例をあげておきます。
base.html（共有テンプレート）
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="/static/base.css">
<body>
<header>
<h2>レイルーク＠ふたり暮らし</h2>
</header>
{% block body %}{% endblock %}
<footer>
<ul>
<li>ホーム</li>
<li>検 索</li>
<li><a href="/blog/create">新規作成</a></li>
<li><a href="/blog/logout">ログアウト</a></li>
</ul>
<span id="copy">(c)2020 ふたり暮らし</span>
</footer>
</body>
index.html
{% extends "base.html" %}
{% block body %}
<link rel="stylesheet" type="text/css" href="/static/index.css">
<title>インデックス画面</title>
<div id="main">
<div class="table">
<h3>サンプル１</h3>
<h3>タイトル</h3>
<p><img src="/static/images/sample1.jpeg"></p>
<p>本文</p>
<div class="time" id="time1"></div>
</div>
<div class="table">
<h3>サンプル２</h3>
<h3>タイトル</h3>
<p><img src="/static/images/sample2.jpeg"></p>
<p>本文</p>
<div class="time" id="time2"></div>
</div>
</div>
{% endblock %}
CSSファイルはそれぞれで指定できます。
共通連プレートの{% block 変数名 %}{% endblock %}部分に、メインHTMLファイルの{% block 変数名 %}{% endblock %}の間に記述します。
{% block 変数a %}{% endblock %}
{% block 変数b %}{% endblock %}
{% block 変数c %}{% endblock %}
と複数作成も可能です。
また「pyファイル」から変数を使って「HTMLファイル」で読み込むこともできます。
jinja2での変数、if文、for文の使い方
変数を「pyファイル」でこのように指定すると
name = "ユーザー名"
return render_template("index.html",name=name)
HTML側に送ることができます。
「HTMLファイル」でこのように変数を表示できます。
<title>{{name}}</title>
HTMLファイルでif文を使う
{% if name == "" %}
<h1>ゲスト</h1>
{% elif name %}
<h1>{{name}}</h1>
{% else %}
<h1>ログインしてください</h1>
{% endif %}
このように{% %}の中でPythonコードを使うことができます。
HTMLファイルでfor文を使う
例えば、pyファイルのテーブル全て読み込んでHTMLファイルでfor文を使って１テーブルずつ読み込みます。
{% for table in all_table %}
<h3>{{table.title}}</h3>
<p><img src={{table.image_name}}></p>
<p>{{comment}}</p>
<div class="time">{table.date}}</div>
{% endfor %}
まとめ
index.html「{% extends "base.html" %}でテンプレートファイルの内容を呼び出して、新しく表示したい部分を{% block body %}~{% endblock %}で囲むことでテンプレートファイルにある{% block body %}{% endblock %}の部分に表示される」うーん、分かりづらいですね。理解するとそんなに難しいことではないのですが、実際にやってみないと説明を見ただけでは理解しにくいと思います。
↓よかったらポチッとしていってください。
