सीएसएस, बूटस्ट्रैप और जावास्क्रिप्ट Django के साथ काम नहीं कर रहा है

Nov 26 2020

मैं अपनी डिग्री में एक अंतिम परियोजना के रूप में एक webapp बनाने की कोशिश कर रहा हूं, लेकिन मुझे django के साथ css को कॉन्फ़िगर करने में समस्या आ रही है। मैंने पहले ही सफलता के बिना इंटरनेट पर कुछ सिफारिशें कीं। जब मैं टैग पर "शैली" जोड़ता हूं तो यह ठीक से काम करता है, लेकिन जब मैं ".css" फ़ाइल का उपयोग करने का प्रयास करता हूं तो यह लोड नहीं होता है। क्या मेरी कोई मदद कर सकता है?

यहाँ मेरा 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>

मेरी सेटिंग

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:

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)

निर्देशिकाएँ:

├───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

जवाब

1 ha-neul Nov 26 2020 at 15:06

आपको यहां कई समस्याएं हैं:

अपनी HTML फ़ाइल में, उपयोग करने के लिए {% static ... %}, आपको {% load static %}सभी से पहले हेड सेक्शन में जोड़ना चाहिए <link..> आदि दस्तावेज़ देखेंhttps://docs.djangoproject.com/en/3.1/howto/static-files/
आपको यह भी बदलना चाहिए { % static 'static/css/ .. %}करने के लिए{ % static 'css/...%}
लोगों का उपयोग नहीं करने के लिए {% static ...%}, आपके पास कई टाइपो हैं। उदाहरण के लिए:

इन लोगों के पास अतिरिक्त है {

<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">

यह लिंक गलत लगता है।

        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

निम्नलिखित एक, आप का उपयोग नहीं करना चाहिए {% static ..% }

<link rel="preconnect" href="{% static 'https://fonts.gstatic.com' %}">

चूंकि कई त्रुटियां हैं, इसलिए उन सभी को हटाना और उन मुद्दों को हल करने के लिए एक-एक करके उन पंक्तियों को जोड़ना सबसे अच्छा हो सकता है।

KyleHynes Nov 26 2020 at 15:11

स्थैतिक फ़ाइलों की सेवा के साथ एक समस्या हो सकती है। यदि आप पहले से ही हवलदार हैं, तो देखें:https://docs.djangoproject.com/en/3.1/howto/static-files/

Yash Nov 26 2020 at 15:16

अपनी Settings.py फ़ाइल के अंदर STATIC_ROOT निर्देशिका नाम को 'staticfiles' के बजाय 'static' में बदलने का प्रयास करें।

तो, आपका कोड ऐसा दिखेगा:

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

और सुरक्षित पक्ष के लिए दौड़ने की कोशिश करें python manage.py makemigrationsऔर फिर python manage.py migrate। ताकि अगर डेटाबेस में कोई बदलाव होता है तो वह लागू हो जाएगा।