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

【问题标题】：Horizontal timeline with liquid syntax and slick js具有流畅语法和光滑 js 的水平时间线
【发布时间】：2020-04-08 00:24:36
【问题描述】：

我试图实现的这个水平时间线使用的是流动的语法和流畅的 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

第四名
时间线说明四

第五名
时间线说明五

下面是我想要实现的图像

【问题讨论】：

标签： javascript css liquid slick.js

【解决方案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>

【讨论】：