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:
21
_includes/datetime.html
Normal file
21
_includes/datetime.html
Normal 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 }}>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user