django html 模板找不到静态 css 和 js 文件
django html template can't find static css and js files
我有一个结构如下的 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
我用过bootstrap。 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:
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'
当我运行服务器并转到index.html时,从数据库中检索数据并显示良好,但没有任何样式!
我尝试了一些解决方案,检查每个静态 url,但没有用
其实css,js和厂商都不适用。有什么问题吗?
一些设置被误用:
STATIC_URL = '/static/'
- 这很好
STATIC_ROOT = '/vira_app/template'
- 不,这应该是一些与项目结构无关的文件夹。最后,在产品上它可以是 CDN URL 或不同服务器上的文件夹。因此,一开始尝试将其更改为 STATIC_ROOT = os.path.join(BASE_DIR, 'static')
之类的内容。
如评论中所述,您可能需要通过 collectstatic
命令定义 STATICFILES_DIRS
- a list of folders where from static files must be collected to STATIC_ROOT。这意味着您可以在不同的地方有许多包含静态文件的子文件夹。但是,您需要将这些文件全部收集起来以部署到某个地方。 STATICFILES_DIRS
+ collectstatic
将为您收集所有这些文件到给定的 STATIC_ROOT
中(并且 this 文件夹的内容应该部署到某个地方,到 CDN例如)。
请注意,STATICFILES_FINDERS 的默认集合已包含 AppDirectoriesFinder
,它将自动在任何 项目应用程序 中找到所有 static
子文件夹.这意味着如果您将 static
子文件夹从 templates
移动到 vira_app
根目录 - 您将不必在 STATICFILES_DIRS
.
中提及它
所以:
STATIC_ROOT
不应指向任何 templates
子文件夹,将其更改为更“全局”的内容
STATICFILES_DIRS
应该 link 到你现在保存静态文件的文件夹,或者这个文件夹应该移动到 vira_app
的根目录,让 collectstatic
找到它
collectstatic
必须是 运行,然后才能检查呈现页面中的样式和脚本
- 在 运行ning
collectstatic
之后,所有静态文件必须保留在 STATIC_ROOT
中,因此 django 将能够将 STATIC_URL
之后的相对 URL 映射到 [= 之后的相对路径18=] 并且这些文件将被加载
PS
请注意,您的某些静态文件在显示的模板中 link 编辑方式有误:
<script src="assets/vendor/aos/aos.js"></script>
这也应该更改为 {% static...
。
我有一个结构如下的 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
我用过bootstrap。 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:
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'
当我运行服务器并转到index.html时,从数据库中检索数据并显示良好,但没有任何样式!
我尝试了一些解决方案,检查每个静态 url,但没有用
其实css,js和厂商都不适用。有什么问题吗?
一些设置被误用:
STATIC_URL = '/static/'
- 这很好
STATIC_ROOT = '/vira_app/template'
- 不,这应该是一些与项目结构无关的文件夹。最后,在产品上它可以是 CDN URL 或不同服务器上的文件夹。因此,一开始尝试将其更改为 STATIC_ROOT = os.path.join(BASE_DIR, 'static')
之类的内容。
如评论中所述,您可能需要通过 collectstatic
命令定义 STATICFILES_DIRS
- a list of folders where from static files must be collected to STATIC_ROOT。这意味着您可以在不同的地方有许多包含静态文件的子文件夹。但是,您需要将这些文件全部收集起来以部署到某个地方。 STATICFILES_DIRS
+ collectstatic
将为您收集所有这些文件到给定的 STATIC_ROOT
中(并且 this 文件夹的内容应该部署到某个地方,到 CDN例如)。
请注意,STATICFILES_FINDERS 的默认集合已包含 AppDirectoriesFinder
,它将自动在任何 项目应用程序 中找到所有 static
子文件夹.这意味着如果您将 static
子文件夹从 templates
移动到 vira_app
根目录 - 您将不必在 STATICFILES_DIRS
.
所以:
STATIC_ROOT
不应指向任何templates
子文件夹,将其更改为更“全局”的内容STATICFILES_DIRS
应该 link 到你现在保存静态文件的文件夹,或者这个文件夹应该移动到vira_app
的根目录,让collectstatic
找到它collectstatic
必须是 运行,然后才能检查呈现页面中的样式和脚本- 在 运行ning
collectstatic
之后,所有静态文件必须保留在STATIC_ROOT
中,因此 django 将能够将STATIC_URL
之后的相对 URL 映射到 [= 之后的相对路径18=] 并且这些文件将被加载
PS
请注意,您的某些静态文件在显示的模板中 link 编辑方式有误:
<script src="assets/vendor/aos/aos.js"></script>
这也应该更改为 {% static...
。