Webサイトを作る時って、画面上部にはサイトの名前があって、画面下部にはサイトの情報があったりと、どの画面にも共通する情報が載ってたりしますよね。
まさかその共通の情報を全てのHTMLに書く人はいないですよね。ちなみに僕は開発の仕事を始める前まで全ファイルに書くものだと思っていました。。。
さて、Djangoの画面側を触るに当たってまず、共通ファイルを作り、そのファイルを各Viewファイルで呼び出して使う方法をまとめていこうと思います。
共通ファイル base.htmlを作る
サンプルとして↓を用意しました。あなたのappのtemplatesディレクトリ配下に新しく `base.html`という名前でファイルを作成し、下記を貼り付けてください。
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<h1>このサイトの名前</h1>
<div id="main-content">{% block content %}{% endblock %}</div>
</body>
</html>呼び出し元のファイルを作る
では、 `base.html`を呼び出す側のファイルを作っていきます。
下記の内容を、 `templates`配下のファイルに貼り付けてください。
{% extends "base.html" %}
{% block title %}タイトルだよ{% endblock %}
{% block content %}
<p>Good morning!</p>
{% endblock %}見た目はこうなります
説明
さて、もうお分かりの方もいるかと思います。
{% block title %}{% endblock %}
base.htmlのこの部分には、呼び出し元の
{% block title %}タイトルだよ{% endblock %}の内容が適用されます。
{% block content %}{% endblock %}
base.htmlのこの部分には、呼び出し元の
{% block content %}
<p>Good morning!</p>
{% endblock %}の内容が適用されます。
