1

我想从site.pages给定 YAML frontmatter type 的所有页面中过滤掉'project'。

为此，我已经这样做了：

{% sorted_for page in site.pages sort_by:title %}                       
{% if page.type == 'project' %}
do something
{% endif %}
{% endfor %}

这使用sorted_for插件。然而，我现在想要做的是将它们排列成四行的 css 行。

<div class="row">
<div class="span3">{{ page1.title }}</div>
<div class="span3">{{ page2.title }}</div>
<div class="span3">{{ page3.title }}</div>
<div class="span3">{{ pagen.title }}</div>
</div>
...

依此类推，直到行用完。我怎样才能访问我需要这样做的信息？不幸的是，for 循环迭代器编号是错误的，因为它也会在非项目页面中打勾。有没有一种干净的方法来实现这一点？

4

1 回答 1

4

注意：
我无法让sorted_for插件在我的机器上工作，所以我用常规测试我的解决方案for。

步骤1

由于您正在过滤掉一些页面而无法使用forloop.index，因此您需要自己计算循环数，方法是使用assign.

以下代码将仅使用正确的循环迭代器列出您的页面（仅计算实际列出的页面）：

{% assign loopindex = 0 %}
{% for page in site.pages %}                       
  {% if page.type == 'project' %}
    {% assign loopindex = loopindex | plus: 1 %}
    <div class="span3">{{ loopindex }} {{ page.title }}</div>
  {% endif %}
{% endfor %}

第2步

您需要在<div class="row">每第一行和</div>每第四行显示。

要查找第一行和第四行，您可以使用modulo：

{% assign loopindex = 0 %}
{% for page in site.pages %}                       
  {% if page.type == 'project' %}
    {% assign loopindex = loopindex | plus: 1 %}
    {% assign rowfinder = loopindex | modulo: 4 %}
    <div class="span3">{{ loopindex }} {{ rowfinder }} {{ page.title }}</div>
  {% endif %}
{% endfor %}

rowfinder将始终重复序列1, 2, 3, 0。

第 3 步：

所以你显示<div class="row">when rowfinderis1和</div>when rowfinderis 0：

{% assign loopindex = 0 %}
{% for page in site.pages %}                       
  {% if page.type == 'project' %}
    {% assign loopindex = loopindex | plus: 1 %}
    {% assign rowfinder = loopindex | modulo: 4 %}
    {% if rowfinder == 1 %}
      <div class="row">
      <div class="span3">{{ page.title }}</div>
    {% elsif rowfinder == 0 %}
      <div class="span3">{{ page.title }}</div>
      </div>
    {% else %}
      <div class="span3">{{ page.title }}</div>
    {% endif %}
  {% endif %}
{% endfor %}

第4步：

现在只剩下一件小事：当页数不是 4 的倍数时，</div>最后有一个缺失。

当页数是rowfinder4 的倍数时，最后一个值为0。
所以我们只需要显示</div>当 的值rowfinder不是0.
因此，只需将其放在 for 循环之后：

{% if rowfinder != 0 %}
      </div>
{% endif %}

……就是这样！

于 2014-01-06T20:15:20.220 回答