web_development:html:nunjucks

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

  • web_development/html/nunjucks.txt
  • Last modified: 2020/09/18 03:16
  • by jimboobrien