Как я могу включить один и тот же частичный несколько раз с различным контентом, используя Nunjucks? - PullRequest
Новая
       16

Как я могу включить один и тот же частичный несколько раз с различным контентом, используя Nunjucks?

0 голосов
/ 15 мая 2019

У меня есть несколько шаблонов страниц, которые должны включать один и тот же частичный фрагмент много раз, но с разным содержанием. Я посмотрел на это, но они не обязательно будут в параллельном порядке.

Например, шаблон моей страницы будет выглядеть так 

{% 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 голосов
/ 27 мая 2019

попробуйте использовать различные значения переменных

Ввод: 

{% 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') }}
...