Использование по модулю на forloop.index в Jekyll Liquid - PullRequest
0 голосов
/ 08 июня 2018

Я пытаюсь настроить цикл для отображения сообщений на моей странице индекса, чтобы они вписывались в каркас skeleton.css.Первый пост должен занимать двенадцать столбцов и содержаться в отдельной строке.Каждые два поста после этого должны быть обернуты в отдельный ряд.Я использую следующее:

{% elsif forloop.index | modulo: 2 == 0 %}

... в попытке создать строку div вокруг каждых двух сообщений.Похоже, это не работает, так как при выводе каждый отдельный пост заключен в строку div.

<div class="posts">

    {% for post in site.posts %}
        {% if forloop.first == true %}

            <div class="row">
                <article class="twelve columns"></article>
            </div>

        {% elsif forloop.index | modulo:2 == 0 %}

            <div class="row">
                <article class="six columns"></article>
            </div>

        {% else %}

            <article class="six columns"></article>

        {% endif %}
    {% endfor %}

</div>

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

Ваше {% elsif forloop.index | modulo:2 == 0 %} условие неверно, так как трубы не допускаются в такой структуре управления.В конечном итоге он разрешается до {% elsif forloop.index %}, что всегда верно.

Вы можете сделать это:

<div class="posts">
  {% for post in site.posts %}
    {% assign remainder = forloop.index | modulo: 2 %}
    {% if forloop.first == true %}
      <div class="row">
        <article class="twelve columns"></article>
      </div>
    {% elsif remainder == 0 %}
      <div class="row">
        <article class="six columns"></article>
      {% if forloop.last %}
      </div>
      {% endif %}
    {% else %}
        <article class="six columns"></article>
      </div>
    {% endif %}
  {% endfor %}
</div>
0 голосов
/ 08 июня 2018

Индекс 1: пропустить

Индекс 2: начать перенос двух статей

Индекс 3: завершить перенос двух статей

Индекс 4: начать перенос двух статей

Указатель 5: конец двух статей

.

.

.

<div class="posts">

    {% for post in site.posts %}
        {% if forloop.first == true %}

            <div class="row">
                <article class="twelve columns"></article>
            </div>

        {% elsif forloop.index | modulo:2 == 0 %}

            <div class="row">
                <article class="six columns"></article>

        {% else %}

                <article class="six columns"></article>
            </div>

        {% endif %}
    {% endfor %}

</div>

Хотя это создаст новую проблему.Он может работать для 3 или 5 статей, но не для 4 или 6 статей.

Нужно использовать вспомогательную переменную, чтобы отслеживать открытость последней строки div:

{% assign opendiv = false %}

<div class="posts">

    {% for post in site.posts %}

        {% assign remainder = forloop.index | modulo:2 %}

        {% if forloop.first == true %}

            <div class="row">
                <article class="twelve columns"></article>
            </div>

        {% elsif forloop.last == true and opendiv == false %}

            <div class="row">
                 <article class="six columns"></article>
            </div>

        {% elsif remainder == 0 %}

            {% opendiv = true %}
            <div class="row">
                <article class="six columns"></article>

        {% elsif opendiv == true %}

            {% opendiv = false %}
                <article class="six columns"></article>
            </div>

        {% endif %}
    {% endfor %}

</div>
...