具有流畅语法和流畅 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>