CSS, Bootstrap dan Javascript tidak bekerja dengan Django
Saya mencoba untuk membangun sebuah aplikasi web sebagai proyek akhir di tingkat saya, tetapi saya mengalami masalah dengan konfigurasi css dengan django. Saya sudah melakukan beberapa rekomendasi di internet tanpa hasil. Saat saya menambahkan "gaya" pada tag, ini berfungsi dengan baik, tetapi saat saya mencoba menggunakan file ".css", file tidak dimuat. Adakah yang bisa membantu saya?
Ini kepala html saya:
{% 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/')
urls.py saya:
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)
Direktori:
├───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
Jawaban
Anda mengalami beberapa masalah di sini:
Di file html Anda, untuk menggunakan
{% static ... %}, Anda harus menambahkan{% load static %}di bagian head sebelum semua<link..>dll. Periksa dokumennyahttps://docs.djangoproject.com/en/3.1/howto/static-files/Anda juga harus beralih
{ % static 'static/css/ .. %}ke{ % static 'css/...%}Untuk yang tidak terpakai
{% static ...%}, banyak kesalahan ketik. Sebagai contoh:
Yang ini memiliki tambahan {
<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">
Tautan ini sepertinya salah.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
- yang berikut ini, sebaiknya jangan gunakan
{% static ..% }
<link rel="preconnect" href="{% static 'https://fonts.gstatic.com' %}">
Karena ada banyak kesalahan, mungkin yang terbaik adalah menghapus semuanya, dan menambahkan baris tersebut (setelah koreksi penyebab) satu per satu untuk mengatasi masalah ini.
mungkin ada masalah dengan menyajikan file statis. jika Anda belum melakukannya, coba lihat:https://docs.djangoproject.com/en/3.1/howto/static-files/
Di dalam file Settings.py Anda coba ubah nama direktori STATIC_ROOT menjadi 'static' daripada 'staticfiles'.
Jadi, kode Anda akan terlihat seperti:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Dan untuk sisi yang aman coba lari python manage.py makemigrationsdan kemudian python manage.py migrate. Sehingga jika ada perubahan yang terjadi dalam database akan diterapkan.