【Django】ベーステンプレートでページの共通部分を作る

Web

こんにちは!ゆーや(@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開発に役立ったたらうれしいです!

コメント

タイトルとURLをコピーしました