CSS，Bootstrap和Javascript无法与Django一起使用 [英] CSS, Bootstrap and Javascript is not working with Django
问题描述
我正在尝试将Webapp作为最终学位构建，但是在使用django配置css时遇到了问题.我已经在互联网上做了一些建议，但没有成功.当我添加样式"时，在标签上可以正常使用，但是当我尝试使用".css"标签时，文件不会加载.有人可以帮我吗?
这是我的html头:
{％load static％}<！DOCTYPE html>< html lang ="en">< head><元字符集="UTF-8"><元名称=视口"内容＝宽度＝设备宽度，初始比例＝ 1.0."< link href =" {％static'static/css/index.css'％}'"rel ="stylesheet"type ="text/css">< link rel =预连接"；href =&"; {％static'https://fonts.gstatic.com'％}'>< script src ="https://polyfill.io/v3/polyfill.min.js?features=default"</script><脚本src =" https://maps.googleapis.com/maps/api/js?key = AIzaSyDikjsB27i23XRQad382KBcFHKNxzZ--1w& callback = initAutocomplete& libraries = places& v = weekly"推迟></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"/><元名称=视口"内容＝宽度＝设备宽度，初始比例＝ 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"完整性="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"crossorigin =匿名"< script src ="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"</script>< title>队列</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:
来自django.contrib的 导入管理员从django.urls导入路径，包括从django.conf导入设置从django.conf.urls.static导入静态urlpatterns = [路径("admin/"，admin.site.urls)，path(''，include('queueApp.urls'))，]如果settings.DEBUG:urlpatterns + =静态(settings.MEDIA_URL，document_root = settings.MEDIA_ROOT)如果settings.DEBUG:urlpatterns + =静态(settings.STATIC_URL，document_root = settings.STATIC_ROOT) 目录:
<代码>├───queueApp││admin.py││apps.py││models.py││tests.py││urls.py││views.py││__init__.py│││├───移民│││__init__.py│││││└───__pycache__││__init __.cpython-38.pyc│││├───模板││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│├───静态│├───css││index.css│││├───img│└───js│index.js
您在这里遇到了几个问题:
-
在您的html文件中，为了使用
{％static ...％}，应在头部添加{％load static％}所有< link ..>之前的部分.等.签出文档 https://docs.djangoproject.com/zh/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'％}'> 由于存在许多错误，因此最好将其全部删除，并逐行添加(在更正原因之后)这些行以解决此问题.
I'm trying to build a webapp as a final project in my degree, but I'm having problems with configuring the css with django. I already did a few recommendations on the internet without success. When I add "style" on tags it works properly, but when I tries to use the ".css" file it doesn't load. Could anyone help me please?
Here is my html head:
{% 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>
My 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/')
my 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)
Directories:
├───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
You have several problems here:
In your html file, in order to use
{% static ... %}, you should add{% load static %}in the head section before all the<link..>etc. Check out the document https://docs.djangoproject.com/en/3.1/howto/static-files/also you should change
{ % static 'static/css/ .. %}to{ % static 'css/...%}For the ones do not use
{% static ...%}, you have many typos. For example:
These ones have additional {
<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">
This link seems wrong.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
- the following one, you should not use
{% static ..% }
<link rel="preconnect" href="{% static 'https://fonts.gstatic.com' %}">
Since there are many errors, it may be best to delete them all, and add those lines (after correction of cause) one-by-one to resolve this issue.
这篇关于CSS，Bootstrap和Javascript无法与Django一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
