Add Related-Posts in the bottom of each posts.

_includes/related-posts.html

@@ -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 %}

_layouts/post.html

@@ -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">

assets/css/_src/main.scss

@@ -769,15 +769,15 @@ table tbody td {
 }
 
 .post-tail {
-  margin-top: 4rem;
+  margin-top: 3.5rem;
-  border-bottom: 2px solid #f2f2f2;
+  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{
+/*--- Related Posts ---*/
-  font-size: 1.2em;
+
+#related-posts {
+  border-bottom: 1px double #e9ecef;
 }
 
-#sharing .fab.fa-facebook-square {
+#related-posts>h3 {
-  color: #3b549f;
+  color: gray;
+  font-size: 1.1rem;
+  font-family: 'Oswald', sans-serif;
 }
 
-#sharing .fab.fa-google-plus-g {
+#related-posts .card {
-  color: #d42a2a;
+  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-category ul > li::before,
-#page-tag ul>li::before {
+#page-tag ul > li::before {
   background: #999;
-  width: 6px;
+  width: 5px;
-  height: 6px;
+  height: 5px;
   border-radius: 50%;
   display: block;
   content: "";

tabs/tags.md

@@ -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 %}