Nunjucks页面模板中如何设置宏变量
How to set macro variable in the page template for Nunjucks
我正在使用 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),它会导致在导航 link 上设置活动 class ] 当前页面。它看起来像这样:
{% 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 & 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')}}
但是我得到一个错误:
Error: Unable to call nav["active"]
, which is undefined or falsey
但是,如果我在 _header.njk 中设置 nav.active('dashboard'),一切正常。
我是否遗漏了语法或文件夹结构方面的内容?
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 %}
我正在使用 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),它会导致在导航 link 上设置活动 class ] 当前页面。它看起来像这样:
{% 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 & 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')}}
但是我得到一个错误:
Error: Unable to call
nav["active"]
, which is undefined or falsey
但是,如果我在 _header.njk 中设置 nav.active('dashboard'),一切正常。
我是否遗漏了语法或文件夹结构方面的内容?
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 %}