时间戳

首页 > 解决方案 > 我如何按状态排列液体中 3 列的集合

arrays - 我如何按状态排列液体中 3 列的集合

问题描述

我想将我的收藏品排列成 3 列，用于 3 种不同的状态。如果没有任何具有该状态的演出/项目，它必须说“没有项目”

我试过这个：

<div class="col-sm">
    <h2>Up next</h2>
    {% assign next = site.gigs | gig.status == 'Next' | sort: gig.date %}
    {% if next.gigs.size == 0 %}
      No projects
    {% else %}
      {% for gig in next %}
        {{ gig.title }}
      {% endfor %}
    {% endif %}
</div>
<div class="col-sm">
    <h2>Working on</h2>
    {% assign on = site.gigs | gig.status == 'On' | sort: gig.date %}
    {% if on.gigs.size == 0 %}
      No projects
    {% else %}
      {% for gig in on %}
        {{ gig.title }}
      {% endfor %}
    {% endif %}
</div>
<div class="col-sm">
    <h2>Done</h2>
    {% assign done = site.gigs | gig.status == 'Done' | sort: gig.date %}
    {% if done.gigs.size == 0 %}
      No projects
    {% else %}
      {% for gig in done %}
        {{ gig.title }}
      {% endfor %}
    {% endif %}
</div>

但它只是排列了所有的演出/项目:(

也许它可以以更简单的方式完成。我不知道您是否可以通过计算不同状态的数量来制作一个紧凑的液体代码并排列 3 列。

帮助！

标签： arrayscollectionsjekyllliquid

解决方案

订购

我们的状态是“Next”、“On”和“Done”。它们必须按这样的顺序订购。由于这不是字母排序顺序，我们需要自己定义这个顺序。

在_config.yml中：

status-order:
  -
   name: "Next"        ### status as it is set on gigs (!!! Case-Sensitive !!!)
   display: "Up Next"  ### status column header to display
  -
   name: "On"
   display: "Working On"
  -
   name: "Done"
   display: "Done"

我们现在可以循环site.status-order并以所需的状态顺序获取我们的演出。

{% for status in site.status-order %}
  {{ status.name }} - {{ status.display }}
{% endfor %}

呈现

由于您当前的代码有点重复，我们可以这样考虑：

{% for status in site.status-order %}
  {% assign items = site.gigs | where: 'status', status.name | sort: date %}
  <div class="col-sm">
    <h2>{{ status.display }} ({{ items.size }})</h2>
    {% if items.size > 0 %}
      <ul>
      {% for item in items %}
        <li><a href="{{ site.baseurl }}{{ item.url }}">{{ item.title }}</a></li>
      {% endfor %}
      </ul>
    {% else %}
      No project
    {% endif %}
</div>
{% endfor %}

笔记

您必须确保使用正确的大小写设置状态（例如：“下一个”而不是“下一个”）。

和正确的类型。如果你设置status: On它被理解为true布尔值，而不是string“on”。在这种情况下，正确的状态表达式是status: "On"。必须加引号或双引号才能理解为“On”字符串。

任何大小写错误或键入状态表达式的项目都不会出现在我们的列表中。

推荐阅读