jinja2 - How implement/replace extending blocks from 2 different files in Nunjucks? -
i'm using nunjucks 2 days , have encountered situation, i'm not sure how handle best.
on bottom simplified code of templates.
the problem i'm having want abstract heading
element (on bottom of maincontent
block) in template1
, template2
file not repeat whole <div><h1>..</h1><h2>..</h2></div>
structure classes in both files. can't partials, don't accept arguments , text contents of headings different in both contexts; structure same. ideally write inside of maincontent
block {% extend "bases/heading.njk" %}
, pass both h1
, h2
contents blocks: primaryheading
, secondaryheading
. impossible, can extend 1 template per file , both templates extending bases/base.njk
.
i know overcome delegating headings other partials: partials/template1-heading.njk
, partials/template2-heading.njk
, extend bases/heading.njk
, seems me it's far complicated create 2 layers of inheritance (including partial extends template) such simple task.
i know specify heading structure , content blocks (primaryheading
, secondaryheading
) in bases/base.njk
inside maincontent
block, feel code doesn't belong there. let's have third template, extend same base, not have heading.
what's best way handle such situation in nunjucks?
template1.njk
{% extend "bases/base.njk" %} {% block title %}title 1% endblock %} {% block additionalhead %} <script ...></script> <link ... /> {% endblock %} {% block maincontent %} {% include "partials/partial1.njk %} {% include "partials/partial2.njk %} {% include "partials/partial3.njk %} <div class="heading"> <h1 class="heading_primary">primary heading <span class="js-do-something">with html</span></h1> <h2 class="heading_secondary">secondary heading</h2> </div> <!-- content --> ... {% endblock %}
template2.njk
{% extend "bases/base.njk" %} {% block title %}title 2{% endblock %} {% block maincontent %} <div class="heading"> <h1 class="heading_primary">other primary heading</h1> <h2 class="heading_secondary">other secondary heading</h2> </div> <!-- content --> ... {% endblock %}
bases/base.njk
<!doctype html> <html> <head> <meta charset="utf-8" /> <!-- prevent mobile devices scaling page. --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>{% block title %}{% endblock %}</title> {% block additionalhead %}{% endblock %} <!-- scripts , styles --> <link rel="stylesheet" href="styles.css" /> <script src="scripts.js"></script> </head> <body class="layout-body"> {% include "partials/header.njk" %} {% block maincontent %}{% endblock %} {% include "partials/footer.njk" %} </body> </html>
bases/heading.njk (a template fill needs, can't extend it)
<div class="heading"> <h1 class="heading_primary">{% block primaryheading %}{% endblock %}/h1> <h2 class="heading_secondary">{% block secondaryheading %}{% endblock %}</h2> </div>
Comments
Post a Comment