Nunjucks Installed

Use the Nunjucks template engine to create pages and layouts.

Options See on deno.land

extensions string[] object

The list of extensions this plugin applies to

Default:

[ ".njk" ]

includes string

Custom includes path

Default:

site.options.includes

options object

Options passed to Nunjucks

See https://mozilla.github.io/nunjucks/api.html#configure

Default:

{
  dev: false,
  autoescape: true,
  throwOnUndefined: false,
  trimBlocks: false,
  lstripBlocks: false
}

plugins object

Plugins loaded by Nunjucks

Description

Nunjucks is a powerful template language created by Mozilla and inspired by ninja2. This plugin allows you to use it to create pages and layouts.

Installation

This plugin is installed by default. 🎉

Configuration

If you want to change the default configuration, use the second argument of lume() function in your _config.ts file.

For example, let's configure nunjucks and change the default folder of the _includes:

// Nunjucks plugin configuration
const nunjucks = {
  includes: "_layouts",
  options: {
    throwOnUndefined: true,
  },
};

// Apply the plugin config
const site = lume({}, { nunjucks });

Now, Lume will search the .njk templates in the directory _layouts instead of _includes.

Creating layouts

Add a file with .njk extension in the _includes directory. Use the front matter to set data to the template.

---
title: Welcome to my page
intro: This is my first post using Lume. I hope you like it!
---

<html>
  <head>
    <title>{{ title }}</title>
  </head>

  <body>
    <p>{{ intro }}</p>
  </body>
</html>

Creating pages

Creating pages is the same as creating layouts; just place the .njk file outside the _includes directory.

njk filter

The Nunjucks plugin also registers the njk filter, to render any string value as a Nunjucks template and output it as HTML. The filter accepts an object with data.

---
data:
  username: Oscar
text: "Hello {{ username }}"
---

<!-- Render a string -->
<div>{{ text | njk(data) | safe }}<div>

Hooks

This plugin exposes the following hooks:

addNunjucksPlugin(name, fn) To add additional plugins.

Configure VSCode

You can use the Nunjucks extension for VS Code for syntax highlight and some useful snippets.