CSS, Bootstrap và Javascript không hoạt động với Django
Tôi đang cố gắng xây dựng một ứng dụng web như một dự án cuối cùng trong bằng cấp của mình, nhưng tôi đang gặp sự cố với việc định cấu hình css với django. Tôi đã thực hiện một số đề xuất trên internet mà không thành công. Khi tôi thêm "style" vào thẻ, nó hoạt động bình thường, nhưng khi tôi cố gắng sử dụng tệp ".css", nó không tải. Bất cứ ai có thể giúp tôi xin vui lòng?
Đây là phần đầu html của tôi:
{% 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>
Cài đặt của tôi.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 của tôi:
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)
Thư mục:
├───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
Trả lời
Bạn có một số vấn đề ở đây:
Trong tệp html của bạn, để sử dụng
{% static ... %}, bạn nên thêm{% load static %}vào phần đầu trước tất cả,<link..>v.v. Kiểm tra tài liệuhttps://docs.djangoproject.com/en/3.1/howto/static-files/bạn cũng nên thay đổi
{ % static 'static/css/ .. %}thành{ % static 'css/...%}Đối với những cái không sử dụng
{% static ...%}, bạn mắc nhiều lỗi chính tả. Ví dụ:
Những cái này có bổ sung {
<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">
Liên kết này có vẻ sai.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
- cái sau, bạn không nên sử dụng
{% static ..% }
<link rel="preconnect" href="{% static 'https://fonts.gstatic.com' %}">
Vì có nhiều lỗi, nên tốt nhất bạn nên xóa tất cả và thêm từng dòng đó (sau khi sửa nguyên nhân) lần lượt để giải quyết vấn đề này.
có thể là vấn đề với việc cung cấp các tệp tĩnh. nếu bạn chưa có, hãy thử kiểm tra:https://docs.djangoproject.com/en/3.1/howto/static-files/
Bên trong tệp Settings.py của bạn, hãy thử thay đổi tên thư mục STATIC_ROOT thành 'tĩnh' thay vì 'tệp tĩnh'.
Vì vậy, mã của bạn sẽ giống như sau:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Và để an toàn, hãy thử chạy python manage.py makemigrationsvà sau đó python manage.py migrate. Vì vậy, nếu bất kỳ thay đổi nào xảy ra trong cơ sở dữ liệu sẽ được áp dụng.