CSS, Bootstrap 및 Javascript가 Django에서 작동하지 않습니다.
내 학위에서 최종 프로젝트로 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>
내 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
답변
여기에 몇 가지 문제가 있습니다.
html 파일에서를 사용하기 위해서는 먼저 head 섹션에
{% 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' %}">
오류가 많으므로 모두 삭제하고 원인을 수정 한 후 해당 줄을 하나씩 추가하여 문제를 해결하는 것이 가장 좋습니다.
정적 파일을 제공하는 데 문제가있을 수 있습니다. 이미 해본 적이 없다면 다음을 확인해보세요.https://docs.djangoproject.com/en/3.1/howto/static-files/
Settings.py 파일 내에서 STATIC_ROOT 디렉토리 이름을 'staticfiles'대신 'static'으로 변경해보십시오.
따라서 코드는 다음과 같습니다.
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
그리고 안전한 쪽을 위해 달리기를 시도한 python manage.py makemigrations다음 python manage.py migrate. 따라서 데이터베이스 내에서 변경 사항이 발생하면 적용됩니다.