html - 使用 Twig 更改父模板的 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-->

例如，在 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 类属性使用 block :

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>

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

您现在可以在页面模板中扩展 fullwidth.html 或 sidebar.html，而不是扩展 base.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 %}