如何使用Nunjucks多次包含相同部分的不同内容?

时间:2019-05-15 13:34:58

标签: html json nunjucks

我有一些页面模板,这些模板需要多次包含相同的部分,但是内容却不同。我看过循环这个,但是,它们并不一定要处于并发顺序。

例如,我的页面模板将如下所示

{% extends "layout.html" %}

{% set page = inner %}

{% block content %}

    {% include "partials/image-text-block.html" %}

    {% include "partials/example-block.html" %}

    {% include "partials/image-text-block.html" %}

{% endblock %}

我的包含文件看起来像

<div class="col-12 col-sm-6 col-sm-offset-1 image-text__copy">
    <h2 class="navy">{{ page.imageText.title }}</h2>

    <p class="light-body">{{ page.imageText.text }}</p>

    <div class="button-wrap">
        <a href="#" class="button">{{ page.imageText.buttonText }}</a>
    </div>
</div>

我目前正在使用json文件注入内容。

    "inner": {
        "imageText": {
            "imageSide": "left",
            "text": "dsauhf oaiuoags f"
        }
    }

请为每个收录人提供不同内容的最佳方法是什么?

谢谢!

1 个答案:

答案 0 :(得分:0)

尝试使用设置不同的变量值

输入:

{% set sectionHeader = { title: 'Title 1', subtitle: 'Subtitle 1' } %}
{% include "_partials/section-header.html" %}

{% set sectionHeader = { title: 'Title 2', subtitle: 'Subtitle 2' } %}
{% include "_partials/section-header.html" %}

_partials / section-header.html

<header class="section-header">
    <h3 class="section-title">{{sectionHeader.title}}</h3>
    <p class="section-subtitle">{{sectionHeader.subtitle}}</p>
</header>

输出:

<header class="section-header">
    <h3 class="section-title">Title 1</h3>
    <p class="section-subtitle">Subtitle 1</p>
</header>

<header class="section-header">
    <h3 class="section-title">Title 2</h3>
    <p class="section-subtitle">Subtitle 2</p>
</header>

,或者您可以使用宏

article.njk

{% macro articleMacro(title) %}
  <article>
      <header>{{title}}</header>
      <p>article body</p>
      <footer></footer>
  </article>
{% endmacro %}

page.njk

{% import "article.njk" as article %}

{{ article('header one') }}

{{ article('header two') }}