基於有多少顯示

Question

通過收集和修改類循環目前，我有我的_config.yml的events集合，像這樣：

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帖子：.one-quarter。

現在有人可以怎樣計算和確定這個嗎？

Answer 1

試試這個

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

Answer 2

我從你想要的類名推斷（.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); 
} 

你或許可以寫清潔，但你的想法。