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)