Django + skelJS / 静态文件问题 / 对 CSS 中图像的引用
Django + skelJS / Static Files Issue / References to Images in CSS
编辑:这个问题是由skelJS引起的,而不是Django。见答案。
我对 Django 相当陌生,但已经阅读了文档、谷歌和几个 StackOverflow 主题,似乎无法让静态文件按预期工作。
当我的模板被渲染时,静态路径被正确插入(例如{{ STATIC_URL }}css/style.css被转换为static/css/style.css。我可以在浏览器中导航到http://127.0.0.1:8000/static/css/style.css
。
部分工作,但 CSS 文件中引用的图像未呈现。但是,我可以毫无问题地导航到http://127.0.0.1:8000/static/css/images/bg02.jpg
(身体背景图像(。出于好奇,我运行了 collectstatic manage.py 它用 css/、js/和 image/填充了我的静态文件夹,将我的(un-Django templated(索引.html复制到该目录,打开它,一切都正确呈现。此外,在风格.css上,我使用 find 和 replace 将所有出现的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]-->
...
子模板主页.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 %}
呈现的网页
<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'
}
风格.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');
}
好吧,伙计们,我是对的,这与 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。
使用图像的相对路径。它们相对于 css 文件所在的位置。因此,如果 STATIC_ROOT/css/style 中的背景图像声明.css需要在 STATIC_ROOT/images/bg02 中引用 bg02.jpg.jpg则应像background-image: url(../images/bg02.jpg)
- 使用NG Repeat angularJS格式化CSS图像
- 使用jquery在toggle上添加和删除css图像类
- Javascript 中的动态 CSS 图像 URL
- 无法在单个 HTML 页面上显示 Java/CSS 图像库的多个实例
- 加载时翻转 CSS 图像
- 在SVG中显示CSS图像精灵,而不使用外来对象
- 在创建的Joomla模块中链接背景CSS图像
- 使用 JavaScript 下载页面的 CSS/图像等 HTTPS 资源并将它们写入临时文件
- CSS 图像查看器:图像旋转(和缩放)
- HTML/CSS图像悬停-使用不同大小的图像
- Jquery和CSS图像居中在选项卡中不起作用
- 分离css图像属性
- CSS图像不透明度渐变与多个元素(类)
- 在显示预加载程序的同时预加载所有CSS图像
- 模糊背景- Jquery /纯CSS /图像
- 调整CSS图像蒙版:悬停在旋转木马上
- JS CSS -图像只是弹出或弹出没有动画
- 从子文件夹访问CSS图像时不显示
- 是否有可能在grunt中获得实时css/图像重新加载
- JS/CSS图像动画滚动效果