如何在Django中添加CSS,JS,图像?

时间:2019-12-20 01:54:17

标签: python html css django django-static

我在静态内部创建了CSS文件

static
     css
        resume.css

在setting.py中,我没有更改任何静态代码。

我在view.py中将index.html文件称为

每当我从index.html调用resume.css文件时。 它不起作用,但是当我检查代码时,它显示了resume.css的正确路径。 每当我运行代码时,我都不会收到任何错误。因此,我无法弄清问题

这是HTML代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <title> resume</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/resume.css' %}">
</head>

<body>
    <header class="w3-hide-small main-header">
        <h1 class=" header"> welcome to my page </h1>
    </header>
    <header class="w3-show-small w3-hide-medium w3-hide-large main-header">
        <h1 class="w3-center header-for-small"> welcome to <br/>my page </h1>
    </header>
</body>

</html>

这是CSS代码:

.main-header{
     background-color: antiquewhite;
}
 .header{
     margin-top: 0px;
     margin-left: 50px;
     font-size: 25px;
     text-transform: uppercase;
     color: blue;
     text-shadow: 2px 2px;
     padding: 15px;
     margin-bottom: 0px;
}
 .header-for-small{
     margin-top: 0px;
     font-size: 20px;
     font-weight:bold;
     text-transform: uppercase;
     color: blue;
     padding: 15px;
     font-family: fontawesome;
     margin-bottom: 0px;
}

view.py

def index(request):
    return render(request, 'Web/index.html')

此url.py由python创建

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('Web.urls'))
]

此url.py由我在项目或应用中创建

urlpatterns = [
    path('', views.index, name='index'),
]

2 个答案:

答案 0 :(得分:0)

在设置中,请确保您具有这些条目。

settings.py

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_DIR = os.path.join(BASE_DIR,"static")

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    STATIC_DIR,
]

在您的html代码之上,首先使用以下代码加载静态文件:

<!DOCTYPE html>
{% load staticfiles %}

要访问图像,请在html文件中使用它:

<img src={%static "images/pic.jpg" %} />

答案 1 :(得分:0)

我面临着同样的问题。确保HTML文件顶部有{% load static %}。如果那不起作用,请尝试

STATIC_ROOT = "/static/"

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]

将此添加到您的settings.py中,然后运行命令"python manage.py collectstatic" 希望对您有用。