我是否正确使用了 Twig 继承？

Question

我发现自己对 Twig 继承的运作方式有点困惑，我想确保我正确地使用它。

目前，我正在探索两种选择：一种可以完全按照预期运行（尽管感觉有些不合适），另一种在语法上似乎正确，但无法按预期运行。

选项 1：

感觉不对，但有效。

base.html.twig：

....   

{% block background_image %}
    {% include 'background_image.html.twig' %}
{% endblock %}

{% block body %}
{% endblock %}
 
....

background_image.html.twig：

{% block background_image %}
    <img id="responsive-image"
         src="{{ asset('images/charles-blue-p-500.jpeg') }}"
         data-src-500="{{ asset('images/charles-blue-p-500.jpeg') }}"
         data-src-800="{{ asset('images/charles-blue-p-800.jpeg') }}"
         data-src-1080="{{ asset('images/charles-blue-p-1080.jpeg') }}"
         data-src-1600="{{ asset('images/charles-blue-p-1600.jpeg') }}"
         data-src-2000="{{ asset('images/charles-blue-p-2000.jpeg') }}"
         data-src-2600="{{ asset('images/charles-blue-p-2600.jpeg') }}"
         data-src-3200="{{ asset('images/charles-blue-p-3200.jpeg') }}"
         alt="foobar">
{% endblock %}
 

选项2：

感觉不错，但不起作用。

base.html.twig：

    {% block body %}
    {% endblock %}

background_image.html.twig：

{% extends 'base.html.twig' %}

{% block body %}
    <img id="responsive-image"
         src="{{ asset('images/charles-blue-p-500.jpeg') }}"
         data-src-500="{{ asset('images/charles-blue-p-500.jpeg') }}"
         data-src-800="{{ asset('images/charles-blue-p-800.jpeg') }}"
         data-src-1080="{{ asset('images/charles-blue-p-1080.jpeg') }}"
         data-src-1600="{{ asset('images/charles-blue-p-1600.jpeg') }}"
         data-src-2000="{{ asset('images/charles-blue-p-2000.jpeg') }}"
         data-src-2600="{{ asset('images/charles-blue-p-2600.jpeg') }}"
         data-src-3200="{{ asset('images/charles-blue-p-3200.jpeg') }}"
         alt="foobar">
{% endblock %}

---

第二个选项对我来说看起来更有希望，因为我遵循了 https://symfonycasts.com/screencast/symfony/twig-inheritance ，它具有我正在寻找的 Twig 模板继承。

但是，我不明白为什么它不起作用。

Answer 1

很难说正确，因为你想要实现的目标并不绝对清楚。到目前为止，我不会做您提供的这两个选项中的任何一个......但让我退一步：

通常，base.html.twig 是整个网站的基本模板。如果所有页面都应该有这个背景图像（我假设你想要），下面的选项 1 和 2 是可行的。

基本模板定义“块”并可以定义这些块的默认内容。扩展基本模板的页面可以用不同的内容覆盖块的内容

选项1：在base.html.twig中定义背景

base.html.twig

....   

{% block background_image %}
    <img id="responsive-image"
         src="{{ asset('images/charles-blue-p-500.jpeg') }}"
         data-src-500="{{ asset('images/charles-blue-p-500.jpeg') }}"
         data-src-800="{{ asset('images/charles-blue-p-800.jpeg') }}"
         data-src-1080="{{ asset('images/charles-blue-p-1080.jpeg') }}"
         data-src-1600="{{ asset('images/charles-blue-p-1600.jpeg') }}"
         data-src-2000="{{ asset('images/charles-blue-p-2000.jpeg') }}"
         data-src-2600="{{ asset('images/charles-blue-p-2600.jpeg') }}"
         data-src-3200="{{ asset('images/charles-blue-p-3200.jpeg') }}"
         alt="foobar">
{% endblock %}

{% block body %}
{% endblock %}
 
....

或者另一种选择

选项 2：在另一个文件中定义背景

base.html.twig

...
{% block background_image %}
    {% include 'background_image.html.twig' %}
{% endblock %}

{% block body %}
{% endblock %}
...

但是background_image.html.twig应该看起来像这样：

    <img id="responsive-image"
         src="{{ asset('images/charles-blue-p-500.jpeg') }}"
         data-src-500="{{ asset('images/charles-blue-p-500.jpeg') }}"
         data-src-800="{{ asset('images/charles-blue-p-800.jpeg') }}"
         data-src-1080="{{ asset('images/charles-blue-p-1080.jpeg') }}"
         data-src-1600="{{ asset('images/charles-blue-p-1600.jpeg') }}"
         data-src-2000="{{ asset('images/charles-blue-p-2000.jpeg') }}"
         data-src-2600="{{ asset('images/charles-blue-p-2600.jpeg') }}"
         data-src-3200="{{ asset('images/charles-blue-p-3200.jpeg') }}"
         alt="foobar">

注意，没有

{% block ... %}

，因为基本模板中的

include

只会拉入代码。

覆盖模板

现在，这适用于两个选项，例如您有一个页面向用户显示并希望显示不同的背景图像 user.html.twig

{% extends "base.html.twig" %}

{% block background_image %}
  <!-- no background image ... or a different background image -->
{% endblock %}

{% block body %}
   here is the content of the user page
{% endblock %}

您还可以在块内使用

{{ parent() }}

从基本模板中获取（默认）内容，以防您只想添加更多 html 或其他内容。