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:
|
_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/>