Question

我有两个django模板页面，其中一个是“base.html”，基本的html标签设置为基本模板。现在我有一个扩展它的页面“child.html”，其中包含{% extends "base.html" %}。现在我必须更改此特定页面的<body>背景颜色，所以在“child.html”的CSS中我写道：

body {
    background-color: #000000;
    /* some other css here */
}

但身体似乎没有回应任何变化。我想我一定错过了什么。请帮助，谢谢。

修改在“child.html”中，我只是

<link rel="stylesheet" type="text/css" href="/site-media/css/template_conf.css"/>

我尝试更改template_conf.css中的正文css，并且没有其他页面包含template_conf.css。

Answer 1

为此，在头部的base.html中添加一个块，允许您在base.html中插入另一个css

<head>

    .... other head tags ....

    <link rel="stylesheet" type="text/css" href="/site-media/css/template_conf.css"/>
    {% block extra_css %}{% endblock %}
</head>

这允许您通过在child.html中添加另一个template_conf.css标记来覆盖<link>中的css标记

{% block extra_css %}
<link rel="stylesheet" type="text/css" href="/site-media/css/child_template.css"/>
{% endblock %}

这允许您覆盖需要更改的base.html部分，同时仍然能够调整child.html中所需的页面部分。

Answer 2

在主模板中：

<body class="{% block body_class %}{% endblock %}">
...
</body>

然后在子模板中，只需定义块：

{% block body_class %} my_new_body_css_class {% endblock %}

这将呈现<body class="my_new_body_css_class">...</body>，您必须在链接的CSS中定义此类。

Answer 3

如果您在firebug或其他浏览器调试器中看到新的css，请尝试：

body {
background-color: #000000 !important;
/* some other css here */

}

django模板：扩展模板是否能够在父页面中更改css？

3 个答案: