Когда я пытаюсь расширить верхний и нижний колонтитулы базы. html до индекса. html и около. html, я не могу загрузить файлы CSS и javascript.
Вот мой код.
Я включил django .contrib.staticfiles в INSTALLED_APPS . Кроме того, я определил STATIC_URL
setting.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'gadget/static')
]
Я пытаюсь расширить верхний и нижний колонтитулы до индекса. html и около . html
база. html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Muli:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<!-- Css Styles-->
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/font-awesome.min.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/themify-icons.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/elegant-icons.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/owl.carousel.min.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/nice-select.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/jquery-ui.min.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/slicknav.min.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css'%}" />
<title>e-Gadget</title>
</head>
<body>
<!-- Header Section Begin -->
<header class="header-section">
<div class="container">
<div class="inner-header">
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="logo">
<a href="./index.html">
<img src="img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-lg-7 col-md-7">
<div class="advanced-search">
<button type="button" class="category-btn">All Categories</button>
<div class="input-group">
<input type="text" placeholder="Search here">
<button type="button"><i class="ti-search"></i></button>
</div>
</div>
</div>
<!--
<div class="col-lg-3 text-right col-md-3">
<ul class="nav-right">
<li class="cart-icon">
<a href="#">
<i class="icon_bag_alt"></i>
<span>3</span>
</a>
<div class="cart-hover">
<div class="select-items">
<table>
</table>
</div>
<div class="select-button">
<a href="./shopping-cart.html" class="primary-btn view-card">VIEW CARD</a>
<a href="./check-out.html" class="primary-btn checkout-btn">CHECK OUT</a>
</div>
</div>
</li>
</ul>
</div>
-->
</div>
</div>
</div>
<div class="nav-item">
<div class="container">
<nav class="nav-menu mobile-menu">
<ul>
<li class="active"><a href="./index.html">Home</a></li>
<li><a href="./shop.html">Shop</a></li>
<li><a href="./contact.html">Contact</a></li>
<li><a href="./login.html">Login</a></li>
<li><a href="./register.html">Register</a></li>
</ul>
</nav>
<div id="mobile-menu-wrap"></div>
</div>
</div>
</header>
{% block content %} {% endblock %}
<!-- Footer Section Begin -->
<footer class="footer-section">
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="footer-left">
<div class="footer-logo">
<a href="#"><img src="img/footer-logo.png" alt=""></a>
</div>
<ul>
<li>Address: 44600 Kathmandu, Nepal</li>
<li>Phone: +977 9876543210</li>
<li>Email: electronicgadget@gmail.com</li>
</ul>
<div class="footer-social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
</div>
</div>
</div>
<div class="col-lg-2 offset-lg-1">
<div class="footer-widget">
<h5>Information</h5>
<ul>
<li><a href="./contact.html">About Us</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="copyright-reserved">
<div class="container">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
</div>
</footer>
<script src="{% static 'js/jquery-3.3.1.min.js'%}"></script>
<script src="{% static 'js/bootstrap.min.js'%}"></script>
<script src="{% static 'js/jquery-ui.min.js'%}"></script>
<script src="{% static 'js/jquery.countdown.min.js'%}"></script>
<script src="{% static 'js/jquery.nice-select.min.js'%}"></script>
<script src="{% static 'js/jquery.zoom.min.js'%}"></script>
<script src="{% static 'js/jquery.dd.min.js'%}"></script>
<script src="{% static 'js/jquery.slicknav.js'%}"></script>
<script src="{% static 'js/owl.carousel.min.js'%}"></script>
<script src="{% static 'js/main.js'%}"></script>
<script src="{% static 'js/imagesloaded.pkgd.min.js'%}"></script>
</body>
</html>
index. html
{% extends 'base.html' %}
{% block content %}
<h1> hello</h1>
{% endblock %}
Вот моя иерархия проектов
