【Django Templates】base.htmlの作成

Django

(最終更新月:2021年11月)

「HTMLの繰り返す記述を省略したい!」

「Python、Djangoらしい記述方法でWebアプリを作っていきたい!」

というDjango初学者の方へ向けての記事となります

当記事を通じて、

  • ベースとするHTMLファイルを作成
  • ブロックタグを配置する
  • extendsでベーステンプレートを継承する

方法を解説していきます

各HTMLを単独で記述していくとどうしても同じような記述を繰り返すことになります

当記事でベースとなるHTMLを作成しておけば今後の記述がグッと短くなりますので参考になれば幸いです

初期費用ゼロ/月9,800円でWebデザインが学べる

デザインを習得するためには、客観的なフィードバックと改善が不可欠です。

以下の記事ではこんなWebデザインスクールをご紹介しています。

  • 初期費用ゼロで、月々9,800円のみ
  • オンラインで、教材が使い放題
  • コンテストや実務案件にチャレンジして報酬もGETできる

デザナルはトップデザイナーからレビューがもらえる、格安のWebデザインスクールです。

>>デザナルに興味がある方はこちらからどうぞ<<

詳細をまとめた記事もございますので、ぜひご覧ください。

さいしょに

当記事では、別記事でご紹介した下記の2ファイルを使って解説を進めていきます

【nippo-list.html】

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>日報アプリ</title>
  </head>
  <body>
    <h1>こちらは日報アプリのページになります</h1>
  </body>
</html>

【nippo-detail.html】

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Views.pyからHTMLへ</title>
  </head>
  <body>
    <h1>今日のラッキーナンバーはこちら→ {{random_number}}</h1>
    <p>あなたの入力した数字は→ {{ number}} </p>
    <p> {{random_number}} + {{number}} = {{ random_number|add:number}}</p>
  </body>
</html>

下記のようにまとめると2つのファイルで共通している箇所、そうでない箇所がはっきり分かります

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>タイトルは各ページで異なります</title>
  </head>
  <body>
    コンテンツは各ページで異なります
  </body>
</html>

こちらを使い、ベーステンプレートを作成していきます

ベーステンプレートの作成

ベーステンプレートの名前、保存先は下記の通りとします

  • 【名前】base.html
  • 【場所】プロジェクトフォルダ > templates > base.html

当アプリ開発では、プロジェクトフォルダが「src」になりますので、下記のようになります

src > templates > base.html

前章のコードをコピペし、ブロックタグと呼ばれるものを配置していきます

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        {% block title %}{% endblock %}
    </title>
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

ブロックタグについては次章でご説明しています

ブロックタグ の配置

上記のテンプレートでは2箇所にブロックタグを配置しました

設置した箇所は

  1. title内
  2. body内

です

ブロックタグは、

{% block タグ名 %} {% endblock %}

で構成されています

コードで見てみると、

....
<title>{% block title %}{% endblock %}</title>
....
....
<body>
{% block content %}{% endblock %}

となります

対して、ベーステンプレートを継承したHTMLファイルでは、このブロックタグ内にそれぞれの記述を加えていきます

言葉だけではわかりにくいと思いますので、「継承」と「実際の記述」について一緒に見ていきましょう

ベーステンプレートの継承「extends」

HTMLの継承を「extendsタグ」で行います

{% extends 継承元のHTMLファイル名 %}

により、base.htmlから内容を継承することを宣言します

それぞれのファイルでベーステンプレートを継承して、ブロックタグでページ特有のコードを記述していきます

【nippo-list.html】

{% extends "base.html" %}

{% block title %}日報アプリ{% endblock %}

{% block content %}
  <h1>こちらは日報アプリのページになります</h1>
  <p>ブロッックタグを使って表示してます</p>
{% endblock %}

【nippo-detail.html】

{% extends "base.html" %}

{% block title %}ブロックタグで表示{% endblock %}

{% block content %}
    <h1>今日のラッキーナンバーはこちら→ {{random_number}}</h1>
    <p>あなたの入力した数字は→ {{ number}} </p>
    <p> {{random_number}} + {{number}} = {{ random_number|add:number}}</p>
{% endblock %}

抜粋すると、

  • 継承」→ {% extends “base.html” %}
  • ブロックタグ内へ記述」→ {% block title %} 日報アプリ {% endblock %}

などとなっています

nippo-list.htmlのビフォーアフターは↓の通りです】

【継承前】

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>日報アプリ</title>
  </head>
  <body>
    <h1>こちらは日報アプリのページになります</h1>
  </body>
</html>

【継承後】

{% extends "base.html "%}

{% block title %}日報アプリ{% endblock %}

{% block content %}
  <h1>こちらは日報アプリのページになります</h1>
  <p>ブロッックタグを使って表示してます</p>
{% endblock %}

随分とスッキリしました!

ただ、今後アプリ開発を進めていくにあたり、ベーステンプレートにBootstrapのCDNを追加しておきましょう

【参考】ベーステンプレートのテンプレート

今後のアプリ開発は下記のベーステンプレートで進めていきます

Bootstrapのスターターテンプレートを元に作成してます

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

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

  </head>
  <body>

    {% block content %}{% endblock %}

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  </body>
</html>

※Bootstrapの公式ドキュメントはこちらです↓

Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

もしくはご自身で使いたいものがあれば、お好きに変更していただいて構いません!

まとめ

当記事を通じて、

  1. ベーステンプレートの作成方法
  2. ブロックタグについて
  3. テンプレートの継承と実際のコード

を解説させていただきました

なかなか文章だけで理解するのも難しいと思います

現段階では、

  • ベーステンプレートには、{% block タグ名 %}を使うこと
  • 表示したいページでは、ベーステンプレートを継承(extends)すること

という2点を頭に入れておきましょう

次回の記事では、テンプレートでフォームを表示、作成したフォームから値を受け取る方法をお伝えします

当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています

「Djangoでのアプリ開発を学びたい!」
「Djangoで開発したアプリをWebで公開するにはどうするの?」

という方は必見です!

【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!
タイトルとURLをコピーしました