(最終更新月:2021年11月)
「HTMLの繰り返す記述を省略したい!」
「Python、Djangoらしい記述方法でWebアプリを作っていきたい!」
というDjango初学者の方へ向けての記事となります
当記事を通じて、
- ベースとするHTMLファイルを作成
- ブロックタグを配置する
- extendsでベーステンプレートを継承する
方法を解説していきます
各HTMLを単独で記述していくとどうしても同じような記述を繰り返すことになります
当記事でベースとなるHTMLを作成しておけば今後の記述がグッと短くなりますので参考になれば幸いです
✔YouTube解説動画
当記事の内容は動画を見ながら進めると、約15分程度で完了します。
動画ならではの情報も解説しているので、記事と一緒にご覧ください。
動画の概要欄には、単元ごとのコードを紹介しているgithubページも載せています。
さいしょに
当記事では、別記事でご紹介した下記の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箇所にブロックタグを配置しました
設置した箇所は
- title内
- 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の公式ドキュメントはこちらです↓
もしくはご自身で使いたいものがあれば、お好きに変更していただいて構いません!
まとめ
当記事を通じて、
- ベーステンプレートの作成方法
- ブロックタグについて
- テンプレートの継承と実際のコード
を解説させていただきました
なかなか文章だけで理解するのも難しいと思います
現段階では、
- ベーステンプレートには、{% block タグ名 %}を使うこと
- 表示したいページでは、ベーステンプレートを継承(extends)すること
という2点を頭に入れておきましょう
次回の記事では、テンプレートでフォームを表示、作成したフォームから値を受け取る方法をお伝えします