Как установить макропеременную в шаблоне страницы для Nunjucks

Question

Я использую Nunjucks для создания сложного сайта. Моя структура папок такова:

frontend/
   |- dev/
   |- gulpfile.js
     |- css/
     |- images/
     |- js/
     |- pages/
       |- dashboard.njk
     |- templates/
       |- macros/
         |- header-macro.njk
       |- partials/
         |- _header.njk
         |- three-col.njk

Я пытаюсь получить макрос (header-macro.njk), который заставляет активный класс быть установленным по навигационной ссылке для текущей страницы. Это выглядит так:

   {% macro active(activePage='dashboard') %}

    <nav class="header__nav">
        <a class="{% if activePage == 'dashboard' %}active{% endif %}" href="#">Dashboard</a>
        <a class="{% if activePage == 'locations' %}active{% endif %}" href="#">Locations</a>
        <a class="{% if activePage == 'reports' %}active{% endif %}" href="#">Reports</a>
        <a class="{% if activePage == 'services' %}active{% endif %}" href="#">Services &#38; Billing</a>
        <a class="{% if activePage == 'people' %}active{% endif %}" href="#">People</a>
    </nav>
{% endmacro %}

Это будет импортировано в мой _header.njk частично так...

<div class="header__inner">
        <div class="header__logo"><img src="/images/logos/STN-y-15x100.png"></div>
            {% import 'macros/header-macro.njk' as nav %}

Я хочу установить переменную nav.active в каждом шаблоне страницы. Так что в этом случае это будет dashboard.njk

{% set page_title = "Welcome to eServices - Dashboard" %}
{% set body_class = "dashboard" %}
{{nav.active('dashboard')}}

Но я получаю ошибку:

Ошибка: невозможно позвонить nav["active"], который не определен или ложный

Однако, если я установил nav.active('dashboard') в _header.njk, все работает.

Я что-то упустил с синтаксисом или структурой папок?

Answer 1

nav определяется в _header.njk объем. Эта область недоступна в dashboard.njk поэтому у вас есть nav как undefined, Однако вы можете использовать nav в _header.njk,

// app.js
var nunjucks  = require('nunjucks');
var env = nunjucks.configure();

var res = nunjucks.render('dashboard.njk');
console.log(res); 

// dashboard.njk
DASHBOARD
{% set activePage = 'dashboard' %} // Also you can pass it as a render prop.
{% include "header.njk" %}

// header.njk
HEADER
{% import 'macro.njk' as nav %}
{{ nav.active (activePage) }} // pass activePage to macro-scope

// macro.njk
{% macro nav (activePage) %}
<nav class="header__nav">
    <a class="{{ 'active' if activePage == 'dashboard' }}" href="#">Dashboard</a>
    ...        
</nav>
{% endmacro %}