Nunjucks
https://mozilla.github.io/nunjucks/templating.html
https://www.tengio.com/blog/nunjucks-templates-with-gulp/
https://css-tricks.com/killer-features-of-nunjucks/
https://zellwk.com/blog/nunjucks-with-gulp/
https://mozilla.github.io/nunjucks/api#custom-filters
https://mozilla.github.io/nunjucks/api.html#environment
INCLUDES
{% include 'header.html' %} Body {% include 'footer.html' %}
VARIABLES
{ "site" :{ "name": "Tengio", "url": "https://www.tengio.com" }, "links": [ { "url": "https://www.tengio.com", "title": "Home" }, { "url": "https://www.tengio.com/mobile-apps.html", "title": "Native apps" } ] }
- the JSON
{{ site.name }} {{ site['name'] }}
- use this to reference it
IF and LOOPS
{% if True %} yay {% endif %} {% for link in site.links %} <a href="{{ link.url }}">{{ link.title }}</a> {% endfor %}
EXTENSIONS
<!DOCTYPE html> <html lang="en"> <head> {% block head %}{% endblock %} {% include "partials/head.nj" %} </head> <body id="page-top"> {% include "partials/header.nj" %} <!---->{% block content %}{% endblock %}<!----> {% include "partials/footer.nj" %} {% include "partials/analytics.nj" %} <script src="/js/some.js"></script> </body> </html>
{% extends "layout.nj" %} {% block head %} <title>{{site.title}}</title> {% endblock %} {% block content %} Page content {% endblock %}
MACROS
{% macro currentPage(page) %} ... <li {%if page=='home' %}class="active" {% endif %} ... {% endmacro %}
{% import 'toolbar.html' as toolbar %}
- import it
{{toolbar.currentPage('home')}}
- use it