Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
a month ago

The functionality of Django's block content is not operating correctly.

I am tasked with modifying a given base.html file which contains code for a navbar. When extending this file to dashboard.html using the {% extends "base.html" %} and {% block nav %}{% endblock %} tags, the navbar does not show up on the webpage. The rest of the code in dashboard.html is included correctly. Can anyone suggest why this is happening? The base.html code is as follows: The base.html file contains the HTML, CSS, and JavaScript code for a navbar. Here's a shortened version of the code:

{% load static %}
{% load custom_tags %}
<!DOCTYPE html>
<html lang="en">
        
    <body>
        <style>
            html {
                scroll-behavior: smooth;
            }
            *,
            body {
                margin: 0;
            }
            body {
                display:flex; flex-direction:row;
                background: #030914;
                background: url('/static/dashimages/map.svg'), #030914;;
                background-attachment: fixed;
                overflow-y:scroll;
            }
            .nav-container {
                width: 200px;
                padding: 20px;
                position: fixed;
               top: 0;
               left: 0;
               height: 100%;
               max-height: 100vh;
               border-right:  2px solid rgba(33, 40, 54, 0.5);
               overflow: hidden;
               padding-top: 35px;
              }
            .nav-links {
                display:flex;
                flex-direction:column;
                justify-content:center;
                align-items:center;
                gap: 25px;
                margin-top: 30px;
            }
            .nav-link {
                display:flex;
                flex-direction:row;
                justify-content: flex-start;
                width: 110%;
                padding: 14px 20px;
                gap: 20px;
               transform: rotate(5deg);
            }
            .nav-link:hover {
                cursor: pointer;

            }
            .nav-link a {
                font-family: 'Poppins';
                font-weight: 700;
                font-size: 19px;
                color: rgba(255, 255, 255, 0.15);
            }
            .nav-link img {
                width: 25px;
                height: 25px;
            }
            .nav-active a {
                background: linear-gradient(90deg, #A2FACF 0%, #64ACFF 101.4%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;
            }
            .nav-active {
                background: linear-gradient(90deg, rgba(162, 250, 207, 0.10) 0%, rgba(100, 172, 255, 0.1) 101.4%);
            }
        </style>
        {% block nav %}
       <div class="nav-container">
        <img src="{% static 'levelstatic/assets/coderalogo.svg' %}" style="margin: 0 auto;
        width: 80%; margin-bottom: 25px;" alt="CODERA">
            <div class="nav-links">
                <div class="nav-link nav-active">
                    <img src="{% static '/dashimages/learn.svg' %}" > 
                    <a>LEARN</a>
                </div>
                <div class="nav-link">
                    <img src="{% static '/dashimages/review.svg' %}" > 
                    <a>REVIEW</a>
                </div> 
                <div class="nav-link">
                    <img src="{% static '/dashimages/progress.svg' %}" > 
                    <a>PROGRESS</a>
                </div> 
                <div class="nav-link">
                    <img src="{% static '/dashimages/compete.svg' %}" > 
                    <a>COMPETE</a>
                </div> 
            </div>   
       </div>
       {% endblock%}
    </body>
</html>
When extending base.html to dashboard.html using {% extends "base.html" %} and {% block nav %}{% endblock %}, the navbar does not show up on the webpage.

The code in dashboard.html is as follows:

{% extends "base.html" %}
{% load static %}
{% load custom_tags %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <script defer data-domain="codera.app" src="https://plausible.io/js/script.js"></script> <!--PLAUSIBLE-->

        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        {% comment %} <link rel="stylesheet" href="{% static 'dashboardstyle.css' %}"> {% endcomment %}
Answers(2)
avatar
Vogi
a month ago
Verified Answer
The issue you are facing could be due to a number of reasons. Here are some possible reasons why the navbar is not showing up on the webpage: 1. The {% block nav %}{% endblock %} tags in base.html are not properly defined or are missing. 2. The {% extends "base.html" %} tag in dashboard.html is not properly defined or is missing. 3. The {% block nav %}{% endblock %} tags in dashboard.html are not properly defined or are missing. You can try checking if these tags are properly defined and if they match with each other. Also, make sure that both files are in the same directory. If you have checked these things and still cannot find a solution, you can try posting your code on a forum like Stack Overflow. You can also try searching for similar issues on these forums. I hope this helps! Let me know if you have any other questions.

Sources

python - Django Template Not Extending - Stack Overflowdjango template extends not working - Stack OverflowHow to use the Extends and Include Django Template TagsCode in block is not always executed when extended from ... - Django Forum
avatar
Tolerim
a month ago
The reason why the content (navbar) in base.html is not showing up when you extend it on dashboard.html is because you have an empty nav block on dashboard.html that is overriding the content that should be inherited from base.html. To fix this, you need to remove the empty nav block from dashboard.html. Simply have: 
{% extends "base.html" %}
This will inherit the content from base.html, including the navbar.
;