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

feat(ux): turn home page posts into clickable cards (#895)

Resolves #895
This commit is contained in:
Cotes Chung
2023-03-18 00:31:52 +08:00
parent 111b82838d
commit b85f6330de
4 changed files with 96 additions and 71 deletions

View File

@@ -3,10 +3,10 @@ layout: page
# The Home page layout
---
{% assign pinned = site.posts | where: "pin", "true" %}
{% assign default = site.posts | where_exp: "item", "item.pin != true and item.hidden != true" %}
{% assign pinned = site.posts | where: 'pin', 'true' %}
{% assign default = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %}
{% assign posts = "" | split: "" %}
{% assign posts = '' | split: '' %}
<!-- Get pinned posts -->
@@ -29,7 +29,7 @@ layout: page
{% assign default_beg = 0 %}
{% endif %}
{% assign default_num = paginator.posts | size | minus: pinned_num %}
{% assign default_num = paginator.posts | size | minus: pinned_num %}
{% assign default_end = default_beg | plus: default_num | minus: 1 %}
{% if default_num > 0 %}
@@ -39,55 +39,54 @@ layout: page
{% endif %}
<div id="post-list">
{% for post in posts %}
<div class="card post-preview">
<a href="{{ post.url | relative_url }}">
<div class="card-body">
<h1 class="card-title">
{{ post.title }}
</h1>
{% for post in posts %}
<div class="card-text post-content">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
</p>
</div>
<div class="post-preview">
<h1>
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
</h1>
<div class="post-meta text-muted d-flex">
<div class="mr-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw"></i>
{% include datetime.html date=post.date %}
<div class="post-content">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
</p>
<!-- categories -->
{% if post.categories.size > 0 %}
<i class="far fa-folder-open fa-fw"></i>
<span>
{% for category in post.categories %}
{{ category }}
{%- unless forloop.last -%},{%- endunless -%}
{% endfor %}
</span>
{% endif %}
</div>
{% if post.pin %}
<div class="pin">
<i class="fas fa-thumbtack fa-fw"></i>
<span>{{ site.data.locales[site.lang].post.pin_prompt }}</span>
</div>
{% endif %}
</div>
<!-- .post-meta -->
</div>
</a>
</div>
<div class="post-meta text-muted d-flex">
<div class="mr-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw"></i>
{% include datetime.html date=post.date %}
<!-- categories -->
{% if post.categories.size > 0 %}
<i class="far fa-folder-open fa-fw"></i>
<span>
{% for category in post.categories %}
{{ category }}
{%- unless forloop.last -%},{%- endunless -%}
{% endfor %}
</span>
{% endif %}
</div>
{% if post.pin %}
<div class="pin">
<i class="fas fa-thumbtack fa-fw"></i>
<span>{{ site.data.locales[site.lang].post.pin_prompt }}</span>
</div>
{% endif %}
</div> <!-- .post-meta -->
</div> <!-- .post-review -->
{% endfor %}
</div> <!-- #post-list -->
<!-- .post-review -->
{% endfor %}
</div>
<!-- #post-list -->
{% if paginator.total_pages > 0 %}
{% include post-paginator.html %}