Django 静态文件未加载且没有错误迹象

Posted

技术标签:

【中文标题】Django 静态文件未加载且没有错误迹象【英文标题】:Django static files not loading with no error signs 【发布时间】:2019-12-23 14:09:47 【问题描述】:

当我运行 django 服务器并尝试加载 html 文件时,它没有加载 CSS 文件。我在终端或网站本身上看不到任何错误 - 只是在后台加载动画。在 settings.py 中设置静态文件后,我在终端上运行 collectstatic,它在主文件区域中生成了一个包含所有 CSS/JS/字体文件的新静态文件。

~filepath

├── static/
│   ├── static/
│   │   └── admin/
│   │   └── css/    
│       └── fonts/
│       └── images/
│       └── js/
├── templates/
│   └── base.html/
│   └── _partials/
│      └── footer.html
│      └── navbar.html
│   └── pages/   
│      └── index.html
│      └── about.html

~settings.py

STATIC_ROOT = os.path.join(BASE_DIR,'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'tvfb/static')
]
~urls.py (project)
urlpatterns = [
    path('', include('pages.urls')),
    path('admin/', admin.site.urls),
]
~urls.py (app)
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('about', views.about, name='about'),
]
~views.py
def index(request):
    return render(request, 'pages/index.html')

def about(request):
    return render(request, 'pages/about.html')
~base.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">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">

    <link rel="stylesheet" href="% static 'css/open-iconic-bootstrap.min.css' %">
    <link rel="stylesheet" href="% static 'css/animate.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/magnific-popup.css' %">

    <link rel="stylesheet" href="% static 'css/aos.css' %">

    <link rel="stylesheet" href="% static 'css/ionicons.min.css' %">

    <link rel="stylesheet" href="% static 'css/flaticon.css' %">
    <link rel="stylesheet" href="% static 'css/icomoon.css' %">
    <link rel="stylesheet" href="% static 'css/style.css' %">

</head>
<body>
    <!-- Nav Bar -->
    % include '_partials/_navbar.html'%
    <!-- Main Content -->
    % block content %
    % endblock %
    <!-- footer -->
    % include '_partials/_footer.html'%


    <!-- loader -->
    <div id="ftco-loader" class="show fullscreen"><svg class="circular"  ><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke- stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke- stroke-miterlimit="10" stroke="#F96D00"/></svg></div>


    <script src="% static 'js/jquery.min.js' %"></script>
    <script src="% static 'js/jquery-migrate-3.0.1.min.js' %"></script>
    <script src="% static 'js/popper.min.js' %"></script>
    <script src="% static 'js/bootstrap.min.js' %"></script>
    <script src="% static 'js/jquery.easing.1.3.js' %"></script>
    <script src="% static 'js/jquery.waypoints.min.js' %"></script>
    <script src="% static 'js/jquery.stellar.min.js' %"></script>
    <script src="% static 'js/owl.carousel.min.js' %"></script>
    <script src="% static 'js/jquery.magnific-popup.min.js' %"></script>
    <script src="% static 'js/aos.js' %"></script>
    <script src="% static 'js/jquery.animateNumber.min.js' %"></script>
    <script src="% static 'js/scrollax.min.js' %"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
    <script src="% static 'js/google-map.js' %"></script>
    <script src="% static 'js/main.js' %"></script>

</body>
</html>

【问题讨论】:

服务器是指apache2还是ngix? 【参考方案1】:

擦除 staticfilesdir

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'tvfb/static')
]

将保持如下:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'static')

运行python manage.py collectstatic,不要忘记同时清除浏览器的缓存

【讨论】:

成功了!太感谢了!我可以要求更多关于擦除 STATICFILES_DIRS 以及浏览器缓存的说明吗?我想更深入地了解。再次感谢! 很高兴它成功了! docs.djangoproject.com/en/2.2/howto/static-files 你可以参考这个来了解更多什么时候使用 staticfilesdir。此外,始终建议清理缓存,因为浏览器总是试图从缓存中提供页面,因此有时会出现更新未显示的情况。 @YeongHeo 不要忘记接受答案,以便其他人也可以轻松找到。 感谢您的澄清!对不起,我刚刚接受了你的回答——我第一次使用 ***,但再次感谢!

以上是关于Django 静态文件未加载且没有错误迹象的主要内容,如果未能解决你的问题,请参考以下文章

Heroku静态文件未加载,Django

cPanel:Django Admin Portal 未加载静态/CSS 文件

DJANGO:静态文件未在实时服务器中加载(但在本地加载)?

Django全局静态文件未加载

django+nginx 部署未正确加载静态文件

CSS静态文件未在Django中加载