gpt4 book ai didi

javascript - 使用 nunjucks 或其他方法的嵌套变量的模板解决方案

转载 作者:行者123 更新时间:2023-11-30 16:01:11 24 4
gpt4 key购买 nike

我刚刚开始使用 gulp 和 nunjucks 进行模板制作(在本例中为电子邮件)。

我想解决调用模块/部分并在每次处理时为属性分配不同值的问题。

它最初看起来像是一个 for 循环的工作,但不一定会在模板中按顺序调用该模块

在模块中有分配给变量的属性。我想根据模块使用的部分不同地解析这些变量。

一个非常基本的例子是——在我有的索引文件中:

{% block content %}


<!-- logo start -->

{% include genericMod %}

<!-- logo end -->


<!-- some other section start -->

{% include someOtherMod %}

<!-- some other section end -->


<!-- hero start -->

{% include genericMod %}

<!-- hero end -->


{% endblock %}

并且在 genericMod 本身中:

<tr>

<td class="full-width-image" align="{{align}}" ><img src="{{src}}" alt="{{alt}}"/></td>

</tr>

我想利用的功能是定义一个“modKey”,即模块中每个变量中的一个变量例如

{{modKey.align}}

{{modKey.src}}

{{modKey.alt}}

然后能够在每次调用时以某种方式将该键分配给模块:

<!-- logo start —>

{% include genericMod "modKey": "logo" %}

<!-- logo end -->

所以上面的结果是:

<tr>

<td class="full-width-image" align="{{logo.align}}" ><img src="{{logo.src}}" alt="{{logo.alt}}"/></td>

</tr>

和:

<!-- hero start -->

{% include genericMod "modKey": "hero" %}

<!-- hero end -->

产生:

<tr>

<td class="full-width-image" align="{{hero.align}}" ><img src="{{hero.src}}" alt="{{hero.alt}}"/></td>

</tr>

因此,当通过 json 文件进行管道传输时,将为每个属性变量呈现相应的数据:

"logo": {
"alt": "some logo alt text",
"href": "http://www.someurl.com",
"align": "left"
},
"hero": {
"alt": "some hero alt text",
"href": "http://www.someotherurl.com",
"align": "centre"
}

显然这只是一个假设的解决方案,但有没有一种方法可以实际实现类似的效果?

最佳答案

事实证明,解决方案非常简单。在尝试使用“set”时,我一直将上下文变量的值分配给字符串而不是变量名。

为了记录这个作品......

{% set data = logo %} 
{% include oneIncludeFile %}
{% set data = hero %}
{% include otherIncludeFile %}

包含文件将引用的地方,例如{{ data.alt }} 或 {{ data.href }}。

虽然宏可能是实现此目标的更好方法:

{% macro foo(data) %} 
<a href="{{ data.href }}"><img src="{{ data.src }}" alt="{{ data.alt }}" /></a>
{% endmacro %}

然后像{{ foo(logo) }}{{ foo(hero) }}这样调用它来传递不同的数据集。

完整的解释可以在这里找到:https://github.com/mozilla/nunjucks/issues/779

关于javascript - 使用 nunjucks 或其他方法的嵌套变量的模板解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37725129/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com