覆盖包含的树枝模板中的块我的结构解决方案

2022-08-30 09:46:11

有没有一种通常“好”的方法来实现此功能?我已经阅读了有关“use”标签的信息,这似乎是迄今为止最好的选择,但我仍然不喜欢它不会让我引入任何外部html,只有块。

我将使用下面示例中的“include”标记来演示我试图描述的意图。

#base.html.twig
{% include 'elements/header.html.twig' %}
{% block content %}{% endblock %}
{% include 'elements/footer.html.twig' %}

#header.html.twig
<h1>This is my header</h1>
{% block page_title %} Default Page Title {% endblock %}

#index.html.twig
{% extends 'layouts/base.html.twig' %}
{# I want to be able to do this somehow #}
{% block page_title %} This is my overridden page title {% endblock %}
{% block content %} here is the index page content {% endblock %}

答案 1

我找到了一个解决方案。使用 block() 函数获取子级的块内容,并将其作为包含语句中的变量传递给 header.html.twig:

#base.html.twig
{% include 'elements/header.html.twig' with {page_title: block('page_title')} %}
{% block content %}{% endblock %}
{% include 'elements/footer.html.twig' %}

#header.html.twig
<h1>This is my header</h1>
{% if page_title is empty %}
Default Page Title
{% else %}
{{ page_title }}
{% endif %}

#index.html.twig
{% extends 'layouts/base.html.twig' %}
{% block page_title %} This is my overridden page title {% endblock %}
{% block content %} here is the index page content {% endblock %}

答案 2

我找到了一个很好的和真正的解决方案,阅读嵌入标签的文档。我在Symfony 4中使用Twig 2.0。

我的结构

#templates/base.html.twig
{% block navbar %}
    <nav>
    {% block menu %}
        {% include '_menu' %}
    {% endblock menu %}
    </nav>
{% endblock navbar %}
{% block content %}
    {# several blocks defined #}
    {% block footer '' %}
{% endblock content %}

#templates/_menu.html.twig
<ul>
    {% block sub_app_menu_itens %}
        <li>Main App Menu Item</li>
    {% endblock sub_app_menu_itens %}
    <li>Menu item</li>
    <li>Another menu item</li>
    <li>Yet another menu item</li>
</ul>

使用上面的代码,当我创建索引.html.twig时,显示默认内容所需的唯一代码是

#templates/index.html.twig
{% extends 'base.html.twig' %}

并覆盖定义的块。但是,当我需要创建另一个使用这些框架的页面时,如果我尝试覆盖包含的另一个_partial模板中的块sub_app_menu_itens,则不起作用。 始终显示并且永远不会被覆盖(上面的代码)<li>Main App Menu Item</li>

#templates/subapp/index.html.twig
{% extends 'base.html.twig' %}
{% block title %}{{ 'agencia.homepage'|trans }}{% endblock %}
{% block menu %}
    {% include 'subapp/_menu.html.twig' %}
{% endblock menu %}
{% block user_content %}Content Here{% endblock %}

#templates/subapp/_menu.html.twig
{% extends '_menu.html.twig' %}
{% block sub_app_menu_itens %}
        <li>SubApp Menu Item</li> 
{% endblock sub_app_menu_itens %}

<li>SubApp Menu Item</li>从不显示。尝试了很多类似甚至条件的东西,但没有运气。extends

解决方案

嵌入标记求解要覆盖的子部分模板块。

#templates/subapp/index.html.twig
{% block menu %}
    {% embed '_menu.html.twig' %}
        {% block sub_app_menu_itens %}
            {% include 'subapp/_menu.html.twig' %}
        {% endblock sub_app_menu_itens %}
    {% endembed %}
{% endblock menu %}

并简化_partial模板,使其仅包含所需的html

#templates/subapp/_menu.html.twig 
    <li>SubApp Menu Item</li> 

现在将显示在模板的正确位置_menu。<li>SubApp Menu Item</li>

在关卡中思考,一个像子关卡(解析)一样工作,所有的东西都只在同一个关卡上被覆盖,所以不允许在另一个包含中覆盖。相反,模板被带到相同的级别(未解析),因此您可以覆盖内容。includeincludeembed


推荐