Django マスターページ
extendsタグ
前のページでは、2つのテンプレートを作成しました。1つは全てのメンバーをリストにするためページで、もう1つはメンバーに関する詳細のためのページです。
テンプレートには、両方のテンプレートで同じ一連のHTMLコードがあります。
Djangoは、全てのページで同じことを行うために、ページに含めることができるよう「親テンプレート」を作成する方法があります。
master.html
まず、必要なHTML要素をすべて備えたテンプレートを作成します。
マスター
my_tennis_club/members/templates/master.html
:
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
<title>
要素と<body>
要素内にブロックタグ(%)があることを確認してください。
これらはプレースホルダーであり、このブロックを他のソースのコンテンツに置き換えるようDjangoに指示します。
テンプレートの変更
これで、2つのテンプレート(all_members.html
とdetails.html
)がこのmaster.html
テンプレートで使用できるようになります。
これを行うには、マスターテンプレートを{% extends %}
タグとともに組み込み、title
ブロックとcontent
ブロックを挿入します。
メンバー
my_tennis_club/members/templates/all_members.html
:
{% extends "master.html" %}
{% block title %}
My Tennis Club - List of all members
{% endblock %}
{% block content %}
<h1>Members</h1>
<ul>
{% for x in mymembers %}
<li><a href="details/{{ x.id }}">{{ x.firstname }} {{ x.lastname }}</a></li>
{% endfor %}
</ul>
{% endblock %}
詳細
my_tennis_club/members/templates/details.html
:
{% extends "master.html" %}
{% block title %}
Details about {{ mymember.firstname }} {{ mymember.lastname }}
{% endblock %}
{% block content %}
<h1>{{ mymember.firstname }} {{ mymember.lastname }}</h1>
<p>Phone {{ mymember.phone }}</p>
<p>Member since: {{ mymember.joined_date }}</p>
<p>Back to<a href="/members">Members</a></p>
{% endblock %}
すべての手順を実行し、ブラウザーで127.0.0.1:8000/members/
と入力すると結果を確認できます。
サーバーがダウンしている場合は、runserver
コマンドを使用してサーバーを再起動する必要があります。
py manage.py runserver
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。