如何在Django中加载CSS文件和javascript文件？

问题描述 投票：0回答：1

[当我尝试将base.html的页眉和页脚扩展到index.html和about.html时，我无法加载CSS和javascript文件。

这是我的代码。

我已在INSTALLED_APPS中包含django.contrib.staticfiles。另外，我已经定义了STATIC_URLsetting.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')
]

我正在尝试将页眉和页脚扩展到index.html和about.htmlbase.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: [email protected]</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 %}

这是我的项目层次结构

enter image description here

python django web-applications django-staticfiles
1个回答
0
投票

您已将静态文件指定在settings.py文件中的apps目录下。

确保已将静态文件存储在应用程序文件夹中。

您将具有这样的层次结构：

-Project root folder

    -App folder 
               -static (keep your static files in here)

    -Project folder
                   - __init__.py
                   - decorators.py
                   - settings.py
                   - urls.py
                   - wsgi.py

我将删除staticfiles_dirs或注释掉以进行测试。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.