Add Related-Posts in the bottom of each posts.

This commit is contained in:
Cotes Chung 2019-10-21 22:12:36 +08:00
parent 4287b9e612
commit 094b3da714
4 changed files with 137 additions and 18 deletions

View file

@ -0,0 +1,71 @@
<!--
The related posts of current post.
Placed in the bottom of every single post.
© 2019 Cotes Chung
Published under the MIT License
-->
{% assign MAX_SIZE = 3 %}
{% assign TAG_SCORE = 1 %}
{% assign CATEGORY_SCORE = 0.5 %}
{% assign score_list = "" | split: "" %}
{% assign post_index = 0 %}
{% for post in site.posts %}
{% if post.url != page.url %}
{% assign score = 0 %}
{% for tag in post.tags %}
{% if page.tags contains tag %}
{% assign score = score | plus: TAG_SCORE %}
{% endif %}
{% endfor %}
{% for category in post.categories %}
{% if page.categories contains category %}
{% assign score = score | plus: CATEGORY_SCORE %}
{% endif %}
{% endfor %}
{% if score > 0 %}
{% capture score_item %}{{ score }}:{{ post_index }}{% endcapture %}
{% assign score_list = score_list | push: score_item %}
{% endif %}
{% endif %}
{% assign post_index = post_index | plus: 1 %}
{% endfor %}
{% unless score_list.size == 0 %}
{% assign score_list = score_list | sort | reverse %}
{% assign count = 0 %}
<div id="related-posts" class="mt-4 mb-4 pb-3">
<h3 class="pt-2 mt-1 mb-4" data-toc-skip>Related Posts</h3>
<div class="card-deck mb-4">
{% for score_item in score_list %}
{% assign data = score_item | split: ":" %}
{% assign index = data[1] | plus: 0 %}
{% assign post = site.posts[index] %}
<div class="card btn-box-shadow">
<a href="{{ post.url }}">
<div class="card-body">
<span class="timeago text-muted small">
{{ post.date | date: POST_DATE }}
<i class="hidden">{{ page.date | date_to_xmlschema }}</i>
</span>
<h3 class="pt-0 mt-2 mb-3" data-toc-skip>{{ post.title }}</h3>
<div class="text-muted small">
<p>{{ post.content | markdownify | strip_html | truncate: 100 }}</p>
</div>
</div>
</a>
</div>
{% assign count = count | plus: 1 %}
{% if count >= MAX_SIZE %}
{% break %}
{% endif %}
{% endfor %}
</div><!-- .card-deck -->
</div>
{% endunless %}

View file

@ -52,7 +52,7 @@ layout: default
<div class="post-tail text-muted">
<!-- Tags -->
{% if page.tags.size > 0 %}
<div class="mb-2">
<div class="mb-4">
{% for tag in page.tags %}
<a href="{{ site.baseurl }}/tags/{{ tag | replace: ' ', '-' | downcase }}/"
class="post-tag no-text-decoration" >
@ -61,11 +61,12 @@ layout: default
{% endfor %}
</div>
{% endif %}
</div><!-- endof .post-tail -->
</div> <!-- .post -->
{% include related-posts.html %}
<div class="post-pager d-flex justify-content-between">
{% if page.previous.url %}
<a href="{{ site.baseurl }}{{page.previous.url}}" class="btn btn-outline-primary">

View file

@ -769,15 +769,15 @@ table tbody td {
}
.post-tail {
margin-top: 4rem;
border-bottom: 2px solid #f2f2f2;
margin-top: 3.5rem;
border-bottom: 1px double #e9ecef;
font-size: 0.85rem;
}
.post-tag {
background: rgba(0, 0, 0, 0.075);
border-radius: .34rem;
padding: .15rem .4rem;
padding: .25rem .4rem;
margin: 0 .1rem;
color: #818182;
line-height: 1.6rem;
@ -852,19 +852,66 @@ table tbody td {
padding-top: 0;
}
/* sharing */
#sharing a>i{
font-size: 1.2em;
/*--- Related Posts ---*/
#related-posts {
border-bottom: 1px double #e9ecef;
}
#sharing .fab.fa-facebook-square {
color: #3b549f;
#related-posts>h3 {
color: gray;
font-size: 1.1rem;
font-family: 'Oswald', sans-serif;
}
#sharing .fab.fa-google-plus-g {
color: #d42a2a;
#related-posts .card {
border: none;
-webkit-transition: all .5s ease-in-out;;
-moz-transition: all .5s ease-in-out;;
transition: all .5s ease-in-out;
}
#related-posts .card h3 {
color: #353a3d;
}
#related-posts p {
font-size: .9rem;
margin-bottom: .5rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#related-posts a:hover {
text-decoration: none;
}
#related-posts .card:hover {
transform: scale(1.05);
}
#related-posts ul {
list-style-type: none;
padding-inline-start: 1.5rem;
}
#related-posts ul > li::before {
background: #c2c9d4;
width: 5px;
height: 5px;
border-radius: 1px;
display: block;
content: "";
position: relative;
top: 1rem;
right: 1rem;
}
/*--- Tab Categories ---*/
.categories {
@ -1085,11 +1132,11 @@ a.tag:hover {
padding: .6rem 0;
}
#page-category ul>li::before,
#page-tag ul>li::before {
#page-category ul > li::before,
#page-tag ul > li::before {
background: #999;
width: 6px;
height: 6px;
width: 5px;
height: 5px;
border-radius: 50%;
display: block;
content: "";

View file

@ -6,10 +6,10 @@ title: Tags
# MIT License
---
{%comment%}
{% comment %}
'site.tags' looks like a Map, e.g. site.tags.MyTag.[ Post0, Post1, ... ]
Print the {{ site.tags }} will help you to understand it.
{%endcomment%}
{% endcomment %}
<div id="tags" class="d-flex flex-wrap">
{% assign tags = "" | split: "" %}
{% for t in site.tags %}