Create components with Gulp & Nunjucks

In this tutorial I will show you how to create a repeatable blockquote component template in Gulp.js using Nunjucks html modulizer.

Create

Let’s create our template file called quote.njk, which will contain the markup of the blockquote:

{% macro params(content) %}
<blockquote>{{ content }}</blockquote>
{% endmacro %}

Import

Import out newly created file in the layouts.njk template:

{% import "partials/quote.njk" as quote %}

Usuage

Use it in .njk template files around your project, like this:

{{ quote.params('This is the blockquote sample text') }}

Tags