• 2018-06-10
ウズマスター戦記
ウズマスター戦記 https://www.uzumax.org/2018/06/djangoextendsblock.html

Djangoでテンプレートの継承! タグ「extends」と「block」

テンプレートで出力するHTMLですが、全ページ共通になっている部分もありますよね?

そういう時、共通部分を共通ファイルに出力して、個別画面はそれを継承することで切り分けることが出来ます。


タグ「extends」と「block」

テンプレートを共通部分と個別部分に切り分けて継承。これは組み込みタグ「extends」と「block」を使用することで実現出来ます。

切り分け前

まず、全体として以下のようなHTMLを出力したいとします。

切り分け前のHTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>個別部分タイトル</title>
</head>
<body>

個別部分ボディ

</body>
</html>

「タイトル」と「bodyの中身」は各画面個別にして、ヘッダーとかそれ以外の部分は共通化したいという想定です。

これをタグ「extends」と「block」で実現すると以下のようになります。

切り分け後

共通部分「base.html」と個別部分「child.html」に切り分けました。

共通部分 child.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}個別画面のタイトルを入れる場所{% endblock %}</title>
</head>
<body>

{% block body %}個別画面のbodyを入れる場所{% endblock %}


</body>
</html>

個別部分 base.html

{% extends "tag_samples/base.html" %}

{% block title %}個別部分タイトル{% endblock %}

{% block body %}

    個別部分ボディ

{% endblock %}

これで以下のように画面が表示されます。


出展

公式サイトはこちら。


バックナンバー

0 件のコメント:

コメントを投稿

お気軽にコメント下さい。