Nunjucks

Source file extensions: .njk

You can use Nunjucks to write your documentation pages or your components in a pure-html way.

Nunjucks is a sophisticated templating engine for JavaScript heavily inspired by jinja2. It supports advanced structures like blocks, template inheritance, filters, and many more.

Example

In a component doc/ folder, create a file with the .njk extension. Add content like the following:

doc/index.njk

{% set username = "Rioters" %}

<h1>Hello {{ username }} 🤘 !</h1>

Template inheritance

Templates import and extends allow you to split your markup in different files and refer to them in your final one.

~/doc-layout/src/base.njk

<!doctype html>
<html lang="en">

<body>
  <header>Documentation</header>
  <main>
    {% block default %}{% endblock %}
  </main>
</body>

</html>

src/content.njk

<p>This is an included banner</p>

doc/index.njk

{% extends "../../doc-layout/src/base.njk" %}

{% set username = "Rioters" %}

{% block default %}
<h1>Hello {{ username }} 🤘 !</h1>
{% include "../src/content.njk" %}
{% endblock %}

Your can also use macro for computed parts of templates and import them in your final file.

Front Matter

Nunjucks templates in our editor supports Front Matter syntax, allowing you to declare data ready to be consumed in your templates:

---
message: Hello all
list:
  - name: Foo
    title: Your name
  - name: 0123456789
    title: Your phone number
---

{% set username = "Rioters" %}

<h1>{{ message }} {{ username }} 🤘 !</h1>

<ul>
{% for i in list %}
  <li>{{ i.title }}: {{ i.name }}</li>
{% endfor %}
</ul>

!!!include front-matter.md!!!

References