buto > /dev/null

だいたい急に挑戦してゴールにたどり着かずに飽きる日々です

Django テンプレート継承

Python

base.htmlを継承してコード量を減らす

やっとテンプレート継承の恩恵を受けられた！

base.htmlには普通にHTMLタグを書く　bodyタグの中は空っぽ

<!DOCTYPE html>
{% load static %}
{% load bootstrap4 %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TITLE</title>
    <link rel="stylesheet" href="../../static/redo/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    {% block content %}{% endblock %}
  </div>
</body>
</html>

継承したテンプレートはHTMLタグを省略できる （base.htmlの{% block content %}~{% endblock %}に挿入する部分だけ記述でOK）

{% extends "redo/base.html" %}
{% load bootstrap4 %}
{% block title %}類語検索{% endblock %}

{% block content %}
    <p>メッセージを入力してください</p>
    <form action="{% url 'redo:register_message' %}" method="post">{% csrf_token %}
        {% bootstrap_form form layout='horizontal' %}
        <div class="form-group row">
            <div class="offset-md-3 col-md-9">
                <button type="submit" class="btn btn-outline-primary">submit</button>
            </div>
        </div>
    </form>
    {{ message }}
{% endblock %}

継承したテンプレートに記述した入力フォームが表示された！

f:id:butorisa:20201020171507p:plain

画面に何も表示されない時は

継承元テンプレート（base.html）と継承するテンプレートで使っているタグ名が違っているはず！ （継承元：{% block content %}　継承先：{% block contents %}など）

これに気づかず30分くらいハマった。。。