Question

我想用html封装块Twig ，而不必将此html代码重写为此块的每次调用。

以下示例代码说明了我的问题。

文件1：

#base.html.twig
<div id="content">
    {% block body %}{% endblock %}
</div>

文件2：

#layout.html.twig
{% extends 'file1' %}
{% block body %}
<div class="panel panel-default">
    <div class="panel-heading">
         % block subHeader %}
            {% block contextualMenu %}
            {% endblock contextualMenu %} 
        {% endblock subHeader %}               
    </div>
</div> 
{% endblock body %}

文件3：

#view.html.twig
{% extends 'file2' %}
{% block body %}
    {% block subHeader %} 
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a 
            diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac 
            quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. 
            Praesent et diam eget libero egestas mattis sit amet vitae augue.
        </p> 

        {% block contextualMenu %}
            <div class="btn-group">
                <a href="{{ path('collection_new') }}" type="button" class="btn btn-default">New</a>              
            </div>
        {% endblock contextualMenu %} 
    {% endblock subHeader %}
{% endblock body %}

Answer 1

根据我在twig文件EXTENDS的文档中找到的内容，似乎问题出现在子窗口的嵌套twig文件中，您也不需要将它们定义为嵌套文件。

{% extends 'BundleName:Path:file2.twig' %}
{% block subHeader %} 
    {{ parent() }}
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a 
        diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac 
        quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. 
        Praesent et diam eget libero egestas mattis sit amet vitae augue.
    </p> 
{% endblock %}
{% block contextualMenu %}
    {{ parent() }}
        <div class="btn-group">
            <a href="{{ path('collection_new') }}" type="button" class="btn btn-default">New</a>              
        </div>
{% endblock %}

文件2应为：

{% extends 'BundleName:Path:file1.twig' %}
{% block body %}
<div class="panel panel-default">
    <div class="panel-heading">
        {% block subHeader %}
            {% block contextualMenu %}
            {% endblock %}
        {% endblock subHeader %}
    </div>
</div>
{% endblock %}

Answer 2

我找到了解决问题的方法，但它针对特定情况。我解释：我提出了一个条件来包装file2的html代码。例如，我这样做：

File1：

#base.html.twig
<div id="content">
    {% block body %}{% endblock %}
</div>

File2（有条件）：

    #layout.html.twig
    {% extends 'file1' %}
    {% block body %}
        {% if bundle == 'AdminBundle'%}
            <div class="panel panel-default">
                <div class="panel-heading">
                    {% block subHeader %}
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a 
                            diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac 
                            quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. 
                            Praesent et diam eget libero egestas mattis sit amet vitae augue.
                        </p> 
                       {% if bundle == 'AdminBundle'%}
                           <div class="btn-group">
                               {% if currentRoute == 'collection' %}
                                   <a href="{{ path('collection_new') }}" type="button" class="btn btn-default">
                                       <span class="glyphicon glyphicon-plus"></span> New
                                   </a>    
                               {% endif %}  
                               {% if currentRoute == 'image' %}
                                   <a href="{{ path('image_new') }}" type="button" class="btn btn-default">
                                       <span class="glyphicon glyphicon-plus"></span> New
                                   </a>    
                               {% endif %}  
                           </div> 
                       {% endif %}
                   {% endblock subHeader %}               
               </div>
           </div> 
        {% endif %}
    {% endblock body %}

文件3：

#view.html.twig
{% extends 'file2' %}
{% block body %}
    {% block subHeader %} 
        {{ parent() }}
    {% endblock subHeader %}  
{% endblock body %}

使用这种技术，file2的html代码不会被覆盖。

Answer 3

下一个更简单的解决方案是：

File1：

#base.html.twig
<div id="content">
    {% block body %}{% endblock %}
</div>

File2：

#layout.html.twig
{% extends 'file1' %}
{% block body %}
<div class="panel panel-default">
    <div class="panel-heading">
         {% block subHeader %}
            {% block contextualMenu %}
            {% endblock contextualMenu %} 
        {% endblock subHeader %}               
    </div>
</div> 
{% endblock body %}

File3：

#view.html.twig
{% extends 'file2' %}
{% block body %}
    {{ parent() }}
{% endblock body %}

{% block subHeader %}
    <!-- your code -->
    {% block contextualMenu %}
        <!-- your code -->
    {% endblock contextualMenu %} 
{% endblock subHeader %}

Twig，用html和多个扩展文件封装一个块

3 个答案: