Add Related-Posts in the bottom of each posts.
This commit is contained in:
parent
4287b9e612
commit
094b3da714
4 changed files with 137 additions and 18 deletions
71
_includes/related-posts.html
Normal file
71
_includes/related-posts.html
Normal 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 %}
|
|
@ -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">
|
||||
|
|
|
@ -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: "";
|
||||
|
|
|
@ -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 %}
|
||||
|
|
Loading…
Reference in a new issue