如何在 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"]，这是未定义或错误的

但是，如果我在 _header.njk 中设置 nav.active('dashboard')，一切正常。

我是否缺少语法或文件夹结构？

Answer 1

nav 在_header.njk 范围内定义。此范围在dashboard.njk 中不可用，因此您将nav 作为undefined。但是您可以在_header.njk 中使用nav。

// 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 %}