CSS, Bootstrap und Javascript funktionieren nicht mit Django
Ich versuche, eine Webapp als Abschlussprojekt in meinem Studium zu erstellen, aber ich habe Probleme mit der Konfiguration des CSS mit Django. Ich habe bereits einige Empfehlungen im Internet ohne Erfolg abgegeben. Wenn ich "style" zu Tags hinzufüge, funktioniert es ordnungsgemäß, aber wenn ich versuche, die ".css" -Datei zu verwenden, wird sie nicht geladen. Könnte mir bitte jemand helfen?
Hier ist mein HTML-Kopf:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'static/css/index.css' %}" rel="stylesheet" type="text/css">
<link rel="preconnect" href="{% static 'https://fonts.gstatic.com' %}">
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDikjsB27i23XRQad382KBcFHKNxzZ--1w&callback=initAutocomplete&libraries=places&v=weekly"
defer
></script>
<link href="{https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link href="{https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap" rel="stylesheet">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="{//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>The Queue</title>
</head>
Meine settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = [(os.path.join(BASE_DIR, 'static'))]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
meine urls.py:
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('queueApp.urls')),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Verzeichnisse:
├───queueApp
│ │ admin.py
│ │ apps.py
│ │ models.py
│ │ tests.py
│ │ urls.py
│ │ views.py
│ │ __init__.py
│ │
│ ├───migrations
│ │ │ __init__.py
│ │ │
│ │ └───__pycache__
│ │ __init__.cpython-38.pyc
│ │
│ ├───templates
│ │ base.html
│ │
│ └───__pycache__
│ admin.cpython-38.pyc
│ models.cpython-38.pyc
│ urls.cpython-38.pyc
│ views.cpython-38.pyc
│ __init__.cpython-38.pyc
│
├───queueProject
│ │ asgi.py
│ │ settings.py
│ │ urls.py
│ │ wsgi.py
│ │ __init__.py
│ │
│ └───__pycache__
│ settings.cpython-38.pyc
│ urls.cpython-38.pyc
│ wsgi.cpython-38.pyc
│ __init__.cpython-38.pyc
│
├───static
│ ├───css
│ │ index.css
│ │
│ ├───img
│ └───js
│ index.js
Antworten
Sie haben hier mehrere Probleme:
In Ihrer HTML-Datei
{% static ... %}sollten Sie zur Verwendung{% load static %}im Kopfbereich vor allem<link..>usw. hinzufügen . Überprüfen Sie das Dokumenthttps://docs.djangoproject.com/en/3.1/howto/static-files/Auch sollten Sie ändern
{ % static 'static/css/ .. %}zu{ % static 'css/...%}Für diejenigen, die nicht verwenden
{% static ...%}, haben Sie viele Tippfehler. Zum Beispiel:
Diese haben zusätzliche {
<link href="{https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link href="{https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap" rel="stylesheet">
Dieser Link scheint falsch zu sein.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
- Das folgende sollten Sie nicht verwenden
{% static ..% }
<link rel="preconnect" href="{% static 'https://fonts.gstatic.com' %}">
Da es viele Fehler gibt, ist es möglicherweise am besten, alle zu löschen und diese Zeilen (nach Behebung der Ursache) einzeln hinzuzufügen, um dieses Problem zu beheben.
Möglicherweise liegt ein Problem beim Bereitstellen der statischen Dateien vor. Wenn Sie es noch nicht getan haben, probieren Sie Folgendes aus:https://docs.djangoproject.com/en/3.1/howto/static-files/
Versuchen Sie in Ihrer Datei Settings.py, den Verzeichnisnamen STATIC_ROOT in 'static' anstelle von 'staticfiles' zu ändern.
Ihr Code sieht also folgendermaßen aus:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Und zur Sicherheit versuchen Sie es python manage.py makemigrationsund dann python manage.py migrate. Wenn also Änderungen in Datenbanken vorgenommen werden, werden diese angewendet.