Jekyll 自动处理行答案

【问题标题】：Jekyll automatically processing rowsJekyll 自动处理行
【发布时间】：2014-01-22 08:46:23
【问题描述】：

我想从 site.pages 中过滤掉所有具有给定 YAML frontmatter 类型 '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 循环迭代器编号是错误的，因为它也会在非项目页面中打勾。有没有一种干净的方法来实现这一点？

【问题讨论】：

标签： css twitter-bootstrap jekyll jekyll-bootstrap

【解决方案1】：

注意：
我无法让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 %}

第二步

您需要在第一行显示<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。

第三步：

所以当rowfinder 为1 时显示<div class="row">，当rowfinder 为0 时显示</div>：

{% 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 的倍数时，最后会缺少一个 </div>。

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

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

...就是这样！

【讨论】：