使用nunjucks或其他方法嵌套變量的模板解決方案

我剛開始使用gulp & nunjucks進行模板（本例爲電子郵件）。使用nunjucks或其他方法嵌套變量的模板解決方案

我想解決調用模塊/ partial的問題，並在每次處理屬性時爲其分配不同的值。

它最初看起來像一個工作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 itself-：

<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" 
    }

顯然，這只是一個假設性的解決方案，但有實際實現類似的方法嗎？

來源

2016-06-09 fivedoor

事實證明，解決方案非常簡單。在嘗試使用'set'時，我一直將context var的值賦給一個字符串而不是變量名。

對於這個作品的記錄...

{% 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

來源

2016-06-10 15:02:14 fivedoor

使用nunjucks或其他方法嵌套變量的模板解決方案

回答

相關問題