我的问题：django 中的静态文件无法加载到我的 login.html 中。例如，它在我的 index.html 中完美加载，但在 login.html 中却没有。我已经尝试了一切：更改设置，网址，没有任何效果。这是 login.html 的代码：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="container-fluid">
<div class="d-flex align-items-center">
<div class="site-logo mr-auto w-25"><a href="index.html">LearnContact</a></div>
<div class="ml-auto w-25">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu site-menu-dark js-clone-nav mr-auto d-none d-lg-block m-0 p-0">
<li class="cta"><a href="#contact-section" class="nav-link"><span>Contact Us</span></a></li>
</ul>
</nav>
<a href="#" class="d-inline-block d-lg-none site-menu-toggle js-menu-toggle text-black float-right"><span class="icon-menu h3"></span></a>
</div>
</div>
</div>
</header>
<div class="intro-section" id="home-section">
<div class="slide-1" style="background-image: url({% static 'images/hero_1.jpg' %});" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row align-items-center">
<div class="col-12">
<div class="row align-items-center">
<div class="col-lg-6 mb-4">
<h1 data-aos="fade-up" data-aos-delay="100">Learn From The Expert</h1>
<p class="mb-4" data-aos="fade-up" data-aos-delay="200">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime ipsa nulla sed quis rerum amet natus quas necessitatibus.</p>
<p data-aos="fade-up" data-aos-delay="300"><a href="#" class="btn btn-primary py-3 px-5 btn-pill">Admission Now</a></p>
</div>
<div class="col-lg-5 ml-auto" data-aos="fade-up" data-aos-delay="500">
<form action="register" method="POST" class="form-box">
{% csrf_token %}
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="username"><br>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="password"><br>
</div>
<div class="form-group">
<input type="Submit" class="btn btn-primary btn-pill" value="Submit">
</div>
</form>
<div>
{% for message in messages %}
<h3>{{message}}</h3>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section courses-title" id="courses-section">
<div class="container">
<div class="row mb-5 justify-content-center">
<div class="col-lg-7 text-center" data-aos="fade-up" data-aos-delay="">
<h2 class="section-title">Courses</h2>
</div>
</div>
</div>
</div>
<div class="site-section courses-entry-wrap" data-aos="fade-up" data-aos-delay="100">
<div class="container">
<div class="row">
<div class="owl-carousel col-12 nonloop-block-14">
<div class="course bg-white h-100 align-self-stretch">
<figure class="m-0">
<a href="course-single.html"><img src="{% static 'images/img_1.jpg' %}" alt="Image" class="img-fluid"></a>
</figure>
<div class="course-inner-text py-4 px-4">
<span class="course-price">$20</span>
<div class="meta"><span class="icon-clock-o"></span>4 Lessons / 12 week</div>
<h3><a href="#">Study Law of Physics</a></h3>
<p>Lorem ipsum dolor sit amet ipsa nulla adipisicing elit. </p>
</div>
<div class="d-flex border-top stats">
<div class="py-3 px-4"><span class="icon-users"></span> 2,193 students</div>
<div class="py-3 px-4 w-25 ml-auto border-left"><span class="icon-chat"></span> 2</div>
</div>
</div>
<div class="course bg-white h-100 align-self-stretch">
<figure class="m-0">
<a href="course-single.html"><img src="{% static 'images/img_2.jpg' %}" alt="Image" class="img-fluid"></a>
</figure>
<div class="course-inner-text py-4 px-4">
<span class="course-price">$99</span>
<div class="meta"><span class="icon-clock-o"></span>4 Lessons / 12 week</div>
<h3><a href="#">Logo Design Course</a></h3>
<p>Lorem ipsum dolor sit amet ipsa nulla adipisicing elit. </p>
</div>
<div class="d-flex border-top stats">
<div class="py-3 px-4"><span class="icon-users"></span> 2,193 students</div>
<div class="py-3 px-4 w-25 ml-auto border-left"><span class="icon-chat"></span> 2</div>
</div>
</div>
<div class="course bg-white h-100 align-self-stretch">
<figure class="m-0">
<a href="course-single.html"><img src="{% static 'images/img_3.jpg' %}" alt="Image" class="img-fluid"></a>
</figure>
<div class="course-inner-text py-4 px-4">
<span class="course-price">$99</span>
<div class="meta"><span class="icon-clock-o"></span>4 Lessons / 12 week</div>
<h3><a href="#">JS Programming Language</a></h3>
<p>Lorem ipsum dolor sit amet ipsa nulla adipisicing elit. </p>
</div>
<div class="d-flex border-top stats">
<div class="py-3 px-4"><span class="icon-users"></span> 2,193 students</div>
<div class="py-3 px-4 w-25 ml-auto border-left"><span class="icon-chat"></span> 2</div>
</div>
</div>
<div class="course bg-white h-100 align-self-stretch">
<figure class="m-0">
<a href="course-single.html"><img src="{% static 'images/img_4.jpg' %}" alt="Image" class="img-fluid"></a>
</figure>
<div class="course-inner-text py-4 px-4">
<span class="course-price">$20</span>
<div class="meta"><span class="icon-clock-o"></span>4 Lessons / 12 week</div>
<h3><a href="#">Study Law of Physics</a></h3>
<p>Lorem ipsum dolor sit amet ipsa nulla adipisicing elit. </p>
</div>
<div class="d-flex border-top stats">
<div class="py-3 px-4"><span class="icon-users"></span> 2,193 students</div>
<div class="py-3 px-4 w-25 ml-auto border-left"><span class="icon-chat"></span> 2</div>
</div>
</div>
<div class="d-flex align-items-center custom-icon-wrap">
<span class="custom-icon-inner mr-3"><span class="icon icon-university"></span></span>
<div><h3 class="m-0">150 Universities Worldwide</h3></div>
</div>
</div>
</div>
<div class="row mb-5 align-items-center">
<div class="col-lg-7 mb-5" data-aos="fade-up" data-aos-delay="100">
<img src="{% static 'images/undraw_teacher.svg' %}" alt="Image" class="img-fluid">
</div>
<div class="col-lg-4 ml-auto" data-aos="fade-up" data-aos-delay="200">
<h2 class="text-black mb-4">Education is life</h2>
<p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem maxime nam porro possimus fugiat quo molestiae illo.</p>
<div class="d-flex align-items-center custom-icon-wrap mb-3">
<span class="custom-icon-inner mr-3"><span class="icon icon-graduation-cap"></span></span>
<div><h3 class="m-0">22,931 Yearly Graduates</h3></div>
</div>
<div class="d-flex align-items-center custom-icon-wrap">
<span class="custom-icon-inner mr-3"><span class="icon icon-university"></span></span>
<div><h3 class="m-0">150 Universities Worldwide</h3></div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section" id="teachers-section">
<div class="container">
<div class="row mb-5 justify-content-center">
<div class="col-lg-7 mb-5 text-center" data-aos="fade-up" data-aos-delay="">
<h2 class="section-title">Our Teachers</h2>
<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam repellat aut neque! Doloribus sunt non aut reiciendis, vel recusandae obcaecati hic dicta repudiandae in quas quibusdam ullam, illum sed veniam!</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="100">
<div class="teacher text-center">
<img src="{% static 'images/person_1.jpg' %}" alt="Image" class="img-fluid w-50 rounded-circle mx-auto mb-4">
<div class="py-2">
<h3 class="text-black">Benjamin Stone</h3>
<p class="position">Physics Teacher</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro eius suscipit delectus enim iusto tempora, adipisci at provident.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="200">
<div class="teacher text-center">
<img src="{% static 'images/person_2.jpg' %}" alt="Image" class="img-fluid w-50 rounded-circle mx-auto mb-4">
<div class="py-2">
<h3 class="text-black">Katleen Stone</h3>
<p class="position">Physics Teacher</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro eius suscipit delectus enim iusto tempora, adipisci at provident.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="300">
<div class="teacher text-center">
<img src="{% static 'images/person_3.jpg' %}" alt="Image" class="img-fluid w-50 rounded-circle mx-auto mb-4">
<div class="py-2">
<h3 class="text-black">Sadie White</h3>
<p class="position">Physics Teacher</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro eius suscipit delectus enim iusto tempora, adipisci at provident.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section bg-image overlay" style="background-image: url({% static 'images/hero_1.jpg' %});">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-md-8 text-center testimony">
<img src="{% static 'images/person_4.jpg' %}" alt="Image" class="img-fluid w-25 mb-4 rounded-circle">
<h3 class="mb-4">Jerome Jensen</h3>
<blockquote>
<p>“ Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum rem soluta sit eius necessitatibus voluptate excepturi beatae ad eveniet sapiente impedit quae modi quo provident odit molestias! Rem reprehenderit assumenda ”</p>
</blockquote>
</div>
</div>
</div>
</div>
<div class="site-section pb-0">
<div class="future-blobs">
<div class="blob_2">
<img src="{% static 'images/blob_2.svg' %}" alt="Image">
</div>
<div class="blob_1">
<img src="{% static 'images/blob_1.svg' %}" alt="Image">
</div>
</div>
<div class="container">
<div class="row mb-5 justify-content-center" data-aos="fade-up" data-aos-delay="">
<div class="col-lg-7 text-center">
<h2 class="section-title">Why Choose Us</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4 ml-auto align-self-start" data-aos="fade-up" data-aos-delay="100">
<div class="p-4 rounded bg-white why-choose-us-box">
<div class="d-flex align-items-center custom-icon-wrap custom-icon-light mb-3">
<div class="mr-3"><span class="custom-icon-inner"><span class="icon icon-graduation-cap"></span></span></div>
<div><h3 class="m-0">22,931 Yearly Graduates</h3></div>
</div>
<div class="d-flex align-items-center custom-icon-wrap custom-icon-light mb-3">
<div class="mr-3"><span class="custom-icon-inner"><span class="icon icon-university"></span></span></div>
<div><h3 class="m-0">150 Universities Worldwide</h3></div>
</div>
<div class="d-flex align-items-center custom-icon-wrap custom-icon-light mb-3">
<div class="mr-3"><span class="custom-icon-inner"><span class="icon icon-graduation-cap"></span></span></div>
<div><h3 class="m-0">Top Professionals in The World</h3></div>
</div>
<div class="d-flex align-items-center custom-icon-wrap custom-icon-light mb-3">
<div class="mr-3"><span class="custom-icon-inner"><span class="icon icon-university"></span></span></div>
<div><h3 class="m-0">Expand Your Knowledge</h3></div>
</div>
<div class="d-flex align-items-center custom-icon-wrap custom-icon-light mb-3">
<div class="mr-3"><span class="custom-icon-inner"><span class="icon icon-graduation-cap"></span></span></div>
<div><h3 class="m-0">Best Online Teaching Assistant Courses</h3></div>
</div>
<div class="d-flex align-items-center custom-icon-wrap custom-icon-light">
<div class="mr-3"><span class="custom-icon-inner"><span class="icon icon-university"></span></span></div>
<div><h3 class="m-0">Best Teachers</h3></div>
</div>
</div>
</div>
<div class="col-lg-7 align-self-end" data-aos="fade-left" data-aos-delay="200">
<img src="{% static 'images/person_transparent.png' %}" alt="Image" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="site-section bg-light" id="contact-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-7">
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>
<script src="{% static 'js/jquery-ui.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/jquery.countdown.min.js' %}"></script>
<script src="{% static 'js/bootstrap-datepicker.min.js' %}"></script>
<script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
<script src="{% static 'js/aos.js' %}"></script>
<script src="{% static 'js/jquery.fancybox.min.js' %}"></script>
<script src="{% static 'js/jquery.sticky.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
下面是 index.html 的代码：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>LearnContact</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Muli:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="{% static 'fonts/icomoon/style.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery-ui.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery.fancybox.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}">
<link rel="stylesheet" href="{% static 'fonts/flaticon/font/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'css/aos.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="container-fluid">
<div class="d-flex align-items-center">
<div class="site-logo mr-auto w-25"><a href="index.html">LearnContact</a></div>
<div class="mx-auto text-center">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mx-auto d-none d-lg-block m-0 p-0">
<li><a href="#home-section" class="nav-link">Home</a></li>
<li><a href="#courses-section" class="nav-link">Courses</a></li>
<li><a href="#programs-section" class="nav-link">Programs</a></li>
<li><a href="#teachers-section" class="nav-link">Teachers</a></li>
</ul>
</nav>
</div>
<div class="ml-auto w-25">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu site-menu-dark js-clone-nav mr-auto d-none d-lg-block m-0 p-0">
<li class="cta"><a href="#contact-section" class="nav-link"><span>Contact Us</span></a></li>
</ul>
</nav>
<a href="#" class="d-inline-block d-lg-none site-menu-toggle js-menu-toggle text-black float-right"><span class="icon-menu h3"></span></a>
</div>
</div>
</div>
</header>
<div class="intro-section" id="home-section">
<div class="slide-1" style="background-image: url({% static 'images/hero_1.jpg' %});" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row align-items-center">
<div class="col-12">
<div class="row align-items-center">
<div class="col-lg-6 mb-4">
<h1 data-aos="fade-up" data-aos-delay="100">Learn From The Expert</h1>
<p class="mb-4" data-aos="fade-up" data-aos-delay="200">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime ipsa nulla sed quis rerum amet natus quas necessitatibus.</p>
<p data-aos="fade-up" data-aos-delay="300"><a href="#" class="btn btn-primary py-3 px-5 btn-pill">Admission Now</a></p>
</div>
<div class="col-lg-5 ml-auto" data-aos="fade-up" data-aos-delay="500">
{% if user.is_authenticated %}
<h1 style="color: white">Hello, {{user.first_name}}!</h1>
<p class="mb-4" data-aos="fade-up" data-aos-delay="200">Make yourself at home</p>
<div class="form-group">
<a class="btn btn-primary btn-pill" href="accounts/logout">Logout</a>
</div>
{% else %}
<div class="form-group">
<a class="btn btn-primary btn-pill" href="accounts/register">Sign Up</a>
</div>
<div class="form-group">
<a class="btn btn-primary btn-pill" href="accounts/login">Sign In</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section courses-title" id="courses-section">
<div class="container">
<div class="row mb-5 justify-content-center">
<div class="col-lg-7 text-center" data-aos="fade-up" data-aos-delay="">
<h2 class="section-title">Courses</h2>
</div>
</div>
</div>
</div>
<div class="site-section courses-entry-wrap" data-aos="fade-up" data-aos-delay="100">
<div class="container">
<div class="row">
<div class="owl-carousel col-12 nonloop-block-14">
<div class="course bg-white h-100 align-self-stretch">
<figure class="m-0">
<a href="course-single.html"><img src="{% static 'images/img_1.jpg' %}" alt="Image" class="img-fluid"></a>
</figure>
<div class="course-inner-text py-4 px-4">
<span class="course-price">$20</span>
<div class="meta"><span class="icon-clock-o"></span>4 Lessons / 12 week</div>
<h3><a href="#">Study Law of Physics</a></h3>
<p>Lorem ipsum dolor sit amet ipsa nulla adipisicing elit. </p>
</div>
<div class="d-flex border-top stats">
<div class="py-3 px-4"><span class="icon-users"></span> 2,193 students</div>
<div class="py-3 px-4 w-25 ml-auto border-left"><span class="icon-chat"></span> 2</div>
</div>
</div>
<div class="course bg-white h-100 align-self-stretch">
<figure class="m-0">
<a href="course-single.html"><img src="{% static 'images/img_2.jpg' %}" alt="Image" class="img-fluid"></a>
</figure>
<div class="course-inner-text py-4 px-4">
<span class="course-price">$99</span>
<div class="meta"><span class="icon-clock-o"></span>4 Lessons / 12 week</div>
<h3><a href="#">Logo Design Course</a></h3>
<p>Lorem ipsum dolor sit amet ipsa nulla adipisicing elit. </p>
</div>
<div class="d-flex border-top stats">
<div class="py-3 px-4"><span class="icon-users"></span> 2,193 students</div>
<div class="py-3 px-4 w-25 ml-auto border-left"><span class="icon-chat"></span> 2</div>
</div>
</div>
<div class="course bg-white h-100 align-self-stretch">
<figure class="m-0">
<a href="course-single.html"><img src="{% static 'images/img_3.jpg' %}" alt="Image" class="img-fluid"></a>
</div> <!-- .site-wrap -->
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>
<script src="{% static 'js/jquery-ui.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/jquery.countdown.min.js' %}"></script>
<script src="{% static 'js/bootstrap-datepicker.min.js' %}"></script>
<script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
<script src="{% static 'js/aos.js' %}"></script>
<script src="{% static 'js/jquery.fancybox.min.js' %}"></script>
<script src="{% static 'js/jquery.sticky.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
以下是设置：
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
我剪掉了一些 html，但不是重要的部分，因为 Stack Overflow 最多只允许 30000 个符号。对不起，我的英语不好！