我正试图从django中的实体化css创建一个导航栏和sidenav。创建了三个主要的html文件，名称分别为mbase.html、navbar.html和sidenav.html。下面分别是代码。
mbase.html：
{%load materializecss %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--custom css for materialize-->
<link rel="stylesheet" type="text/css" href= {% static 'css/style.css' %}>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--Title of the page goes here-->
<title>{% block title %}Hello World {% endblock title %}</title>
</head>
<body>
{% include 'navbar.html' %}
{% block body %}
{% endblock body %}
<!--Jquery optional-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src={% static 'js/main.js' %}></script>
</body>
</html>
navbar.html：
{% load static %}
<nav>
<div class="nav-wrapper">
<a href="#" data-target="slide-out" class="sidenav-trigger left show-on-large"><i class="material-icons">menu</i></a>
<a href="{% url 'index' %}" class="brand-logo center">CMMS</a>
<ul class="right hide-on-med-and-down">
<!-- Dropdown Trigger for userprofile -->
{% if request.user.is_authenticated %}
<li><a id="userdropdown" class="dropdown-trigger" href="#!" data-target="dropdown2" >Hello, {{ request.user.email }}<i
class="material-icons right">arrow_drop_down</i></a></li>
{% else %}
<li><a href="{% url 'login' %}">Login</a></li> | <li><a href="{% url 'registration' %}">Registration</a></li>
{% endif %}
<li><a href="{% url 'company' %}">Company</a></li>
<li><a href="#">About Us</a></li>
<!-- Dropdown Trigger for links dept wise -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Department<i
class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">E&M</a></li>
<li><a href="#!">Finance</a></li>
<li class="divider"></li>
<li><a href="#!">Personnel</a></li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li><a href="{% url 'logout' %}">Logout</a></li>
</ul>
</nav>
{% include 'sidenav.html' %}
sidenav.html：
<ul id="slide-out" class="sidenav">
<li><div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<a href="#user"><img class="circle" src="images/yuna.jpg"></a>
<a href="#name"><span class="white-text name">John Doe</span></a>
<a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
在main.js:中
$(document).ready(function(){
$('.sidenav').sidenav();
// Initialize materialize data picker
$('.datepicker').datepicker({'format': 'yyyy-mm-dd'});
$('select').formSelect();
// other functions to make it collapsible
$('.collapsible').collapsible();
$(".dropdown-trigger").dropdown();
$("#userdropdown.dropdown-trigger").dropdown({coverTrigger: false});
});
请帮帮我，我不知道为什么侧导航栏不工作。
当在浏览器中检查时，它显示为。当按下侧导航菜单时，它不会展开。
在sidenav HTML模板的开头使用以下代码：
{% extends 'mbase.html' %}
您的CDN没有导入到您的导航HTML文件，因此此代码将帮助您继承页面