django html 模板找不到静态 css 和 js 文件 [英] django html template can't find static css and js files

查看：31
本文介绍了django html 模板找不到静态 css 和 js 文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个结构是这样的django项目:

>vira>病毒-__init.py-settings.py-urls.py-wsgi.py>vira_app>迁移>模板-index.html>静态>vira_app>资产>css>js>供应商>aos>引导程序>引导图标>同位素布局>swiper-__init__.py-admin.py-apps.py-models.py-tests.py-urls.py-views.py-db.sqlite3-manage.py

我使用过引导程序.index.html 如下所示:

<html lang="en"><头><元字符集=utf-8">{% 加载静态 %}<link href="{% static 'vira_app/assets/vendor/aos/aos.css' %}";rel=样式表"><link href="{% static 'vira_app/assets/vendor/bootstrap/css/bootstrap.min.css' %}";rel=样式表"><link href="{% static 'vira_app/assets/vendor/bootstrap-icons/bootstrap-icons.css' %}";rel=样式表"><link href="{% static 'vira_app/assets/vendor/swiper/swiper-bundle.min.css' %}";rel=样式表">{% 加载静态 %}<link href="{% static 'vira_app/assets/css/style.css' %}";rel=样式表"><身体><main id="main"><div id="投资组合网格";class =行无排水沟"data-aos=淡入淡出"；data-aos-delay=200">{% if catalogue_list %}{% for Catalogue_list %}<div class="item web col-sm-6 col-md-4 col-lg-4 mb-4"><a href="{{ Catalogue.link }}";class="item-wrapfancybox"><div class="work-info"><h3>{{ Catalogue.title }}</h3><span>{{ Catalogue.source }}</span>

<img class="img-fluid";src={{ Catalogue.image }}"></a>

{% 结束为 %}{％ 万一 ％}

</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>

settings.py:

TEMPLATES = [{'后端':'django.template.backends.django.DjangoTemplates'，'目录':[os.path.join(BASE_DIR, 'vira_app', '模板')],'APP_DIRS':是的，'选项': {上下文处理器":['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_ROOT = '/vira_app/模板'

当我运行服务器并转到 index.html 时，从 db 检索的数据并显示良好，但没有任何样式！

我尝试了一些解决方案，检查每个静态 url，但不起作用

其实css、js和vendor都没有应用.有什么问题?

解决方案

一些设置被误用:

STATIC_URL = '/static/' - 这很好

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

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

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

所以:

附注

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

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

I have a django project that structure is like this:

>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:

<!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'

When I run the server and go to index.html, data retrieved from db and show well, but without any style!

I have tried some solution, check every static url, but not working

In fact, css, js and vendors not applied. What's the problem?

解决方案

Some of settings are misused:

STATIC_URL = '/static/' - this is fine

STATIC_ROOT = '/vira_app/template' - nope, this is supposed to be some folder not really related to the project structure. In the end, on prod it can be a CDN URL or a folder on different server. So try changing it to something like STATIC_ROOT = os.path.join(BASE_DIR, 'static') for the start.

As mentioned in comments you might need to define STATICFILES_DIRS - a list of folders where from static files must be collected to STATIC_ROOT by collectstatic command. This means you can have many subfolders containing static files in different places. 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).

Note, default set of STATICFILES_FINDERS already contains AppDirectoriesFinder which will automatically find all the static subfolders in any of the project apps. 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.

So:

  • STATIC_ROOT should not point to any templates subfolders, change it to something more "global"
  • STATICFILES_DIRS should link to the folder(s) where you keep your static files now or this folder should be moved to the root of vira_app to let collectstatic find it
  • collectstatic must be run before checking your styles and scripts in rendered page
  • after running collectstatic all the static files must persist in STATIC_ROOT so django will be able to map relative urls after STATIC_URL to relative paths after STATIC_ROOT and those files will be loaded

PS

Note, some of your static files are linked in wrong way in the shown template:

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

this should be changed to {% static... as well.

这篇关于django html 模板找不到静态 css 和 js 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
Python最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆