◀ 3.

djangoのテンプレートの作成とヘッダー・フッターの共通化

▶

編集

ページの作成

テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例：親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例：親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

テンプレート

テンプレートの基本

アプリケーションディレクトリ直下にtemplatesディレクトリを作成しましょう。

templatesディレクトリ内に以下のindex.htmlを作成します。

{% if item_list %}

<ul>

{% for item in item_list %}

{% endfor %}

</ul>

{% else %}

{% endif %}

templateに値を渡すviewを作成しましょう。

アプリケーションディレクトリ直下のviews.pyに以下の記述をしましょう。

from django.shortcuts import render

def index(request):

item_list = ['a', 'b', 'c']

template = loader.get_template('index.html')

context = {

'item_list': item_list,

}

return render(request, 'index.html', context)

indexにリクエストするとテンプレートを表示することが出来ます。

テンプレートの共通化

ヘッダーやフッターといったテンプレートの共通部分を実装するには以下のようにします。

以下、共通部分となるbase.htmlです。

<!DOCTYPE html>

<head>

<title>{% block title %}{% endblock title %}</title>

</head>

<body>

{% block content %}

{% endblock %}

</body>

</html>

独自実装の部分は

{% block content %}

{% endblock %}

となります。

{% block title %}{% endblock title %}

は後述します。

以下、独自実装部分のテンプレートです。

{% extends "base.html" %}

{% block title %}ページタイトル{% endblock title %}

{% block content %}

{% csrf_token %}

...

</form>

{% endblock %}

extendsで共通テンプレートを読み込んでblock content内に独自実装部分を記載します。

ページごとにタイトルを変える必要があるので、block titleに対してページのタイトルを設定しましょう。

includeを使用することで個別にテンプレートを読み込むことが出来ます。

例えば以下の様にヘッドタグを部品化しましょう。

<head>

{% include "headtag.html" %}

<title>{% block title %}{% endblock title %}</title>

</head>

以下、headtag.htmlの記載例。

{% load static %}

<link href="{% static 'css/app.css' %}" rel="stylesheet">

<script type="text/javascript" src="{% static 'js/jquery-3.2.1.min.js' %}"></script>

子ページ

子ページはありません

同階層のページ

Templateの使用準備

Templateの定義方法

テンプレートの作成と共通化

setting.pyにおけるテンプレートの設定

過去バージョン

過去バージョン: 9

ページ更新者: T

更新日時: 2018-12-14 12:40:28

ページ名: テンプレートの作成と共通化