テンプレートの継承

2021年4月2日 21:26

今日は、『つくってマスターPython』の6-3 “Jinja2テンプレートの活用”で学んだことをアウトプットします。

複数ページからなるWebサイトを構築するとき、留意しなければならないのが「デザインの統一性」です。あらかじめ決まったレイアウトを作成し、それに沿ってすべてのページを用意することで統一性を出すことができます。

Jinja2では「テンプレートの継承」機能があります。これは、ベースとなるデザイン用テンプレートを用意し、それに各ページのテンプレートを当てはめるようにして表示を作成する機能です。

テンプレートを継承する

{% extends  ファイルパス  %}

これを記述すると、指定したファイルを読み込み利用するようになります。Webページの内容は、基本的に継承元のテンプレート（extendsで読み込んだもの）が用いられ、ベース・コンテンツを読み込む側では、ベースとなるテンプレートに当てはめるコンテンツのみを用意します。それぞれのページのコンテンツは「ブロック」と呼ばれるものとして用意されます。

{% block %}によるブロック表示

ブロックは、特定の位置にコンテンツを組み込む機能です。これは組み込む場所を示す部分と、組み込むコンテンツをそれぞれ用意します。

組み込む場所の指定

{% block  名前  %}
・・・・・ブロックが組み込まれないときの表示・・・・・
{% endblock %}

組み込むブロックの作成

{% block  名前  %}
・・・・・ブロックの表示内容・・・・・
{% endblock %}

ブロックを作成する場合も、用意したブロックを継承元のテンプレートに配置する場合も、どちらも{% block 名前 %}と{% endblock %}を使います。Jinja2では、{% extends %}で読み込んだ継承元のテンプレートにある{% block %}部分に、用意した{% block %}の内容をはめ込んで表示します。つまり、ベース・コンテンツを読み込んで利用する側では、そのテンプレートにあるブロック部分に組み込むコンテンツだけを用意すればいいのです。

簡単なテンプレートの継承のコード例

2つのテンプレートファイルを用意します。ベースとなる「layout.html」と、それを継承する「index.html」です。どちらも「templates」フォルダの中に配置します。

ベースとなるhtml(templates/layout.html

<!DOCTYPE html>
<html lang=ja dir="ltr">
 <head>
   <meta charset="utf-8">
   <title>{{title}}</title>
   <style>
     body {background-color: #eee;}
     p {font-size: 20pt;}
     .block {background-color: white; padding:10px;}
     tr th {padding:5px; background-color:black; color: white;}
     tr td {padding:5px; border:1px solid gray;}
   </style>
 </head>
 <body>
   <h1>{{title}}</h1>
   <div class="block">
     {% block content %}
     ※ブロックが読み込めません。
     {% endblock %}
   </div>
 </body>
</html>

layout.htmlを取り込むhtml(templates/index.html)

{% extends "layout.html" %}
{% block content %}
<table>
 <tr>
   <th>ID</th>
   <th>NAME</th>
   <th>MAIL</th>
 </tr>
{% for item in data %}
<tr>
 <td>{{item.id}}</td>
 <td>{{item.name}}</td>
 <td>{{item.mail}}</td>
</tr>
{% endfor %}
</table>
{% endblock %}

スクリーンショット 2021-03-13 070535

わかりやすいように、ページ全体の背景を淡いグレーに設定してあります。白い背景が、ブロックとして組み込んである部分です。{% block content %}というようにしてブロックを作成しています。index.html側の{% block content %}部分が、そのまま継承元であるlayout.htmlの{% block content %}部分にはめ込まれて表示されています。

サポート、本当にありがとうございます。サポートしていただいた金額は、知的サイドハッスルとして取り組んでいる、個人研究の費用に充てさせていただきますね♪