Django模板block内容失效求助：导航栏无法正常显示

核心问题1：子模板重复定义完整HTML结构 #

你的dashboard.html在使用{% extends "base.html" %}之后，又重新编写了<html>、<head>、<body>等完整HTML骨架。在Django模板继承机制中，子模板的这些内容会完全覆盖父模板（base.html）的对应结构，导致父模板中<body>内的导航栏代码被直接忽略，只渲染子模板自己的结构。

核心问题2：空的nav块覆盖了父模板内容 #

你在子模板中定义了空的{% block nav %}{% endblock %}，这会直接替换父模板base.html中nav块里的导航栏代码，所以导航栏完全不显示。如果需要保留父模板的导航栏，要么不重写这个块，要么在块内使用{{ block.super }}来继承父模板的内容。

修复后的代码示例 #

调整base.html，添加可填充的块 #

先给父模板补充head和content块，方便子模板填充自定义内容：

{% load static %}
{% load custom_tags %}
<!DOCTYPE html>
<html lang="en">
    {% block head %}
    {% endblock %}
        
    <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%}

       {% block content %}
       {% endblock %}
    </body>
</html>

修改dashboard.html，正确继承模板 #

删除重复的HTML骨架，通过块填充内容，保留父模板导航栏：

{% extends "base.html" %}
{% load static %}
{% load custom_tags %}

{% block 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 %}
    <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=Poppins:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap"
        rel="stylesheet"
    />
    <link rel="icon" type="image/x-icon" href="{% static 'levelstatic/assets/fav.ico' %}">
    <link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    {% comment %} <script type="text/javascript" src="{% static 'dashboardscript.js' %}" defer></script> {% endcomment %}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> 
    <title>Codera | Dashboard</title>
{% endblock %}

{% block nav %}
    {{ block.super }} {# 继承base.html中的导航栏内容 #}
{% endblock %}

{% block content %}
    <style>
        h1 {
            font-family: 'Space Grotesk';
            font-style: normal;
            font-weight: 700;
            color:rgba(255,255,255, .90);
        }
    </style>
    
    <div class="maincontainer">
        <div class="leftcontent">
            <div class="levelscontainer">
                <div id="levels"></div>
            </div>
        </div>
        <div class="rightcontent">
            <div class="top">
                <div class="points focus">
                    <img src="{% static '/dashimages/focusclock.svg' %}" style="width:20px; filter: invert(19%) sepia(1%) saturate(6780%) hue-rotate(187deg) brightness(88%) contrast(100%);"> 
                    <p>FOCUS</p>
                </div>
                <div class="points">
                    <img src="{% static '/dashimages/medal.png' %}" style="width:20px;"> 
                    <p style="color:#F69C18;">{{medals}}</p>
                </div>
                <div class="points">
                    <img src="{% static '/dashimages/fire.svg' %}" style="width:25px;"> 
                    <p style="color: #FFC001;">{{streaks}}</p>
                </div>
                <div class="points">
                    <img src="{% static '/dashimages/diamond.png' %}" style="width:25px;"> 
                    <p style="color: #30E1B9;">{{diamonds}}</p>
                </div>
            </div>
            <div class="bottom">
                <div class="box">
                   <div class="message">
                    <img src="{% static '/dashimages/drvega.png' %}" style="width:70px; height: 70px;"> 
                    <div class="messagetitle">
                        <h1>Dr. Vega</h1>
                        <p>Incoming message</p>
                        <button>VIEW MESSAGE</button>
                    </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

额外注意点 #

• 子模板中不要重复定义父模板已有的HTML结构，仅通过块填充或替换部分内容即可。
• 若需保留父模板块的内容，必须使用{{ block.super }}，否则子模板的块会完全覆盖父模板对应块的内容。

内容的提问来源于stack exchange，提问作者jahantaila