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。但是，您可以在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 %}

如何在页面模板中为Nunjucks设置宏变量

1 个答案: