Question

我有3个文件，Base.html，Navbar.html和dashboard.html。我正在尝试扩展base.html并将navbar.html包含在仪表板中。它得到了扩展，但问题是仪表板的内容数据不可见。如果我删除navbar.html，则可以，但没有navbars。以下是请检查并帮助解决的文件。

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>

    # 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">
                <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>

<!-- 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

您也可以像在这里https://github.com/YashMarmat/Blog-App-django-v3/blob/master/templates/base.html

那样将导航栏放在base.html中。

在那之后，将下面的代码放在您希望包含导航栏的那些模板的顶部

Java

现在，将其他模板的代码放在这两个代码之间

{% extends "base.html" %}

例如home.html（其他模板应如下所示）

{% block content %}

{% endblock content %}

就是这样。

模板扩展无法正常工作-Django

1 个答案: