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-->

例如，在user-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，例如：

的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 %}

使用twig更改父模板的css选择器

1 个答案: