我试图实现的水平时间线是使用流畅的语法和流畅的 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
标题四
时间线说明四
标题五
时间线说明五
下面是我想要达到的效果
最佳答案
您可以这样做来检查重复年份:
{% 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>
关于javascript - 具有流畅语法和光滑 js 的水平时间线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59341386/