Template extending not working properly - Django - html

Question

i have 3 files, Base.html, Navbar.html and dashboard.html. im trying to extend base.html and include navbar.html in dashboard. its getting extended but the problem is then dashboard's content data is not visible. If i remove navbar.html it works but no navbars. Below are the files pls check and help to resolve.
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">
Home
</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>
# Side configutarion
{# <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">
Alexander Pierce
</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>
<!-- 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>
</div>
<aside class="control-sidebar control-sidebar-dark">
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' %}
{% block content %}
{% endblock %}
</div>
</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>
dashboard.html
{% extends 'base.html' %}
{% block content %}
<p>Hello </p>
{% endblock %}

Answer 1

You can put your navbar in your base.html also like the way i did here https://github.com/YashMarmat/Blog-App-django-v3/blob/master/templates/base.html
after that, place below code at the top of those templates where you wish to include your navbar
{% extends "base.html" %}
Now, place the code of other templates between these two code,
{% block content %}
{% endblock content %}
For example, home.html (other templates should look like below),
{% extends "base.html" %}
{% block content %}
<h1>Hello World !</h1>
{% endblock content %}
that's it.