Creating pages

Filters

Filters are functions that can be applied to variables to transform content. Nunjucks template engine has some builtin filters, for example:

<h1>{{ 'Welcome' | upper }}</h1>

Output:

<h1>WELCOME</h1>

Lume allows to create your own filters to be used by all template engines. New filters must be registered in the _config.js file:

// Filter to prepend a 👍 to any text
site.filter("thumbsUp", (value) => "👍 " + value);

Now this filter is available in your layouts:

<h1>{{ 'Welcome' | upper | thumbsUp }}</h1>

Output:

<h1>👍 WELCOME</h1>

Builtin filters

Lume includes the following convenient preinstalled filters:

Using the filters in JavaScript modules

If you're using JavaScript/TypeScript modules instead of a template engine like Nunjucks, filters are passed as the second argument of your default exported function:

export default function (data, filters) {
  return `<a href="${filters.url("/about-us")}">About us</a>`;
}