Question

我想在我的Django应用程序中使用Twitter Bootstrap，为此目的通过以下方式修改模板：

<!DOCTYPE html>

<html>
<head>
    <title>{{ genplan.name }}</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
    <h1>{{ genplan.name }}</h1>
    <ol>
        {% for cur_goal in goals %}
            <li>{{ cur_goal.description }}</li>
        {% endfor %}
    </ol>

    ...
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

MEDIA_ROOT和MEDIA_URL设置正确。

MEDIA_ROOT = 'D:/dev/ccp/ccp-gp/media'
MEDIA_URL = '/media/'

然而，在我添加Bootstrap样式表之后没有任何改变（该页面的外观没有改变），我想Django没有找到Bootstrap资源。

可能是什么导致了这个问题？

更新1：

我在urls.py

中使用此代码时

urlpatterns = patterns('',
    (r'^$', 'ccp_gp.general_plans.views.home'),     (r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT})     )

Python抱怨未定义的settings变量。

Answer 1

加载css和js时需要使用MEDIA_URL：

<link href="{{ MEDIA_URL }}css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="{{ MEDIA_URL }}js/bootstrap.min.js"></script>

除非您必须使用静态文件应用程序未附带的旧Django版本，否则我建议您使用STATIC_URL并将文件放入应用程序的static目录中。

<link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>

如评论中所述，您的{{ MEDIA_URL }}为空。为了解决这个问题，请确保TEMPLATE_CONTEXT_PROCESSORS设置包含“静态”和“媒体”上下文处理器。除非您修改了TEMPLATE_CONTEXT_PROCESSORS设置，否则情况已经如此。

模板上下文处理器仅在使用RequestContext呈现模板时使用。从Django 1.3开始，最好的方法是使用TemplateResponse。

例如：

from django.template.response import TemplateResponse

def index(request):
    genplan = ...
    goals = ...
    return TemplateResponse(request, 'index.html', {
        'genplan': genplan,
        'goals': goals,
    })

要通过开发服务器（manage.py runserver）传送MEDIA_DIR中的文件，您可以将以下代码添加到urls.py：

from django.conf import settings

if settings.DEBUG:
    urlpatterns += (
        url(r'^media/(.*)$', 'django.views.static.serve',
                    {'document_root': settings.MEDIA_ROOT}),
    )

如何在Django应用程序中使用Twitter Bootstrap

1 个答案: