如果Nunjucks Macro中的Statement不起作用

时间:2018-06-14 21:32:42

标签: javascript components templating nunjucks

我是Nunjucks的新手。我喜欢它到目前为止,但遇到了一个问题。

我刚刚制作了一个输出标题&描述。我也在我的宏内部有if语句来显示特定的div" if"我在某个页面上。

我的问题是我的" if语句"根本不工作。是不是可以做一个" if语句"在像这样的宏?我知道if语句正常工作。如果我将.njk模板包含在include中,它就可以工作。这是一个例子:

{% macro titleInfo(title, description) %}

<div class="header-title text-white">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-sm-12 col-lg-9">
        <h1>
          {{title}}
        </h1>
        <p>
          <small>
            {{description | safe}}
          </small>
        </p>
      </div> <!-- /.col -->
      {% if active_page == 'check' %} {# this isn't working right now #}
        <div class="col-sm-12 col-lg-3 text-lg-right frames-in-stock">
          <p>
            <strong>000</strong> of <strong>000</strong>
          </p>
        </div> <!-- /.col -->
      {% endif %}
    </div> <!-- /.row -->
  </div> <!-- /.container -->
</div> <!-- /.header-title -->

{% endmacro %}

我包含宏并在我的页面上实现它,如下所示:

 {% extends "layout.njk" %}
 {% set active_page = "check" %}
 {% import "../templates/components/header-title.njk" as title %}
 {% block content %}

   {% include "components/header.njk" %}

   {# {% include "components/header-title.njk" %} #}

   {{
     title.titleInfo (
       'Your Inventory',
       'Please check all that apply.'
     )
   }}

  {% include "components/main-nav.njk" %}

{% endblock %}

宏中是否不能有if语句?如果可能的话,任何关于我做错事的方向都会很棒!

1 个答案:

答案 0 :(得分:1)

当宏在单独的文件中定义时,它无法访问全局范围。您必须将active作为变量传递给宏。

{% macro titleInfo(title, description, active) %} ...

另一种方法是使用自定义加载程序在运行时将宏替换为主渲染页面。

....
// rendered template
{% set active = true %}
{% enable SOMEMACRO %}
...
// somemacro.njk
{% macro SOMEMACRO %}
...
{% endmacro %}
...


// the custom loader implementation to support {% enable regexp-macro-name %}

let macros = fs.readdirSync('templates/macros')
    .reduce(function (res, f) { 
         res[f] = fs.readFileSync(`templates/macros/${f}`, 'utf8'); 
         return res;
    }, {});

let CustomLoader = nunjucks.FileSystemLoader.extend({
    getSource: function(name) {
        let result = nunjucks.FileSystemLoader.prototype.getSource.call(this, name);

        if (!result) 
            return null;

        result.src = result.src.replace(/{%\senable\s(\S+)\s%}/g, 
            function(str, match, offset, s){
                return Object.keys(macros)
                    .filter((key) => (new RegExp(match)).test(key))
                    .map((key) => macros[key] || '')
                    .join('\n');    
            }
        );

        return result;
    }
}); 

let env = new nunjucks.Environment(new CustomLoader(['templates/']), {autoescape: true});
env.express(app);