CSS, Bootstrap และ Javascript ไม่ทำงานกับ Django

Nov 26 2020

ฉันกำลังพยายามสร้าง webapp เป็นโปรเจ็กต์สุดท้ายในระดับของฉัน แต่ฉันมีปัญหากับการกำหนดค่า css ด้วย django ฉันทำตามคำแนะนำบางอย่างบนอินเทอร์เน็ตแล้วไม่ประสบความสำเร็จ เมื่อฉันเพิ่ม "style" บนแท็กมันจะทำงานได้อย่างถูกต้อง แต่เมื่อฉันพยายามใช้ไฟล์ ".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>

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 ของฉัน:

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 %}ในส่วน head ก่อน<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 เป็น "static" แทน "staticfiles"

ดังนั้นรหัสของคุณจะมีลักษณะดังนี้:

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

และสำหรับด้านความปลอดภัยลองใช้แล้วpython manage.py makemigrations python manage.py migrateดังนั้นหากมีการเปลี่ยนแปลงเกิดขึ้นภายในฐานข้อมูลจะถูกนำไปใช้