在 symfony 4 树枝模板中分离 JavaScript 文件

Question

我有一个问题，如何分离指定模板树枝文件的加载指定javascript文件。

例如，我得到了扩展 base.html.twig 的 admin.html.twig，在 base 中我得到了

   {% block javascripts %}

      <script src="/assets/js/core/jquery.min.js"></script>
      <script src="/assets/js/core/popper.min.js"></script>
      <script src="/assets/js/core/bootstrap-material-design.min.js"></script>
      <script src="/assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>

      <script async defer src="https://buttons.github.io/buttons.j"></script>
      <script src="/assets/js/plugins/chartist.min.js"></script>
      <script src="/assets/js/plugins/bootstrap-notify.js"></script>
      <script src="/assets/js/material-dashboard.min.js"></script>
      <script src="/assets/demo/jquery.sharrre.js"></script>
      <script src="/assets/js/sparkline.js"></script>
      <script src="/assets/js/plugins/chartjs.min.js"></script>
    {% endblock %}

我得到了像dashboard.html.twig这样的下一个文件，它扩展了一个admin.html.twig文件，我的问题是，在dashboard.html.twig文件中我得到了一个小小的自写小javascript代码，并且这个 javascript 当然使用 jquery 库，但是我在 base.html.twig 文件中加载了这个库，这是我在dashboard.html.twig 中的自写脚本的下一个。

我的问题是，例如，我如何加载我的小 javascript 代码（当然我可以将它保存在像 mycode.js 这样的单独文件中），但是如何仅在我使用的dashboard.html.twig 文件的这条路径时加载并在加载 jquery 之后？因为在另一个路由器中，我不想把它放到 javascript 块中的 base.html.twig 文件中，知道吗？

Answer 1

如果dashboard 直接扩展admin 那么您可以执行以下操作以确保加载所有管理脚本并添加dashboard 特定脚本：

{% extends "admin.html.twig" %}
{% block javascripts %}
    {{ parent() }} {# execute the parent block, thus loading all scripts in admin #}
    <script src="/assets/js/dashboard/mycode.js"></script>
{% endblock %}

Answer 2

你可以潜水

{% extends "admin.html.twig" %} {# use only in case your all templates are at the same places like app/Resources/views/admin.html.twig #}
{% block javascripts %}
    {{ parent() }} {# loads the parent javascript block, from the template you are extending in first line. #}
    <script src="/assets/js/dashboard/code.js"></script>
{% endblock %}

如果您尝试从另一个包中扩展模板，那么您可以使用它

{% extends "YourBundleName:Default:admin.html.twig" %} {# YourControllerRelativeName just in case your view structure is like views/Default/admin.html.twig#}
    {% block javascripts %}
        {{ parent() }} {# loads the parent javascript block, from the template you are extending in first line. #}
        <script src="/assets/js/dashboard/code.js"></script>
    {% endblock %}

为了更好地理解，您应该在这里阅读一点： https://symfony.com/doc/2.8/templating.html 注意：- 在文档中，您应该根据当前版本更改版本。

Answer 3

我会建议以下解决方案。

1. 在base.html.twig{% block javascripts %}{% endblock %}之后声明以下块

   {% block javascript_page %}{# specific code for current page #}{% endblock %}

2. 然后你可以在你的页面中包含页面特定的脚本

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

   {% block javascript_page %} <script src="/assets/js/pages/my_page.js"></script> {% endblock %}

虽然 DarkBee 的回答也是正确的，但是这样你就不必担心在每个页面中调用{{ parent() }}。