1
0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00

perf: avoid the layout shift for post datetime

This commit is contained in:
Cotes Chung
2022-04-26 00:39:58 +08:00
parent 42c44a8bc1
commit 6d35f5f8da
20 changed files with 87 additions and 160 deletions

21
_includes/datetime.html Normal file
View File

@@ -0,0 +1,21 @@
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
{% assign wrap_elem = include.wrap | default: 'em' %}
{% if site.prefer_datetime_locale == 'en' or lang == 'en' %}
{% assign df_strftime = '%b %e, %Y' %}
{% assign df_dayjs = 'll' %}
{% else %}
{% assign df_strftime = '%F' %}
{% assign df_dayjs = 'YYYY-MM-DD' %}
{% endif %}
<{{ wrap_elem }} class="{% if include.class %}{{ include.class }}{% endif %}"
data-ts="{{ include.date | date: '%s' }}"
data-df="{{ df_dayjs }}"
{% if include.tooltip %}data-toggle="tooltip" data-placement="bottom"{% endif %}>
{{ include.date | date: df_strftime }}
</{{ wrap_elem }}>

View File

@@ -60,7 +60,6 @@
{% assign less = TOTAL_SIZE | minus: index_list.size %}
{% if less > 0 %}
{% for i in (0..last_index) %}
{% assign post = site.posts[i] %}
{% if post.url != page.url %}
@@ -74,10 +73,8 @@
{% endunless %}
{% endif %}
{% endfor %}
{% endif %}
{% if index_list.size > 0 %}
<div id="related-posts" class="mt-5 mb-2 mb-sm-4">
<h3 class="pt-2 mt-1 mb-4 ml-1"
@@ -89,7 +86,7 @@
<div class="card">
<a href="{{ post.url | relative_url }}">
<div class="card-body">
{% include timeago.html date=post.date class="small" %}
{% include datetime.html date=post.date class="small" %}
<h3 class="pt-0 mt-1 mb-3" data-toc-skip>{{ post.title }}</h3>
<div class="text-muted small">
<p>

View File

@@ -1,15 +0,0 @@
<!--
Date format snippet
See: ${JS_ROOT}/utils/timeago.js
-->
<em class="timeago{% if include.class %} {{ include.class }}{% endif %}"
data-ts="{{ include.date | date: '%s' }}"
{% if include.tooltip %}
data-toggle="tooltip" data-placement="bottom" data-tooltip-df="llll"
{% endif %}
{% if include.capitalize %}
data-capitalize="true"
{% endif %}>
{{ include.date | date: '%Y-%m-%d' }}
</em>