django html 模板找不到 static css 和 js 文件
[英]django html template can't find static css and js files
问题描述
I have a django project that structure is like this:
我有一个 django 项目，其结构如下：
>vira
>vira
-__init.py
-settings.py
-urls.py
-wsgi.py
>vira_app
>migrations
>template
-index.html
>static
>vira_app
>assets
>css
>js
>vendor
>aos
>bootstrap
>bootstrap-icons
>isotope-layout
>swiper
-__init__.py
-admin.py
-apps.py
-models.py
-tests.py
-urls.py
-views.py
-db.sqlite3
-manage.py
I have used bootstrap.我用过引导程序。 index.html is like below: index.html 如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{% load static %}
<link href="{% static 'vira_app/assets/vendor/aos/aos.css' %}" rel="stylesheet">
<link href="{% static 'vira_app/assets/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vira_app/assets/vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
<link href="{% static 'vira_app/assets/vendor/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
{% load static %}
<link href="{% static 'vira_app/assets/css/style.css' %}" rel="stylesheet">
</head>
<body>
<main id="main">
<div id="portfolio-grid" class="row no-gutter" data-aos="fade-up" data-aos-delay="200">
{% if catalogue_list %}
{% for Catalogue in catalogue_list %}
<div class="item web col-sm-6 col-md-4 col-lg-4 mb-4">
<a href="{{ Catalogue.link }}" class="item-wrap fancybox">
<div class="work-info">
<h3>{{ Catalogue.title }}</h3>
<span>{{ Catalogue.source }}</span>
</div>
<img class="img-fluid" src="{{ Catalogue.image }}">
</a>
</div>
{% endfor %}
{% endif %}
</div>
</div>
</main>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
settings.py:设置.py：
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR, 'vira_app', 'template')
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_URL = '/static/'
STATIC_ROOT = '/vira_app/template'
When I run the server and go to index.html, data retrieved from db and show well, but without any style!当我运行服务器和 go 到 index.html 时，从 db 检索到的数据并显示良好，但没有任何样式！
I have tried some solution, check every static url, but not working我尝试了一些解决方案，检查每个 static url，但没有工作
In fact, css, js and vendors not applied.其实css，js和厂商都没有应用。 What's the problem?有什么问题？
1 个解决方案
解决方案1
1 已采纳 2021-03-02 12:07:27
Some of settings are misused:一些设置被滥用：
STATIC_URL = '/static/' - this is fine STATIC_URL = '/static/' - 这很好
STATIC_ROOT = '/vira_app/template' - nope, this is supposed to be some folder not really related to the project structure. STATIC_ROOT = '/vira_app/template' - 不，这应该是一些与项目结构无关的文件夹。 In the end, on prod it can be a CDN URL or a folder on different server.最后，在产品上它可以是 CDN URL 或不同服务器上的文件夹。 So try changing it to something like STATIC_ROOT = os.path.join(BASE_DIR, 'static') for the start.因此，请尝试将其更改为类似STATIC_ROOT = os.path.join(BASE_DIR, 'static')的内容。
As mentioned in comments you might need to define STATICFILES_DIRS - a list of folders where from static files must be collected toSTATIC_ROOT by collectstatic command.如评论中所述，您可能需要定义STATICFILES_DIRS - 必须通过collectstatic命令将 static 文件收集到STATIC_ROOT的文件夹列表。 This means you can have many subfolders containing static files in different places.这意味着您可以在不同的位置拥有许多包含 static 文件的子文件夹。 However you'll need to collect those files all together to deploy somewhere.但是，您需要将这些文件全部收集起来以部署到某个地方。 STATICFILES_DIRS + collectstatic will collect all of those files for you into given STATIC_ROOT (and contents of this folder should be deployed somewhere, to CDN for example). STATICFILES_DIRS + collectstatic将为您收集所有这些文件到给定的STATIC_ROOT （并且该文件夹的内容应该部署在某个地方，例如 CDN）。
Note, default set of STATICFILES_FINDERS already contains AppDirectoriesFinder which will automatically find all the static subfolders in any of the project apps .请注意，默认的STATICFILES_FINDERS集已经包含AppDirectoriesFinder ，它将自动查找任何项目应用程序中的所有static子文件夹。 This means if you move static subfolder from templates to the vira_app root - you won't have to mention it in the STATICFILES_DIRS .这意味着如果您将static子文件夹从templates移动到vira_app根目录 - 您不必在STATICFILES_DIRS中提及它。
So:所以：
-
STATIC_ROOTshould not point to anytemplatessubfolders, change it to something more "global"STATIC_ROOT不应指向任何templates子文件夹，将其更改为更“全局”的东西 STATICFILES_DIRSshould link to the folder(s) where you keep your static files now or this folder should be moved to the root ofvira_appto letcollectstaticfind itSTATICFILES_DIRS应该链接到您现在保存 static 文件的文件夹，或者应该将此文件夹移动到vira_app的根目录以让collectstatic找到它collectstaticmust be run before checking your styles and scripts in rendered page在检查您的 styles 和渲染页面中的脚本之前，必须运行collectstatic- after running
collectstaticall the static files must persist inSTATIC_ROOTso django will be able to map relative urls afterSTATIC_URLto relative paths afterSTATIC_ROOTand those files will be loaded运行collectstatic后，所有 static 文件必须保留在STATIC_ROOT中，因此 django 将能够 map 之后的相对 url 在STATIC_URL之后加载到相对路径，并且这些文件将在STATIC_ROOT之后加载到相对路径
PS附言
Note, some of your static files are linked in wrong way in the shown template:请注意，您的一些 static 文件在显示的模板中以错误的方式链接：
<script src="assets/vendor/aos/aos.js"></script>
this should be changed to {% static... as well.这也应该更改为{% static...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.