django html模板找不到静态css和js文件答案

【问题标题】：django html template can't find static css and js filesdjango html模板找不到静态css和js文件
【发布时间】：2021-05-31 21:30:27
【问题描述】：

我有一个结构是这样的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

我使用过引导程序。 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 时，从 db 中检索到的数据并显示良好，但没有任何样式！

我尝试了一些解决方案，检查每个静态 url，但没有工作

其实css、js和厂商都没有应用。有什么问题？

【问题讨论】：

显示你的 settings.py
你配置了STATIC_URL或STATIC_ROOT吗？
docs.djangoproject.com/en/3.1/howto/static-files 阅读本文
请更新问题而不是向 cmets 发布详细信息
试试这个STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), )

标签： python django django-templates django-staticfiles

【解决方案1】：

一些设置被滥用：

STATIC_URL = '/static/' - 这很好

STATIC_ROOT = '/vira_app/template' - 不，这应该是一些与项目结构无关的文件夹。最后，在 prod 上，它可以是 CDN URL 或不同服务器上的文件夹。因此，首先尝试将其更改为 STATIC_ROOT = os.path.join(BASE_DIR, 'static')。

如 cmets 中所述，您可能需要定义 STATICFILES_DIRS - 必须通过 collectstatic 命令将来自静态文件收集到 到 STATIC_ROOT 的文件夹列表.这意味着您可以在不同的位置拥有许多包含静态文件的子文件夹。但是，您需要将这些文件全部收集起来以部署到某个地方。 STATICFILES_DIRS + collectstatic 将为您收集所有这些文件到给定的STATIC_ROOT （这个文件夹的内容应该部署到某个地方，例如 CDN）。

注意，STATICFILES_FINDERS 的默认集已经包含 AppDirectoriesFinder，它将自动在任何项目应用程序中查找所有 static 子文件夹。这意味着如果您将 static 子文件夹从 templates 移动到 vira_app 根目录 - 您不必在 STATICFILES_DIRS 中提及它。

所以：

STATIC_ROOT 不应指向任何 templates 子文件夹，将其更改为更“全局”的内容
STATICFILES_DIRS 应该链接到你现在保存静态文件的文件夹，或者这个文件夹应该移动到 vira_app 的根目录让 collectstatic 找到它
collectstatic 必须在检查渲染页面中的样式和脚本之前运行
在运行collectstatic 后，所有静态文件都必须保留在STATIC_ROOT 中，因此django 将能够将STATIC_URL 之后的相对URL 映射到STATIC_ROOT 之后的相对路径，并且这些文件将被加载

注意，您的一些静态文件在显示的模板中以错误的方式链接：

 <script src="assets/vendor/aos/aos.js"></script>

这也应该改为{% static...。

【讨论】：