こんにちは!ゆーや(@yuyamanm118712)です。
Djangoを使ってウェブアプリケーションを開発する際、複数のページに共通する部分が多々あります。例えば、ヘッダー、フッター、ナビゲーションバーなどが挙げられます。これらを各ページに直接書くのは非効率ですし、メンテナンス性も低下します。そこで、Djangoではベーステンプレート(base template)を作成し、共通部分を一元管理することで、この問題を解決できます。
この記事では、ベーステンプレートの作成方法と、それを活用して効率的にページを構築する方法について解説します。
ベーステンプレートの作り方と利用方法
ベーステンプレート作成方法
まず、ページに共通する部分を1つのhtmlファイルとして記載します!
ここでは、templates/base配下にbase.htmlを作成します!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}-Django App</title>
</head>
<body>
<h1>{% block pageTitle %}{% endblock %}</h1>
<div>
{% block contents %}{% endblock %}
</div>
</body>
</html>
ポイントは以下の2点です!
①基本的な書き方はhtmlと同じ
②ページごとに表示を変えたい部分は {% block {名前} %}として枠を作っておく。
ここでは、head内の「title」とbody内の「pageTitle」「contents」の
3つを枠として準備しているよ!
ベーステンプレートを利用した子ページの作成
templates配下に以下のようなindex.htmlを作成します!
{% extends './base/base.html' %}
{% block title %}トップページ{% endblock %}
{% block pageTitle%}トップページ{% endblock %}
{% block contents%}
<table border="1">
<tr>
<td>テキスト</td>
<td>True/False</td>
<td>整数</td>
<td>日時</td>
</tr>
<!-- for文で「records」を回す -->
{% for record in records %}
<tr>
<!-- models.pyで定めた各フィールドにアクセス -->
<td>{{record.text_field}}</td>
<td>{{record.boolean_field}}</td>
<td>{{record.integer_field}}</td>
<td>{{record.datetime_field}}</td>
</tr>
{% endfor %}
</table>
{% endblock %}
開発サーバを起動し、index.htmlを表示してみると
ポイントは以下の2点です!
①まず、ベーステンプレートを読み込む
②ベーステンプレートの枠に入れる値を書く
今回contentsの中身はデータベースから値を取得しています!
好きなように編集してみてね!
もし、データベースから値を取得してみたい人は、以下の記事を見てみてね!
ベーステンプレート活用のメリット
- コードの再利用性が向上: 一度共通部分を作成すれば、他のページでも簡単に再利用できます。
- メンテナンスが容易: 例えば、ヘッダーやフッターの内容を変更したい場合、
base.html
の一箇所を変更するだけで済みます。 - 一貫性のあるデザイン: ベーステンプレートを使用することで、サイト全体で一貫性のあるデザインを維持できます。
使いこなせれば、開発速度は爆上がりします!
まとめ
Djangoのベーステンプレートを利用することで、ウェブサイトの共通部分を効率的に管理でき、開発作業のスピードアップやメンテナンス性の向上が図れます!ぜひ、自分のプロジェクトにもベーステンプレートを導入して、より良いDjango開発を実現してください。!
この記事が皆さんのDjango開発に役立ったたらうれしいです!
コメント