refactor: optimize the layout of archive timeline

_layouts/archives.html

@@ -13,36 +13,29 @@ layout: page
   {% assign df_dayjs_m = '/ MM' %}
 {% endif %}
 
-<div id="archives" class="pl-xl-2">
+<div id="archives" class="pl-xl-3">
+
 {% for post in site.posts %}
-  {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
-  {% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
-  {% if forloop.first %}
-    {% assign last_day = "" %}
-    {% assign last_month = "" %}
-  <span class="lead">{{this_year}}</span>
-  <ul class="list-unstyled">
-  {% endif %}
-    <li>
-      <div>
-        {% assign ts = post.date | date: '%s' %}
-        <span class="date day" data-ts="{{ ts }}" data-df="DD">
-          {{ post.date | date: "%d" }}
-        </span>
-        <span class="date month small text-muted" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
-          {{ post.date | date: df_strftime_m }}
-        </span>
-        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
-      </div>
-    </li>
-  {% if forloop.last %}
-  </ul>
-  {% elsif this_year != pre_year %}
-  </ul>
-  <span class="lead">{{pre_year}}</span>
-  <ul class="list-unstyled">
-    {% assign last_day = "" %}
-    {% assign last_month = "" %}
+  {% capture cur_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+
+  {% if cur_year != last_year %}
+    {% unless forloop.first %}</ul>{% endunless %}
+    <div class="year lead">{{ cur_year }}</div>
+    <ul class="list-unstyled">
+    {% assign last_year = cur_year %}
   {% endif %}
+
+  <li class="d-flex align-items-center">
+  {% assign ts = post.date | date: '%s' %}
+    <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
+    <span class="date month small text-muted ml-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
+      {{ post.date | date: df_strftime_m }}
+    </span>
+    <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+  </li>
+
+  {% if forloop.last %}</ul>{% endif %}
+
 {% endfor %}
+
 </div>