Django模板继承异常求助：引入Navbar后Dashboard内容无法显示

这问题我之前碰到过，核心原因是**Navbar.html里混入了不属于导航/侧边栏的页面容器结构，导致Dashboard的内容被放到了错误的DOM位置，所以无法显示**。咱们一步步来修复：

问题根源分析 #

你现在的Navbar.html最后部分包含了content-wrapper、content-header这些本该属于页面内容区域的结构，甚至还闭合了content-wrapper容器。而Base.html里的{% block content %}是紧跟在{% include 'navbar.html' %}后面的，这就导致Dashboard的内容被渲染到了wrapper容器外的错误位置，自然看不到。

修复步骤 #

1. 清理Navbar.html的冗余结构 #

只保留顶部导航栏和侧边栏的代码，删除从<!-- Content Wrapper. Contains page content -->开始到最后的所有内容。修改后的Navbar.html如下：

{% load static %}
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="dashboard" class="nav-link">Home</a>
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<div class="dropdown-divider"></div>
</ul>
{# <li class="nav-item">#}
{# <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">#}
{# <i class="fas fa-th-large"></i>#}
{# </a>#}
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="dashboard" class="brand-link">
<img src="{% static 'img/AdminLTELogo.png' %}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light">Acro Paints</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="{% static 'img/user2-160x160.jpg' %}" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
<a href="#" class="d-block">Alexander Pierce</a>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p> Dashboard </p>
</a>
<li class="nav-item">
<a href="pages/widgets.html" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p> Painters </p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p> Product Master </p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-chart-pie"></i>
<p> Scheme </p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-tree"></i>
<p> Coupon Code Master </p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-edit"></i>
<p> Reward Master </p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-table"></i>
<p> Redemption </p>
</a>
</li>
<li class="nav-item">
<a href="pages/calendar.html" class="nav-link">
<i class="nav-icon far fa-calendar-alt"></i>
<p> Passbook </p>
</a>
</li>
<li class="nav-item">
<a href="pages/gallery.html" class="nav-link">
<i class="nav-icon far fa-image"></i>
<p> SMS Logs </p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon far fa-envelope"></i>
<p> Stake Holders </p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-book"></i>
<p> Dealer Master </p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon far fa-plus-square"></i>
<p> Beat Plan </p>
</a>
</li>
<li class="nav-item">
<a href="https://adminlte.io/docs/3.0" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Compliance</p>
</a>
</li>
<li class="nav-item">
<a href="https://adminlte.io/docs/3.0" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Tickets</p>
</a>
</li>
<li class="nav-item">
<a href="https://adminlte.io/docs/3.0" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Leads</p>
</a>
</li>
<li class="nav-item">
<a href="https://adminlte.io/docs/3.0" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Notification</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>

2. 调整Base.html的容器结构 #

把content-wrapper和标准的页面内容容器结构放到{% block content %}外层，确保子模板的内容能正确渲染到AdminLTE的页面框架中。修改后的Base.html核心部分如下：

{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="{% static 'plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/jqvmap/jqvmap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/adminlte.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/overlayScrollbars/css/OverlayScrollbars.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
<link rel="stylesheet" href="{% static 'plugins/summernote/summernote-bs4.css' %}">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body>
<div class="wrapper">
{% include 'navbar.html' %}

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Dashboard</h1>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
<div class="container-fluid">
{% block content %}
{% endblock %}
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->

<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
</body>
<script src=" {% static 'plugins/jquery/jquery.min.js' %} "></script>
<script src=" {% static 'plugins/jquery-ui/jquery-ui.min.js' %} "></script>
<script>
$.widget.bridge('uibutton', $.ui.button)
</script>
<script src=" {% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %} "></script>
<script src=" {% static 'plugins/chart.js/Chart.min.js' %} "></script>
<script src=" {% static 'plugins/sparklines/sparkline.js' %} "></script>
<script src=" {% static 'plugins/jqvmap/jquery.vmap.min.js' %} "></script>
<script src=" {% static 'plugins/jqvmap/maps/jquery.vmap.usa.js' %} "></script>
<script src=" {% static 'plugins/jquery-knob/jquery.knob.min.js' %} "></script>
<script src=" {% static 'plugins/moment/moment.min.js' %} "></script>
<script src=" {% static 'plugins/daterangepicker/daterangepicker.js' %} "></script>
<script src=" {% static 'plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js' %} "></script>
<script src=" {% static 'plugins/summernote/summernote-bs4.min.js' %} "></script>
<script src=" {% static 'plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' %} ">
</script>
<script src="{% static 'js/adminlte.js' %} "></script>
<script src="{% static 'js/pages/dashboard.js' %} "></script>
<script src="{% static 'js/demo.js' %} "></script>
</html>

3. dashboard.html保持不变 #

你的dashboard.html代码完全没问题，无需修改：

{% extends 'base.html' %}
{% block content %}
<p>Hello </p>
{% endblock %}

验证效果 #

现在重新运行项目，就能同时看到导航栏/侧边栏和Dashboard里的"Hello"内容了。

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