CSS, Bootstrap et Javascript ne fonctionnent pas avec Django
J'essaie de créer une application Web en tant que projet final dans mon diplôme, mais j'ai des problèmes avec la configuration du css avec django. J'ai déjà fait quelques recommandations sur internet sans succès. Lorsque j'ajoute du «style» sur les balises, cela fonctionne correctement, mais lorsque j'essaie d'utiliser le fichier «.css», il ne se charge pas. Quelqu'un pourrait-il m'aider, s'il vous plaît?
Voici ma tête 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>
Mes 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/')
mes 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)
Répertoires:
├───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
Réponses
Vous rencontrez plusieurs problèmes ici:
Dans votre fichier html, pour pouvoir l'utiliser
{% static ... %}, vous devez ajouter{% load static %}dans la section head avant tous les<link..>etc. Consultez le documenthttps://docs.djangoproject.com/en/3.1/howto/static-files/aussi tu devrais changer
{ % static 'static/css/ .. %}pour{ % static 'css/...%}Pour ceux qui n'utilisent pas
{% static ...%}, vous avez de nombreuses fautes de frappe. Par exemple:
Ceux-ci ont des {
<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">
Ce lien semble faux.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
- le suivant, vous ne devez pas utiliser
{% static ..% }
<link rel="preconnect" href="{% static 'https://fonts.gstatic.com' %}">
Comme il existe de nombreuses erreurs, il peut être préférable de toutes les supprimer et d'ajouter ces lignes (après correction de la cause) une par une pour résoudre ce problème.
peut être un problème lors de la diffusion des fichiers statiques. si vous ne l'avez pas déjà fait, essayez de vérifier:https://docs.djangoproject.com/en/3.1/howto/static-files/
Dans votre fichier Settings.py, essayez de changer le nom du répertoire STATIC_ROOT en «static» au lieu de «staticfiles».
Ainsi, votre code ressemblera à:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Et pour plus de sécurité, essayez de courir python manage.py makemigrationset ensuite python manage.py migrate. Ainsi, si des modifications se produisent dans les bases de données, elles seront appliquées.