MENU
  1. ホーム
  2. django
  3. 【django】Templateを継承してHTMLのコードを減らす方法

【django】Templateを継承してHTMLのコードを減らす方法

django

新しいページを作成する際に，HTMLファイルを新規作成し，他のファイルからコピペを繰り返してはいないでしょうか？

非生産的というだけでなく，修正したい箇所があった場合に相当な手間になり，ミスが発生するもとになります

djangoではTemplateを継承して，HTMLファイルのコードを他のファイルから受け取ることができます

本記事では，基本的なTemplateの継承方法について解説します

目次

Templateの継承とは

djangoではひな形となるHTMLファイルを作成し，他のHTMLファイルにそのコードを継承することが可能です

こうすることで，何度もコピペを繰り返し，修正の場合は繰り返しすべてのHTMLファイルを修正するといった手間がなくなります

また，HTMLのコードが大幅に少なくなるため，可読性が向上するという素晴らしいメリットがあります

ひな形の親HTMLファイルを作成する

まずはひな形となるファイルを作成しましょう

名前はなんでもいいですが本サイトではbase.htmlとしました

# フォルダ構成
templates
    blog
        base.html
        home.html
        contact.html

親HTMLファイルに子供に書かせるブロックを指定する

親HTMLファイルを子供に継承するわけですが，子供に書かせたいブロックを指定する必要があります

子HTMLファイルに書くブロックは{% block 名称 %}{% endblock %}で指定します

<!doctype html>
<html lang="ja">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <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>
        <header>
            {% block header %}{% endblock %}
        </header>
        <main>
            <div class="container mt-5">
                {% block main %}{% endblock %}
            </div>
        </main>
        <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>

今回は3つのブロックを作成しています

endとblockの間にスペースを入れないように注意してくださいね

子HTMLファイルに継承する

次に，子HTMLファイルに継承していきます

extendsタグ

親HTMLファイルを継承するにはextendsタグが必要です

子HTMLファイルの1行目に追加しましょう

{% extends 'blog/base.html' %} <!--1行目-->

blockタグ

子供で編集するブロックを子HTMLファイルにも書いてあげましょう

{% extends 'blog/base.html' %} <!--1行目-->

{% block title %}はやてれおのdjangobook{% endblock %}

{% block header %}
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
            </ul>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
            </div>
        </div>
    </nav>
{% endblock %}

{% block main %}
    <div class="text-center mb-5">
        <h1 class="display-3 mb-5">はやてれおのdjangobook</h1>
        <p class="text-muted fs-3">Bootstrapで見た目をきれいにしていきます．</p>
    </div>
    <h3>django</h3>
    <p>djangoは少ないコードで迅速な開発が可能です</p>
    <h3>python</h3>
    <p>pythonはオブジェクト指向型言語に１つで，インデントでforやifのブロックを指定するためコードがきれいになり可読性が良いです．</p>
{% endblock %}

これでサーバーを立ち上げて確認してみてください

参考文献

下記にTemplateに関する公式ドキュメントと関連記事についてまとめているので，参考にしてください

Templateに関する公式ドキュメント

Django Project
The Django template language | Django documentation The web framework for perfectionists with deadlines.

Templateの継承を使用しながら，ページごとにactiveを実装する

あわせて読みたい
【django】Templateの継承をしながらactiveを実装する方法 djangoでのテンプレートの継承は強力です． ですが，activeの切り替えはどうするんだ？と私自身わからなかったことがあるので，その方法を解説します Headerでのactive…

TemplateViewを使って速攻でHTMKファイルを表示する

あわせて読みたい
【django】TemplateViewでHTMLを表示する方法 djangoでまずやるべきことは自分で作成したHTMLファイルを表示させることです djangoでは，TemplateViewを用いることで速攻かつ圧倒的に少ないコードでHTMLファイルの表…

お疲れ様でした

django
django HTML python
シェアしてくださると嬉しいです！
  • URLをコピーしました！

コメント

コメントする

目次