如何修改Twig模板区块内单个HTML元素且尽量少覆写代码

最优方案：仅覆写目标div所在的最小区块 #

你不需要覆写外层的layout_main_navigation大块代码，只需要覆写包含目标div的layout_main_navigation_navbar区块即可，代码量极少：

{% block layout_main_navigation_navbar %}
    <div class="container-fluid">
        {# 继承原有区块内的全部子内容，不需要重写逻辑 #}
        {% block layout_main_navigation_menu %}
            {{ parent() }}
        {% endblock %}
        {# 原区块内的其他后续代码直接原样保留即可 #}
        ...
    </div>
{% endblock %}

方案说明 #

• 内部所有子区块的原有逻辑都会通过parent()完整继承，不需要复制冗余代码，也不会影响原有功能
• 如果后续需要调整该区块内的其他内容，也可以直接在该覆写内修改，不需要动上层代码

备选方案：CSS样式覆盖 #

如果不需要修改DOM结构，仅要实现container-fluid的显示效果，可以直接用CSS覆盖原有样式，无需修改Twig模板：

#mainNavigation .container {
    max-width: 100% !important;
    padding-inline: 1rem !important;
    /* 补充其他和你的项目中container-fluid一致的样式即可 */
}

内容的提问来源于stack exchange，提问作者Roman