f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00
Code Issues Packages Releases Activity

feat(ui): show preview image in home page

Browse Source
This commit is contained in:
Cotes Chung
2023-03-18 06:28:44 +08:00
parent ee88cec270
commit 97b8dfeed6
39 changed files with 347 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
_layouts/home.html
View File

@@ -1,6 +1,6 @@
---
layout: page
# The Home page layout
refactor: true
---
{% include lang.html %}
@@ -42,9 +42,16 @@ layout: page
<div id="post-list">
{% for post in posts %}
<div class="card post-preview">
<a href="{{ post.url | relative_url }}">
<div class="card-body">
<a href="{{ post.url | relative_url }}" class="card-wrapper">
<div class="card flex-md-row-reverse">
{% if post.image %}
{% if post.image.lqip %}
{% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
{% endif %}
<img src="{{ post.image.path | default: post.image }}" w="15" h="8" {{ lqip }}>
{% endif %}
<div class="card-body d-flex flex-column">
<h1 class="card-title">
{{ post.title }}
</h1>
@@ -56,16 +63,16 @@ layout: page
</p>
</div>
<div class="post-meta text-muted d-flex">
<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="mr-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw"></i>
<i class="far fa-calendar fa-fw mr-1"></i>
{% include datetime.html date=post.date lang=lang %}
<!-- categories -->
{% if post.categories.size > 0 %}
<i class="far fa-folder-open fa-fw"></i>
<span>
<i class="far fa-folder-open fa-fw mr-1"></i>
<span class="categories">
{% for category in post.categories %}
{{ category }}
{%- unless forloop.last -%},{%- endunless -%}
@@ -75,7 +82,7 @@ layout: page
</div>
{% if post.pin %}
<div class="pin">
<div class="pin ml-1">
<i class="fas fa-thumbtack fa-fw"></i>
<span>{{ site.data.locales[lang].post.pin_prompt }}</span>
</div>
@@ -83,13 +90,13 @@ layout: page
</div>
<!-- .post-meta -->
</div>
</a>
</div>
<!-- .post-review -->
<!-- .card-body -->
</div>
</a>
{% endfor %}
</div>
<!-- #post-list -->
{% if paginator.total_pages > 0 %}
{% if paginator.total_pages > 1 %}
{% include post-paginator.html %}
{% endif %}