Django- Only pulling through the base template when trying to extend

Viewed 46

I'm making my first Django app and I'm trying to set up my signup.html page while extending my base.html. The URL I have configured works, however it only pulls through the base.html template. I've checked the view, url and the signup.html template and I'm not sure what I'm getting wrong.

signup.html:

{% extends './layout/base.html' %}
{% load static %}

{% block content %}
    <h1>Signup</h1>
{% endblock content %}

base.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% load static %}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Oswald&display=swap" rel="stylesheet">
    <link rel="icon" href="{% static 'favicon.ico' %}">
    <a target="_blank" href="https://icons8.com/icon/DpuVIej1M9Br/health">Health</a> icon by <a target="_blank"
        href="https://icons8.com">Icons8</a>
    <title>Your Health Now</title>
</head>

<body>
    <h1>Hello, world!</h1>
</body>

</html>

urls.py:

from django.urls import path
from django.contrib.staticfiles.storage import staticfiles_storage
from django.views.generic.base import RedirectView
from . import views

app_name = 'HealthHub'

urlpatterns = [
    path('signup/', views.signup, name='signup'),
    path('favicon.ico', RedirectView.as_view(url=staticfiles_storage.url("favicon.ico")))
]

views.py:

from django.shortcuts import render

def signup(request):
    return render(request, 'HealthHub/signup.html')
2 Answers

You should also define content block in base.html, so:

base.html:

...
<body>
    {% block content %}
       <h1> Hello World</h1>
    {% endblock content %}
</body>
...

Then try it in signup.html, it will change content block to SignUp in h1 tag.

In base.html you should add an empty block where your other pages' HTML code will appear, it should be like this if you want the content ("Signup" h1) to appear under "Hello, world!":

base.html:

<body>
<h1>Hello, world!</h1>
{% block content %}
{% endblock content %}
</body>
Related