在 Twig 布局块中附加内联脚本

Question

我的布局如下所示：

<html>
<body>

  <!-- Omitted -->

  <div class="content">
    {% block body %}{% endblock %}
  </div>

  <script src="js/vendor.js"></script>
  {% block javascripts %}
    <!-- I want to be able to inject inline scripts from sub-templates here -->
  {% endblock %}
 </body>
 </html>

然后我从 FOSUserBundle 覆盖了 register_content.html.twig 模板，在其中我试图将脚本注入 "javascripts" 块，如下所示：

{% block javascripts %}
  <script>
    // Some inline JS
  </script>
{% endblock %}

我遇到的问题是内联脚本似乎是在 "body" 块的末尾注入的，而不是在 "scripts" 块中注入的。

这是我得到的输出：

      <!-- This should be below js/vendor.js scripts -->      
      <script>
        // Some inline JS
      </script>
    </div>
</div>

<script src="js/vendor.js"></script>

我做错了什么？我的问题是否出在 FOSUserBundle 及其继承自的模板上（它仍然使用我的布局和其中的所有内容；而不是它自己的布局）。我在这里很困惑。

P.S。我是 Symfony/Twig 的新手，所以请放轻松。

编辑：这些是我覆盖的 FOSUserBundle 布局和模板：

app/Resources/FOSUserBundle/views/layout.html.twig:

{% extends 'AcmeWebBundle::layout.html.twig' %}

{% block title %}Acme Demo Application{% endblock %}

{% block body %}
    {% block fos_user_content %}{% endblock %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}

app/Resources/FOSUserBundle/views/Registration/register.html.twig:

{% extends "FOSUserBundle::layout.html.twig" %}

{% block body %}
    {% block fos_user_content %}
        {% include "FOSUserBundle:Registration:register_content.html.twig" %}        
    {% endblock fos_user_content %}
{% endblock %}

{% block javascripts %}
    {% parent() %}
{% endblock %}

app/Resources/FOSUserBundle/views/Registration/register_content.html.twig:

<div class="page-header">
    <h2>Register</h2>
</div>

<form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register form-horizontal">
    <!-- HTML Omitted --> 
</form>

{% block javascripts %}
    {% javascripts '@AcmeWebBundle/Resources/public/js/app.js' %}
    <script>
        // jQuery is undefined because it gets defined below the 'javascripts' block in the parent layout
        console.dir(window.jQuery);
    </script>
    {% endjavascripts %}
{% endblock %}

Answer 1

编辑后情况更清楚了。

您期望的行为仅适用于模板继承；它不适用于 include，就像您在 app/Resources/FOSUserBundle/views/Registration/register.html.twig.

中那样

要执行您想要的操作，请执行以下操作之一：

将 app/Resources/FOSUserBundle/views/Registration/register_content.html.twig 的 javascript 块中的内联 JavaScript 代码放在 app/Resources/FOSUserBundle/views/Registration/register.html.twig[=20 的 javascript 块内=]
让模板 app/Resources/FOSUserBundle/views/Registration/register.html.twig 继承自 app/Resources/FOSUserBundle/views/Registration/register_content.html.twig 并根据需要覆盖其块（register_content.html.twig 不扩展 layout.html.twig，因此这不会很有道理）

在 Twig 布局块中附加内联脚本

Append inline scripts inside Twig layout block

php

templates

symfony

twig

fosuserbundle