Search code examples
node.jstemplate-engineswig-template

How an included partial insert code into parent's block?


What I want to do is to add the scripts block in dropdown.swig added to scripts block in template.swig.
My usage pattern could be wrong. I've a working code using ejs-locals template engine but I would like to switch to swig.

Here's the code:

<!-- template.swig, to be extended -->
<body>
  <header>
    {% include "navbar.swig" %}
  </header>
  <!-- template scripts -->
  <script src="/scripts/jquery.min.js"></script>

  {% block body %}{% endblock %}

  <!-- child scripts -->
  {% block scripts %}{% endblock %}
</body>


<!-- index.swig, to be rendered-->
{% extends "template.swig" %}

{% block content %}
<div class="container row-fluid">
  body
</div> <!-- row-fluid -->
{% endblock %}


<!-- navbar.swig, to be included-->
<div class="navbar navbar-fixed-top">
    <!-- bootstrap navbar stuff -->
    <!-- ... -->

    {% if not hideDropDown %}
      {% include "dropdown.swig" %}
    {% endif %}
</div>


<!-- dropdown.swig, to be included-->
<div class="btn-group pull-right">
    <!-- bootstrap drop down menu stuff -->
    <!-- ... -->
</div>

{% block scripts %}
{% autoescape false %}
<script src="/scripts/bootstrap-dropdown.js"></script>
<script>
  $(document).ready(function() {
    $('.dropdown-toggle').dropdown();
  });
</script>
{% endautoescape %}
{% endblock %}

Solution

  • We have to do multiple extends in swig, see Issue 47 (with sample code).

    Can anyone shed light on whether embed tag can solve my need?