CSS, Bootstrap y Javascript no funcionan con Django
Estoy tratando de construir una aplicación web como proyecto final de mi carrera, pero tengo problemas para configurar el CSS con django. Ya hice algunas recomendaciones en Internet sin éxito. Cuando agrego "estilo" a las etiquetas, funciona correctamente, pero cuando intento usar el archivo ".css", no se carga. ¿Alguien podría ayudarme por favor?
Aquí está mi encabezado 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>
Mi 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/')
mi 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)
Directorios:
├───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
Respuestas
Tienes varios problemas aquí:
En su archivo html, para usarlo
{% static ... %}, debe agregar{% load static %}en la sección de encabezado antes de todo el<link..>etc. Revise el documentohttps://docs.djangoproject.com/en/3.1/howto/static-files/también deberías cambiarte
{ % static 'static/css/ .. %}a{ % static 'css/...%}Para los que no usas
{% static ...%}, tienes muchos errores tipográficos. Por ejemplo:
Estos tienen adicionales {
<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">
Este vínculo parece incorrecto.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
- el siguiente, no debes usar
{% static ..% }
<link rel="preconnect" href="{% static 'https://fonts.gstatic.com' %}">
Dado que hay muchos errores, puede ser mejor eliminarlos todos y agregar esas líneas (después de corregir la causa) una por una para resolver este problema.
podría haber un problema con el servicio de archivos estáticos. si aún no lo ha hecho, intente revisar:https://docs.djangoproject.com/en/3.1/howto/static-files/
Dentro de su archivo Settings.py, intente cambiar el nombre del directorio STATIC_ROOT a 'static' en lugar de 'staticfiles'.
Entonces, su código se verá así:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Y por el lado seguro, intente correr python manage.py makemigrationsy luego python manage.py migrate. De modo que si ocurre algún cambio dentro de las bases de datos se aplicará.