javascript - 具有流畅语法和光滑 js 的水平时间线

Question

我试图实现的水平时间线是使用流畅的语法和流畅的 js。

这是我列出时间轴的代码:

{% assign alltimeline = all_testimonials | articles_with_tag: "timeline" %}
{% assign alltimeline_sort = alltimeline | sort: 'sub_title' %}

<ul class="timeline d-flex flex-column">
   {% for timeline in alltimeline_sort %}
     <li>
        {{ timeline.sub_title }} //year
        {{ timeline.title }} //timeline title
        {{ timeline.body }} //timeline body
     </li>
   {% endfor %}
</ul>

但是，此代码将打印出所有元素以及每个元素的年份 - 如下所示:

2008
标题一
时间轴描述一

2008
标题二
时间轴说明二

2008
标题三
时间轴说明三

2019
标题四
时间线说明四

2019
第五题
时间线说明五

但是，我想要实现的是首先显示年份，然后显示该年份下标记的元素 - 如下所示:

2008

标题一
时间轴描述一

标题二
时间轴说明二

标题三
时间轴说明三

2019

标题四
时间线说明四

标题五
时间线说明五

下面是我想要达到的效果

Answer 1

您可以这样做来检查重复年份:

{% assign alltimeline = all_testimonials | articles_with_tag: "timeline" %}
{% assign alltimeline_sort = alltimeline | sort: 'sub_title' %}

<ul class="timeline d-flex flex-column">
   {% for timeline in alltimeline_sort %}
     <li>
        {% if lastsubtitle != timeline.sub_title %}
          {{ timeline.sub_title }}
        {% endif %}
        {{ timeline.title }}
        {{ timeline.body }}
     </li>
     {% assign lastsubtitle = timeline.sub_title %}
   {% endfor %}
</ul>