6

2つのdjangoテンプレートページがあります。そのうちの1つは「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"/>

でbodycssを変更しようとしましたがtemplate_conf.css、を含むページは他にありませんtemplate_conf.css。

4

3 に答える 3

11

メインテンプレート：

<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でこのクラスを定義する必要があります。

于 2013-02-08T21:14:55.427 に答える
10

これを行うには、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.htmltemplate_conf.cssに別のタグを追加することで、cssタグをオーバーライドできます。<link>

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

これにより、変更が必要なbase.htmlの部分をオーバーライドしながら、必要なchild.htmlのページの部分を微調整することができます。

于 2013-02-09T11:14:14.647 に答える
1

新しいcssがfirebugまたは他のブラウザデバッガにロードされているのを確認した場合は、次のことを試してください。

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

}

于 2013-02-08T21:17:04.420 に答える