CSS, Bootstrap ve Javascript Django ile çalışmıyor
Derecemdeki son proje olarak bir webapp oluşturmaya çalışıyorum, ancak css'yi django ile yapılandırırken sorunlar yaşıyorum. Başarılı olamadan internette zaten birkaç tavsiyede bulundum. Etiketlere "stil" eklediğimde düzgün çalışıyor, ancak ".css" dosyasını kullanmaya çalıştığımda yüklenmiyor. Biri bana yardım edebilir mi lütfen?
İşte html başlığım:
{% 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>
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'm:
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)
Dizinler:
├───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
Yanıtlar
Burada birkaç probleminiz var:
Html dosyanızda, kullanmak için
{% static ... %},{% load static %}her şeyden önce head kısmına eklemelisiniz<link..>vs. Belgeye göz atın.https://docs.djangoproject.com/en/3.1/howto/static-files/Ayrıca değiştirmek gerekir
{ % static 'static/css/ .. %}için{ % static 'css/...%}Olanları kullanmayın için
{% static ...%}, birçok yazım hatası var. Örneğin:
Bunlarda ek var {
<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">
Bu bağlantı yanlış görünüyor.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
- aşağıdaki, kullanmamalısınız
{% static ..% }
<link rel="preconnect" href="{% static 'https://fonts.gstatic.com' %}">
Çok sayıda hata olduğundan, bu sorunu çözmek için hepsini silip bu satırları (neden düzeltildikten sonra) tek tek eklemek en iyisi olabilir.
statik dosyaların sunulmasıyla ilgili bir sorun olabilir. Henüz yapmadıysanız, kontrol etmeyi deneyin:https://docs.djangoproject.com/en/3.1/howto/static-files/
Settings.py dosyanızın içinde STATIC_ROOT dizin adını 'statik dosyalar' yerine 'statik' olarak değiştirmeyi deneyin.
Yani kodunuz şöyle görünecek:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Ve güvenli taraf için koşmayı deneyin python manage.py makemigrationsve sonra python manage.py migrate. Böylece veritabanlarında herhangi bir değişiklik olursa uygulanmış olur.