今回は、すべてのページの雛形となるページを作って、メニューによって中のコンテンツを変えるやり方について見ていきます。
一般的なWebサイトでは、ヘッダー部分やナビゲーションバーなどページによって変わらない共通部分があります。すべてのページでそれぞれ作成することもできますが、冗長ですし、この部分を修正したい場合、全部のページを編集する必要が出てきます。
こういった要素を共通部品として切り出して使う方法について紹介します。
Python Django templateを使う編 Part1まで終わっている前提で同じプロジェクトを使って行きます。まだの方は、こちらへ
共通部品を作成する
この段階でのフォルダ構成はこんな感じです。
.
├── app_name
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-36.pyc
│ │ ├── admin.cpython-36.pyc
│ │ ├── models.cpython-36.pyc
│ │ ├── urls.cpython-36.pyc
│ │ └── views.cpython-36.pyc
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ ├── __init__.py
│ │ └── __pycache__
│ │ └── __init__.cpython-36.pyc
│ ├── models.py
│ ├── templates
│ │ └── app_name
│ │ └── index.html
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── db.sqlite3
├── manage.py
└── project_name
├── __init__.py
├── __pycache__
│ ├── __init__.cpython-36.pyc
│ ├── settings.cpython-36.pyc
│ ├── urls.cpython-36.pyc
│ └── wsgi.cpython-36.pyc
├── asgi.py
├── settings.py
├── urls.py
└── wsgi.pyまず、すべてのページの雛形となるページbase.htmlを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>もともとのindex.htmlファイルで、bodyタグの中身を修正しています。
{% block content %}{% endblock %}となっていますね。
この部分が、サイト内のメニューによって表示内容を切り替えたい部分を表しています。
Part1と同じ内容を表示したい場合、index.htmlをこんな感じに書き換えます。
{% extends 'app_name/base.html' %}
{% block content %}
{{ message }}
{% endblock %}{% extends 'app_name/base.html' %}の部分は、base.htmlファイルを雛形として使いますよということを意味しています。
{% block content %}から{% endblock %}で囲まれた部分が、base.htmlの同じ部分に展開されます。ちなみに、contentの部分は、自分で自由に変更することができます。
では、開発用サーバーを起動して内容を確認してみましょう。
さきほどと変わりませんね。
ほんとに変わっているか確認するために、base.htmlファイルとindex.htmlファイルを以下のように変更してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<p>共通部分です</p>
{% block content %}
{% endblock %}
</body>
</html>{% extends 'app_name/base.html' %}
{% block content %}
<p>ここから、index.htmlで指定しています。</p>
{{ message }}
<p>ここまで、index.htmlで指定しています。</p>
{% endblock %}
<p>ここは、blockの外です。</p>サイトにアクセスすると、以下のようになっていると思います。
ちゃんと動作していますね。
index.htmlで、{% block content %}から{% endblock %}の外に書いた部分は表示されていません。
さらに、head部分やbody部分など別ファイルとして切り出すこともできます。
<!DOCTYPE html>
<html lang="ja">
{% include 'app_name/head.html' %}
<body>
<p>共通部分です</p>
{% block content %}
{% endblock %}
</body>
</html><head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>base.htmlでは、切り出したhead部分を{% include ‘app_name/head.html’ %}で置き換えています。見てのとおりです、この部分をhead.htmlの内容に置き換えますよという意味です。
ページを確認してみると、先ほどと同じ見た目になっていることがわかります。
こんな感じで、htmlファイルを意味のある要素ごとに分けて利用することができます。
次回は、cssファイルを利用する方法について説明します。
コメント