Question

我想从site.pages过滤出具有给定YAML前端类型'project'的所有网页。

要做到这一点，我已经这样做了：

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

这使用sorted_for插件。我现在要做的是将它们安排在4行的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循环迭代器编号是错误的，因为它也会勾选非项目页面。有没有一种干净的方法来实现这个？

Answer 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 %}

第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">为rowfinder时显示1，</div>为rowfinder时显示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>。

当页面数为4的倍数时，rowfinder的最后一个值为0。
因此，当</div>的值除rowfinder之外的其他任何内容时，我们只需显示0。
所以只需将它放在for循环之后：

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

......就是这样！

Jekyll自动处理行

1 个答案:

第1步

第2步

第3步：

第4步：