Question

base.html.twig

 <!doctype html>
    <html lang="en">

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      {% block stylesheets %}

      <!-- Styles -->
      <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">

      <link rel="stylesheet" href="{{ asset('css/_all-skins.min.css') }}">
      <link rel="stylesheet" href="{{ asset('css/font-awesome.css') }}">
      <link rel="stylesheet" href="{{ asset('css/style.css') }}">
      <link rel="stylesheet" href="{{ asset('css/dataTables.bootstrap.css') }}">
      <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css">

      {% endblock %}

    </head>

    <body class="skin-blue sidebar-mini">

      {% block body %}
      {% endblock %}

      {% block javascripts %}

      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
      <script src="js/app.js"></script>
      <script src="/js/main.js"></script>
      <script src="{{ asset('bundles/datatables/js/datatables.js') }}"></script>

      <script>
      $(function() {
        $('#user').initDataTables({{ datatable_settings(datatable) }}, {
          searching: true,
          "processing": false,
        });
      });
      </script>

      {% endblock %}

    </body>
   </html>

list.html.twig

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

{% block title %}Symfony{% endblock %}

{% block body %}

<div class="wrapper">

{{ include('inc/navbar.html.twig') }}

<div class="content-wrapper" style="min-height: 866px;">

  <section class="content-header">
    <h1>Mitarbeiter</h1>
  </section>


  <section class="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="box">
          <!-- /.box-header -->
          <div class="box-body">

            <!-- in the <head> section -->
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.2.1/dt-1.10.16/datatables.min.css"/>

            <!-- Insert this where you want the table to appear -->
            <div id="user">Loading...</div>

          </div>
        </div>
      </div>
    </div>
  </section>
</div>
<!-- /.content-wrapper -->

</div>
<!-- ./wrapper -->


{% endblock %}

我想将部分JavaScript代码从base.html.twig放入list.html.twig。这就是我的移动方式：

base.html.twig

 <!doctype html>
    <html lang="en">

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      {% block stylesheets %}

      <!-- Styles -->
      <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">

      <link rel="stylesheet" href="{{ asset('css/_all-skins.min.css') }}">
      <link rel="stylesheet" href="{{ asset('css/font-awesome.css') }}">
      <link rel="stylesheet" href="{{ asset('css/style.css') }}">
      <link rel="stylesheet" href="{{ asset('css/dataTables.bootstrap.css') }}">
      <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css">

      {% endblock %}

    </head>

    <body class="skin-blue sidebar-mini">

      {% block body %}
      {% endblock %}

      {% block javascripts %}

      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
      <script src="js/app.js"></script>
      <script src="/js/main.js"></script>
      <script src="{{ asset('bundles/datatables/js/datatables.js') }}"></script>


      {% endblock %}

    </body>
   </html>

list.html.twig

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

{% block title %}Symfony{% endblock %}

{% block body %}

<div class="wrapper">

{{ include('inc/navbar.html.twig') }}

<div class="content-wrapper" style="min-height: 866px;">

  <section class="content-header">
    <h1>Mitarbeiter</h1>
  </section>


  <section class="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="box">
          <!-- /.box-header -->
          <div class="box-body">

            <!-- in the <head> section -->
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.2.1/dt-1.10.16/datatables.min.css"/>

            <!-- Insert this where you want the table to appear -->
            <div id="user">Loading...</div>

          </div>
        </div>
      </div>
    </div>
  </section>
</div>
<!-- /.content-wrapper -->

</div>
<!-- ./wrapper -->


{% endblock %}



 {% block javascripts %}

          <script>
          $(function() {
            $('#user').initDataTables({{ datatable_settings(datatable) }}, {
              searching: true,
              "processing": false,
            });
          });
          </script>

    {% endblock %}

但是现在我的数据表不再加载了。

Answer 1

您正在覆盖javascripts块。您必须通过在块中添加{{ parent() }}来指定“保留父内容”：

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


      <script>
      $(function() {
        ...
      });
      </script>

{% endblock %}

Answer 2

在覆盖块时，使用parent()函数呈现父块的内容。

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

    {# ... your custom code ... #}
{% endblock %}

https://twig.symfony.com/doc/2.x/functions/parent.html

Answer 3

在list中重新定义一个块时，它将替换在base中的一个块。这意味着您的基本javascript无法再加载，这很可能是页面无法正常工作的原因。

您可以使用{{ parent() }}将基本模板中的内容包括在新块中。这也使您可以选择旧内容相对于新内容应出现的位置。

如何将代码从一个块移到另一个

3 个答案: