我在将Css文件链接到Django模板时遇到问题

时间:2019-02-01 20:11:44

标签: css django python-3.x django-templates django-staticfiles

我刚刚开始学习django框架,我尝试添加和使用静态文件来设计具有简单CSS的网页模板(以更改背景),但是我的CSS文件似乎没有与html模板链接的背景不变。

我查看了各种解决方案,似乎我在代码中没有做任何错误,但仍然无法正常工作。请查看代码,我可能会丢失什么?

这是模板的代码;

{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="music/style.css">


{% if all_albums %}
<h3>My Albums</h3>
<ul>
    {% for album in all_albums %}
    <li><a href="{% url 'music:detail' album.id %}">{{album.album_title}}</a></li>
    {% endfor %}
</ul>

{% else %}
<h3>You don't have any albums</h3>
{% endif %} 

这是CSS;

body{
    background: white url("images/blackbackground.jpg");
}

我希望背景会有所变化,但并没有。服务器返回错误消息“未找到:/music/music/style.css [01 / Feb / 2019 12:15:26]“ GET /music/music/style.css HTTP / 1.1” 404 2559“伙计们,我还缺少什么?

1 个答案:

答案 0 :(得分:0)

要使静态文件在Django上工作,您需要有几个变量。

首先,必须在settings.py中设置静态文件变量。

在这里,我向您展示我使用的示例:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'staticfiles')
STATICFILES_DIRS = (
    'static',
    os.path.join(os.path.dirname(BASE_DIR), 'static')
)
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

这意味着您将需要在与主应用程序相同的文件夹中拥有一个静态文件夹。

例如:

├── apps
│   ├── api
│   ├── blog
│   └── home
├── manage.py
├── media
│   ├── images
│   └── original_images
├── requirements
│   ├── base.txt
│   ├── development.txt
│   └── production.txt
├── src    -----> THIS IS MY MAIN FOLDER
│   ├── __init__.py
│   ├── __pycache__
│   ├── db.sqlite3
│   ├── locale
│   ├── media
│   ├── settings ------> THIS IS MY SETTINGS FOLDER
│   ├── urls.py
│   └── wsgi.py
├── static    ------> THIS IS MY STATIC FOLDER
│   ├── css
│   ├── figures
│   ├── fonts
│   ├── img
├── templates
│   └── base.html
└── utilities

下一步,您需要将其添加到主urls.py

from django.conf.urls.static import static
from django.conf import settings

# Serve static files with Django. Normally this is for development purposes.
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

然后,最后一部分进入模板,您需要加载静态模板标签并使用以下语法:

{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'music/style.css' %}">

最后,它将呈现如下内容:

<link rel="stylesheet" type="text/css" href="/static/music/style.css">