From 094b3da714f6bf925931c77384a5976c84c41981 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Mon, 21 Oct 2019 22:12:36 +0800 Subject: [PATCH] Add Related-Posts in the bottom of each posts. --- _includes/related-posts.html | 71 ++++++++++++++++++++++++++++++++++ _layouts/post.html | 5 ++- assets/css/_src/main.scss | 75 +++++++++++++++++++++++++++++------- tabs/tags.md | 4 +- 4 files changed, 137 insertions(+), 18 deletions(-) create mode 100644 _includes/related-posts.html diff --git a/_includes/related-posts.html b/_includes/related-posts.html new file mode 100644 index 0000000..c270f81 --- /dev/null +++ b/_includes/related-posts.html @@ -0,0 +1,71 @@ + + +{% 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 %} + +{% endunless %} \ No newline at end of file diff --git a/_layouts/post.html b/_layouts/post.html index 7398f4e..8a5819c 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -52,7 +52,7 @@ layout: default
{% if page.tags.size > 0 %} -
+
{% for tag in page.tags %} @@ -61,11 +61,12 @@ layout: default {% endfor %}
{% endif %} -
+ {% include related-posts.html %} +
{% if page.previous.url %} diff --git a/assets/css/_src/main.scss b/assets/css/_src/main.scss index 96db292..fa9966f 100644 --- a/assets/css/_src/main.scss +++ b/assets/css/_src/main.scss @@ -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: ""; diff --git a/tabs/tags.md b/tabs/tags.md index f5d337f..eeebce1 100644 --- a/tabs/tags.md +++ b/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 %}
{% assign tags = "" | split: "" %} {% for t in site.tags %}