CSS, Bootstrap e Javascript non funzionano con Django
Sto cercando di costruire una webapp come progetto finale nella mia laurea, ma ho problemi con la configurazione del css con django. Ho già fatto alcuni consigli su Internet senza successo. Quando aggiungo "stile" ai tag funziona correttamente, ma quando provo a utilizzare il file ".css" non viene caricato. Qualcuno potrebbe aiutarmi, per piacere?
Ecco la mia testa html:
{% 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>
My 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/')
i miei 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)
Directory:
├───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
Risposte
Hai diversi problemi qui:
Nel tuo file html, per poterlo usare
{% static ... %}, dovresti aggiungere{% load static %}nella sezione head prima di tutto<link..>ecc. Controlla il documentohttps://docs.djangoproject.com/en/3.1/howto/static-files/inoltre dovresti cambiare
{ % static 'static/css/ .. %}in{ % static 'css/...%}Per quelli che non usi
{% static ...%}, hai molti errori di battitura. Per esempio:
Questi hanno ulteriori {
<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">
Questo collegamento sembra sbagliato.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
- il seguente, non dovresti usare
{% static ..% }
<link rel="preconnect" href="{% static 'https://fonts.gstatic.com' %}">
Poiché ci sono molti errori, potrebbe essere meglio eliminarli tutti e aggiungere quelle righe (dopo la correzione della causa) una alla volta per risolvere il problema.
potrebbe essere un problema con la pubblicazione dei file statici. se non l'hai già fatto, prova a controllare:https://docs.djangoproject.com/en/3.1/howto/static-files/
All'interno del tuo file Settings.py prova a cambiare il nome della directory STATIC_ROOT in "static" invece di "staticfiles".
Quindi, il tuo codice sarà simile a:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
E per sicurezza prova a correre python manage.py makemigrationse poi python manage.py migrate. In modo che, se vengono apportate modifiche all'interno dei database, verranno applicate.