Choosing templating engine with extends, slots and include with parameters

Question

I am building a medium size html/scss/ts website. Since it is fairly complex with a lot of repetitive elements (layouts, repetive blocks) I started researching good SSG options (ended up using 11ty) and templating engines. However, after a long search and trying multiple templating engine, I dind't found any suitable. I was looking for two points which are minimum: ability to create extend template with placeholders for content (used for layouts) and ability to include partial with parameter, and bonus - ability to provide content to partials using slot/blocks.

I tried Nunjucks, EJS, and Mustache. None of them fulfilled all criteria. Which templating engine do you use which fulfills all of the above?

Nunjucks: have extends, but you can't pass data to include (there is an option to use a macro, but doesn't look clean) EJS: have the ability to pass data to include partial, but no option to extend

Btw, I am not interested in alternatives like Pug or Haml. Just regular HTML templating engines.

Answer 1

For complex multi-page sites, I like Nunjucks the best. Here is the demo multi page site using the Nunjucks template engine.

You can try the liquidjs. It should fill your criteria.

This template engine support the layout (works like extends):

layout.liquid

Header
{% block %}{% endblock %}
Footer

page.liquid

{% layout "layout.liquid" %}
{% block %}My page content{% endblock %}

You can pass variables into including partials:

{% assign my_variable = 'apples' %}
{% include 'product', my_variable: my_variable, my_other_variable: 'oranges' %}

Answer 2

I have created an extension for Nunjucks that adds components with slots as this was driving me nuts not having this functionality.

https://www.npmjs.com/package/nunjucks-components

It allows you to use components just like Svelte or Vue etc. It works as follows.

<!-- component.html !-->

<div>
    <slot>This slot will be replaced with content</slot>
</div>

Add the component to your page.

<!-- template.html !-->

<h1>Welcome to my website!</h1>

<div>
    {% component "component.html" %}
        This is some text to fill the slot!
    {% componentend%}
</div>

I really hope someone else finds this useful.