HTML

The following templating concepts are optional. As an alternative, you can simply use the final HTML files from the dist/ folder.

Nunjucks

With Nunjucks, you'll be able to compile the HTML source files from src/html to dist/ using a rich and powerful templating language. You can read more about Nunjucks on the official website https://mozilla.github.io/nunjucks/

Nunjucks Variables

A variable looks up a value from the template context. If you wanted to simply display a variable, you would do:

This looks up username from the context and displays it. Variable names can have dots in them which lookup properties, just like javascript. You can also use the square bracket syntax.

1. https://mozilla.github.io/nunjucks/templating.html#variables - reading variables
2. https://mozilla.github.io/nunjucks/templating.html#set - setting variables

Nunjucks Template Inheritance

Template inheritance is a way to make it easy to reuse templates. When writing a template, you can define "blocks" that child templates can override. The inheritance chain can be as long as you like.

If we have a parent layout template in src/html/layouts/example.html that looks like this:

Then a child template or page from src/html/pages/my-page.html can extend this layout:

The output in dist/my-page.html would be:

1. https://mozilla.github.io/nunjucks/templating.html#template-inheritance - template inheritance concept
2. https://mozilla.github.io/nunjucks/templating.html#super - rendering the parent block
3. https://mozilla.github.io/nunjucks/templating.html#extends - extending a template
4. https://mozilla.github.io/nunjucks/templating.html#block - template sections
5. https://mozilla.github.io/nunjucks/templating.html#include - include template partials

Front Matter

Any page in src/html/pages can contain a YAML front matter block and will be processed as a special file. The front matter must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines. Here is an example from src/html/pages/student-dashboard.html: