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

2025-02-25 09:07:00
admin
原创
22
摘要:问题描述:我有一个 django 项目,其结构如下:>vira >vira -__init.py -settings.py -urls.py -wsgi.py >vira_app ...

问题描述:

我有一个 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>

设置.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和vendors没有应用好,这是什么问题?


解决方案 1:

某些设置被误用:

STATIC_URL = '/static/'- 很好

STATIC_ROOT = '/vira_app/template'- 不,这应该是与项目结构无关的文件夹。最后,在产品上,它可以是 CDN URL 或不同服务器上的文件夹。因此,请尝试将其更改为类似于STATIC_ROOT = os.path.join(BASE_DIR, 'static')开头的内容。

正如评论中提到的,您可能需要定义STATICFILES_DIRS- 一个文件夹列表,其中必须通过命令将静态文件收集到STATIC_ROOTcollectstatic。这意味着您可以在不同位置拥有许多包含静态文件的子文件夹。但是,您需要将这些文件全部收集在一起以部署到某个地方。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 能够将相对 URL 映射STATIC_URL到相对路径,然后STATIC_ROOT加载这些文件

附言

请注意,显示的模板中某些静态文件以错误的方式链接:

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

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

相关推荐
  为什么项目管理通常仍然耗时且低效?您是否还在反复更新电子表格、淹没在便利贴中并参加每周更新会议?这确实是耗费时间和精力。借助软件工具的帮助,您可以一目了然地全面了解您的项目。如今,国内外有足够多优秀的项目管理软件可以帮助您掌控每个项目。什么是项目管理软件?项目管理软件是广泛行业用于项目规划、资源分配和调度的软件。它使项...
项目管理软件   1344  
  随着房地产行业的快速发展,项目管理在确保项目按时、按预算和高质量完成方面变得至关重要。2025年,房地产项目经理将面临更加复杂的项目需求和更高的管理标准。为了应对这些挑战,选择合适的管理工具显得尤为重要。本文将推荐10款在2025年备受房地产项目经理青睐的管理工具,帮助您提升项目管理效率,确保项目成功。禅道项目管理软件...
开源项目管理工具   0  
  在全球化日益深入的今天,跨国团队的合作已成为企业运营的常态。随着团队成员分布在不同国家和地区,语言和文化的多样性给项目管理带来了新的挑战。为了确保项目顺利进行,选择一款适合的多语言项目管理工具至关重要。本文将介绍2025年跨国团队必备的10款多语言项目管理工具,帮助团队高效协作,提升项目成功率。禅道项目管理软件禅道项目...
项目管理平台   0  
  随着工程管理领域的不断发展,项目管理软件已成为企业提升效率、优化资源分配和确保项目按时交付的重要工具。2025年,工程管理将面临更加复杂的挑战,包括跨团队协作、资源优化、数据驱动决策等。因此,选择一款适合的项目管理软件显得尤为重要。本文将为您推荐2025年最适合工程管理的10款项目管理软件,帮助您在众多选择中找到最适合...
项目管理工具   0  
  跨文化团队的项目运作日益普遍,高级项目管理师在其中扮演着至关重要的角色。有效的沟通是确保项目顺利推进、团队协作无间的关键因素。高级项目管理师需要掌握一系列独特的沟通技巧,以跨越文化差异带来的障碍,实现高效的信息传递与团队协作。理解文化差异文化差异是跨文化团队沟通中面临的首要挑战。不同国家、地区和民族有着各自独特的价值观...
项目管理包括哪些内容   1  
热门文章
项目管理软件有哪些?
云禅道AD
禅道项目管理软件

云端的项目管理软件

尊享禅道项目软件收费版功能

无需维护,随时随地协同办公

内置subversion和git源码管理

每天备份,随时转为私有部署

免费试用