TECH I.S.

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.htmldetails.html)がこのmaster.htmlテンプレートで使用できるようになります。

これを行うには、マスターテンプレートを{% extends %}タグとともに組み込み、titleブロックとcontentブロックを挿入します。

メンバー

my_tennis_club/members/templates/all_members.html:
{% extends &quot;master.html&quot; %} {% 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 &quot;master.html&quot; %} {% 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


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細