使用樹枝更改父模板的css選擇器

Question

我不能只是弄清楚如何處理不同模板中的不同CSS選擇器。

比如我有基本模板如下

<div id="main" class="container"> 
     <div id="content" class="content section row"> 
      <div class="col-md-8 bg-base col-lg-8 col-xl-9"> 
       {% block content %}{% endblock %} 
      </div><!--/col-md-8 bg-base col-lg-8 col-xl-9--> 

      <div class="sidebar col-md-4 col-lg-4 col-xl-3"> 
       {% block sidebar %} 

       {% endblock %} 
      </div> 

     </div> 

    </div><!--#main.container--> 

例如，在用戶的login.html我想改變<div id="content" class="content section row">內容部分行到別的

同一些與列。例如在我沒有側邊欄的頁面中，我想更改<div class="col-md-8 bg-base col-lg-8 col-xl-9"> col-lg-8至col-lg-12

我該如何做到這一動態？你們如何處理這些遺產？

Answer 1

隨着模板繼承的力量，你可以做到這一切。

例1：

使用塊爲div#content類屬性：

base.html文件

<div id="main" class="container"> 
    <div id="content" class="{% block contentClass %}content section row{% endblock %}"> 
     <div class="col-md-8 bg-base col-lg-8 col-xl-9"> 
      {% block content %}{% endblock %} 
     </div> 
    </div> 
</div> 

子template.html

{% extends "base.html" %} 
{% block contentClass %}content whatever{% endblock %} 
{% block content %} 
    some content 
{% endblock %} 

例2：

如果你有不同的佈局，如一個全角和邊欄的佈局，我會建議爲每個佈局的子模板，然後擴展你需要的佈局：

base.html文件

<div id="main" class="container"> 
    <div id="content" class="content section row"> 
     {% block content %}{% endblock %} 
    </div> 
</div> 

fullwidth.html

{% extends "base.html" %} 
{% block content %} 
    <div class="col-md-12"> 
     {% block content %}{% endblock %} 
    </div> 
{% endblock %} 

sidebar.html

{% extends "base.html" %} 
{% block content %} 
    <div class="col-md-8 bg-base col-lg-8 col-xl-9"> 
     {% block content %}{% endblock %} 
    </div> 

    <div class="sidebar col-md-4 col-lg-4 col-xl-3"> 
     {% block sidebar %}{% endblock %} 
    </div> 
{% endblock %} 

不是擴展base.html的，你現在可以擴展fullwidth.html或在你的頁面模板sidebar.html，e.g：

的login.html

{% extends "fullwidth.html" %} 
{% block content %} 
    ... login form ... 
{% endblock %} 

about.html

{% extends "sidebar.html" %} 
{% block content %} 
    <h1>About</h1> 
    <p>bla bla</p> 
{% endblock %} 
{% block sidebar %} 
    <h2>besides</h2> 
    <p>bla bla</p> 
{% endblock %}