◀ 3.

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

▶
編集
この記事の要点
  • Django のテンプレート（templates フォルダ）作成と共通化方法
  • 基本: アプリディレクトリ直下に templates/ を作成 → index.html 等を配置
  • 共通化は {% extends %} + {% block %} でレイアウト継承
  • ヘッダ/フッタを共通化することで保守性が大きく上がる

 

テンプレートの基本

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

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

{% if item_list %}

   

        {% for item in item_list %}

           

  • {{ item }}

    •     {% endfor %}

       

{% else %}

   

No item.

{% 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>

<html lang="ja">

        <head>

                <meta charset="UTF-8">

                </span><span style="color:#f1c40f">{% block title %}{% endblock title %}</span><span style="color:#ffffff">

        </head>

        <body>

                {% block content %}

                {% endblock %}

        </body>

</html>

 

独自実装の部分は

        {% block content %}

        {% endblock %}

となります。

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

は後述します。

 

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

{% extends "base.html" %}

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

{% block content %}

    <form method="post">

        {% csrf_token %}

        ...

    </form>

{% endblock %}

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

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

 

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

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

<head>

        {% include "headtag.html" %}

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

</head>

以下、headtag.htmlの記載例。

{% load static %}

<meta charset="UTF-8">


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


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

 

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. Templateの使用準備
  2. Template の定義方法
  3. テンプレートの作成と共通化
  4. setting.pyにおけるテンプレートの設定
  5. テンプレートの名前の重複について
  6. 静的ファイルの読み込み
  7. if文
  8. テンプレートで定数を使用する方法
  9. aタグのhrefの記載方法
2026-08-07 10:00:15 T 4680

人気ページ

最近更新/作成されたページ