Question

我目前在events：

中有_config.yml这样的集合

future:true

collections:
  events:
    output: true
    permalink: /:collection/:name

我试图仅展示接下来的4个未来帖子。但是，我想根据是否有0或1,2,3或4个帖子来更改它的容器类。

{% assign curDate = site.time | date: '%s' %}
{% for event in site.events %}
    {% assign postStartDate = event.date | date: '%s' %}
    {% if postStartDate >= curDate %}
         <div class="SOMETHING">{{event.title}}</div> 
    {% endif %}
{% endfor %}

因此，如果有1条帖子有postStartDate >= curDate我想要使用课程.full，则有2个帖子：.one-half，3个帖子：.one-third，4个帖子：{{ 1}}。

现在有人如何计算并确定这一点吗？

Answer 1

我要从您想要动态调整元素大小的目标类名（.full，.one-half等）中推断出来吗？如果是这种情况，您可以使用flexbox。

要直接回答您的具体问题，您可以使用Javascript计算元素数量，然后应用一个类。

类似的东西：

<强> HTML

<div id="parent">
    {% for event in site.events %}
        {% assign postStartDate = event.date | date: '%s' %}
        {% if postStartDate >= curDate %}
            <div class="SOMETHING">{{ event.title }}</div> 
        {% endif %}
    {% endfor %} 
</div>

<强>的Javascript

var numberOfPosts = document.getElementById("parent").childElementCount;

if (numberOfPosts == 1) {
    var className = "full";
)
else if (numberOfPosts == 2) {
    var className = "one-half";
)
// etc....

var children = document.getElementById("parent").children;

for (var i = 0; i < children.length; i++) {
    children[i].classList.add(className);
}

你可以写出更干净但你明白了。

Answer 2

试试这个

    {% assign curDate = site.time | date: '%s' %}
    {% assign post_count = site.events | size %}
    {% if post_count == 1 %}
    {% assign css_class = "full" %}
    {% elsif post_count == 2 %}
    {% assign css_class = "one-half" %}
    {% elsif post_count == 3 %}
    {% assign css_class = "one-third" %}
    {% else %}
    {% assign css_class = "one-quarter" %}
    {% endif %}

    {% for event in site.events %}
        {% assign postStartDate = event.date | date: '%s' %}
         {% if postStartDate > curDate %}
    <div class='{{css_class}}'>{{event.title}}</div> 
        {% endif %}
    {% endfor %}

根据显示的数量循环收集和修改类

2 个答案: