編集: この問題は、Django ではなく skelJS が原因でした。答えを参照してください。
私は 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/*.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]-->
設定.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');
}