HTML / Nunjucks

After successful installation and project setup you can start working with AppUI workflow. One part of customizing AppUI is working with Nunjucks templates.

It's supposed that you're familiar with basics of Nunjucks templating language. So if you're not yet, please read Official Nunjucks Documentation. Don't worry, we're using just a few tags across AppUI so you don't need to read whole documentation. Here are the most important sections that you should understand:

Feel free to contact us if you need assistance.


Getting started

src/templates is the folder for Nunjucks templates. With running Gulp task they will be rendered into dist folder with the same name as its template, for example: src/base_js_maps.html - will be rendered into dist/base_js_maps.html

src/templates/_layout is the folder with templates which will not be rendered as they're used for defining general site structure / or contain reusable components. Naming template with underscore prefix ("_") will exclude your template for rendering.

So let's have a look at these layout templates, and what they are purposed for.

Template Purpose
_backend-document.html

Here you can define overall Document structure of Backend (Admin) site. You can modify here:

  • Information that placed in <head> tag (<title>, <meta>, <link> 's to global css files, Google fonts)
  • Global javascript files placed before closing <body> tag
_backend-drawer.html Here is placed navigation drawer for Backend site.
_backend-header.html Here is placed header toolbar for Backend site.
_backend-page.html Defines general page of Backend site. No need to modify it.
_frontend-document.html The same as _backend-document.html but applied to Frontend site.
_frontend-footer.html Here you can modify footer of Frontend site.
_frontend-header.html Here you can modify header navigation of Frontend site.
_frontend-page.html Defines general page of Frontend website. No need to modify it.

Assets variables

To access assets files (css, javascript files, images) AppUI uses assets variables across all Nunjucks templates. These variables are:

img_path - so if you want to access image (placed in assets folder), use these, for example:

<img src="{{ img_path }}avatars/avatar1.png" />

And it will be rendered as:

<img src="assets/img/avatars/avatar1.png" />

css_path - if you want to access css file placed in assets folder, use these:

<link href="{{ css_path }}bootstrap.css" />

It will be rendered as:

<link href="assets/css/bootstrap.css" />

js_path - if you want to access javascript file placed in assets folder, use these:

<script src="{{ js_path }}pages/base_pages_dashboard.js"><script/>

And it will be rendered as:

<script src="assets/js/pages/base_pages_dashboard.js"><script/>