perf: avoid the layout shift for post datetime

_layouts/archives.html

@@ -3,8 +3,17 @@ layout: page
 # The Archives of posts.
 ---
 
-<div id="archives" class="pl-xl-2">
+{% include lang.html %}
 
+{% if site.prefer_datetime_locale == 'en' or lang == 'en' %}
+  {% assign df_strftime_m = '%b' %}
+  {% assign df_dayjs_m = 'MMM' %}
+{% else %}
+  {% assign df_strftime_m = '/ %m' %}
+  {% assign df_dayjs_m = '/ MM' %}
+{% endif %}
+
+<div id="archives" class="pl-xl-2">
 {% for post in site.posts %}
   {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
   {% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
@@ -17,9 +26,11 @@ layout: page
     <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="MMM">
-          {{ post.date | date: '%m' }}
+        <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>

_layouts/category.html

@@ -3,6 +3,8 @@ layout: page
 # The Category layout
 ---
 
+{% include lang.html %}
+
 <div id="page-category">
   <h1 class="pl-lg-2">
     <i class="far fa-folder-open fa-fw text-muted"></i>
@@ -15,9 +17,7 @@ layout: page
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">
       <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
       <span class="dash flex-grow-1"></span>
-      <span class="text-muted small" data-ts="{{ post.date | date: '%s' }}" data-df="ll">
-        {{ post.date | date: '%Y-%m-%d' }}
-      </span>
+      {% include datetime.html date=post.date wrap='span' class='text-muted small' %}
     </li>
     {% endfor %}
   </ul>

_layouts/home.html

@@ -23,7 +23,6 @@ layout: page
   {% assign pinned_num = 0 %}
 {% endif %}
 
-
 <!-- Get default posts -->
 
 {% assign default_beg = offset | minus: pinned.size %}
@@ -58,15 +57,11 @@ layout: page
     </div>
 
     <div class="post-meta text-muted d-flex">
-
       <div class="mr-auto">
+
         <!-- posted date -->
         <i class="far fa-calendar fa-fw"></i>
-        {% include timeago.html date=post.date tooltip=true capitalize=true %}
-
-        <!-- time to read -->
-        <i class="far fa-clock fa-fw"></i>
-        {% include read-time.html content=post.content %}
+        {% include datetime.html date=post.date %}
 
         <!-- categories -->
         {% if post.categories.size > 0 %}
@@ -78,6 +73,7 @@ layout: page
           {% endfor %}
           </span>
         {% endif %}
+
       </div>
 
       {% if post.pin %}

_layouts/post.html

@@ -61,14 +61,14 @@ tail_includes:
       <!-- published date -->
       <span>
         {{ site.data.locales[lang].post.posted }}
-        {% include timeago.html date=page.date tooltip=true %}
+        {% include datetime.html date=page.date tooltip=true %}
       </span>
 
       <!-- lastmod date -->
       {% if page.last_modified_at %}
       <span>
         {{ site.data.locales[lang].post.updated }}
-        {% include timeago.html date=page.last_modified_at tooltip=true %}
+        {% include datetime.html date=page.last_modified_at tooltip=true %}
       </span>
       {% endif %}
 

_layouts/tag.html

@@ -3,6 +3,8 @@ layout: page
 # The layout for Tag page
 ---
 
+{% include lang.html %}
+
 <div id="page-tag">
   <h1 class="pl-lg-2">
     <i class="fa fa-tag fa-fw text-muted"></i>
@@ -14,9 +16,7 @@ layout: page
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">
       <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
       <span class="dash flex-grow-1"></span>
-      <span class="text-muted small" data-ts="{{ post.date | date: '%s' }}" data-df="ll">
-        {{ post.date | date: '%Y-%m-%d' }}
-      </span>
+      {% include datetime.html date=post.date wrap='span' class='text-muted small' %}
     </li>
     {% endfor %}
   </ul>