Django: Use block in multiple places? - django

Question

This is the template I've written
{% extends 'base.html' %}
{% load static %}
{% block body %}
<div class="row hide-on-mobile" style="height: 100vh">
<div class="col-auto p-5">
<img src="{% static 'logo.svg' %}" class="mb-5 hide-on-mobile" style="height: 84px"/>
{% block form %} {% endblock %}
</div>
<div class="col bg-brown p-5">
<div class="d-flex flex-column justify-content-between" style="height: 100%">
<h1 class="text-blue mb-3">It's always Ups<br>and Downs</h1>
<img src="{% static 'investing_illustration.svg' %}" class="auth-illustration"/>
</div>
</div>
</div>
<div class="hide-on-desktop" style="height: 100vh; position: relative">
<div class="d-flex flex-column bg-brown h-100 p-3 align-items-start">
<img src="{% static 'logo.svg' %}" class="mb-3 hide-on-desktop" style="height: 56px"/>
<p class="text-blue mb-3">It's always Ups<br>and Downs</p>
<img src="{% static 'investing_illustration.svg' %}" class="auth-illustration"/>
</div>
<div style="position: absolute; bottom: 0; z-index: 99; background: white; width: 100%">
<div class="d-flex flex-column p-4">
<p class="mb-4">Login</p>
{% block form %} {% endblock %}
</div>
</div>
</div>
{% endblock %}
I inherit this template in a page as follows:
{% extends 'auth_base.html' %}
{% block form %}
<p class="mb-4">Login</p>
<form class="pb-5">
<input type="text" class="form-control" name="email" placeholder="Enter your email">
<input type="password" class="form-control" name="password" placeholder="Enter your password">
<a class="text-blue">Forgot Password?</a>
<button type="submit" class="mt-3 btn btn-primary full-width">Login</button>
</form>
<div class="text-center">
<span>New Here? <a class="text-blue">Create an account</a></span>
</div>
{% endblock %}
The form block is used two times..because when I inherit the template I want to write only once..but display it in two different places in the same page. In this case, I've written different layouts for mobile and desktop show the user actually sees only once.
However, this code doesn't work and gives the following error:
django.template.exceptions.TemplateSyntaxError: 'block' tag with name 'form' appears more than once
How can I accomplish this?

Answer 1

It is possible to include partials multiple times. Partials work differently then blocks - not via inheritence, so you would have to change your template code a bit.
You would need to create a partial template for your form which would expect a certain context (the form probably), and you would include that template snippet twice in your main template:
<div class="d-flex flex-column p-4">
<p class="mb-4">Login</p>
{% include "_partials/login_form.html" %}
</div>
_partials/login_form.html would basically contain what you had now inside your form block.
https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#include
EDIT: as someone else pointed out - the question on multiple blocks with the same name has already been addressed before: https://stackoverflow.com/a/6427336/8401179