3

编辑：这个问题是由 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/ 填充了我的静态文件夹，将我的（非 Django 模板化的）index.html 复制到该目录，打开它，一切都正确呈现。此外，在 style.css 中，我使用 find 和 replace 来更改所有出现的images/*.jpgto 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]-->

设置.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',
)
...

视图.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'
    }

样式.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');
}
4

2 回答 2

4

好的，伙计们，我是对的，这根本与 Django 无关，对此我深表歉意。

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

美化/去最小化代码后，寻找：

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

然后，替换c.href = a;为c.href = "/static/" + a;“/static/”是您在 settings.py 中定义的 STATIC_URL。

于 2013-10-03T23:09:40.870 回答
0

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

于 2013-10-02T21:37:31.307 回答