Django + skelJS /静态文件问题/参考图像在CSS

Question

编辑：此问题是由skelJS而不是Django引起的。见答案。

我对Django相当陌生，但已阅读文档，Google和几个StackOverflow主题，并且似乎无法使静态文件按预期工作。

当我的模板被渲染时，静态路径被正确插入（例如{{STATIC_URL}} css/style.css被转换成static/css/style.css。我可以在浏览器中导航到http://127.0.0.1:8000/static/css/style.css。

虽然CSS可以部分工作，但CSS文件中引用的图像没有被渲染，但是我可以导航到http://127.0.0.1:8000/static/css/images/bg02.jpg（正文背景图像），没有问题，出于好奇，我运行了manage.py collectstatic，它使用css /，js /和image /填充我的静态文件夹，将我的（un-Django模板化的）index.html复制到该目录中，打开它，并且正确地显示了所有内容。此外，在style.css中，我用find并将所有出现的images/*.jpg更改为static/css/images/*.jpg,css/images/*.jpg，并简单地*.jpg不满意（我也确认这些更改是通过在我的浏览器中访问http://127.0.0.1:8000/static/css/style.css进行的）。

任何帮助你好人都可以提供的将不胜感激。

父模板base_home.html

{% load staticfiles %} 
... 
<script src="{{ STATIC_URL }}js/jquery.min.js"></script> 
<script src="{{ STATIC_URL }}js/config.js"></script> 
<script src="{{ STATIC_URL }}js/skel.min.js"></script> 
<script src="{{ STATIC_URL }}js/skel-panels.min.js"></script> 
    <noscript> 
     <link rel="stylesheet" href="{{ STATIC_URL }}css/skel-noscript.css" /> 
     <link rel="stylesheet" href="{{ STATIC_URL }}css/style.css" /> 
     <link rel="stylesheet" href="{{ STATIC_URL }}css/style-desktop.css" /> 
    </noscript> 
    <!--[if lte IE 9]><link rel="stylesheet" href="{{ STATIC_URL }}css/ie9.css" /><![endif]--> 
    <!--[if lte IE 8]><script src="{{ STATIC_URL }}js/html5shiv.js"></script><![endif]--> 
... 

子模板home.html的（由视图调用，延伸base_home.html）

#This is pretty plain, but I wanted to add/learn the functionality early 
{% extends "base_home.html" %} 

{% block headline %}Insert catchy headline here.{% endblock %} 

呈现的HTML

<script src="/static/js/jquery.min.js"></script> 
<script src="/static/js/config.js"></script> 
<script src="/static/js/skel.min.js"></script> 
<script src="/static/js/skel-panels.min.js"></script> 

<noscript> 
    <link rel="stylesheet" href="/static/css/skel-noscript.css" /> 
    <link rel="stylesheet" href="/static/css/style.css" /> 
    <link rel="stylesheet" href="/static/css/style-desktop.css" /> 
</noscript> 
<!--[if lte IE 9]><link rel="stylesheet" href="/static/css/ie9.css" /><![endif]--> 
<!--[if lte IE 8]><script src="/static/js/html5shiv.js"></script><![endif]--> 

settings.py

... 
STATIC_ROOT = 'E:/Projects/sandbox/website/static' 
STATIC_URL = '/static/' 
STATICFILES_DIRS = (
    'E:/Projects/sandbox/website/resources', 
    # This dir contains css/ images/ and js/ 
) 
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder', 
    'django.contrib.staticfiles.finders.AppDirectoriesFinder', 
TEMPLATE_CONTEXT_PROCESSORS = (
    "django.core.context_processors.request", 
    "django.contrib.auth.context_processors.auth", 
    'django.core.context_processors.static', 
) 
... 

views.py

from django.shortcuts import render_to_response 
from django.template import RequestContext 
from sandbox.context_processors import sitevars 


def home(request): 
    return render_to_response("home.html", context_instance=RequestContext(request, processors=[sitevars])) 

context_processors.py

def sitevars(request): 
    return { 
     'meta_d': 'Meta description here', 
     'meta_k': 'Meta keywords here', 
     'title': 'HTML page title here', 
     'logo': 'Text that needs to be inserted on pages', 
     'copyright': r'HTML/text that needs to be inserted on pages' 
    } 

的style.css

body 
{ 
    background: #D4D9DD url('images/bg02.jpg'); 
} 
... 
.check-list li 
{ 
    ... 
    background: url('images/icon-checkmark.png') 0px 1.05em no-repeat; 
} 
... 
.bordered-feature-image 
{ 
    ... 
    background: #fff url('images/bg04.png'); 
} 
... 
.custom-feature-image 
{ 
    ... 
    background: #fff url('images/bg05.png'); 
} 
... 
.item header 
{ 
    ... 
    background: #2b3336 url('images/bg01.jpg'); 
} 

Answer 1

好的人，我是对的，这不是与Django有关，为此我表示歉意。

对于任何使用skelJS的读者...

美化后/解最小化代码，查找：

newStyleSheet: function (a) { 
    var c = document.createElement("link"); 
    c.rel = "stylesheet"; 
    c.type = "text/css"; 
    c.href = a; 
    return c 
}, 

然后，c.href = "/static/" + a;取代c.href = a;其中 “/静态/” 是settings.py中定义了STATIC_URL。

Answer 2

使用图像的相对路径。它们与css文件所在的位置有关。因此，如果STATIC_ROOT/css/style.css中的背景图像声明需要引用STATIC_ROOT/images/bg02.jpg中的bg02.jpg，则应声明为background-image: url(../images/bg02.jpg)