From 34d54f9349a4a0a0b60e527c490ab6e020c535a0 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 6 Jun 2020 12:45:33 +0800
Subject: [PATCH] Super feature: Pinned posts.

---
 README.md                             |  3 +-
 _layouts/home.html                    | 59 ++++++++++++++++++++++++---
 _posts/2019-08-08-write-a-new-post.md | 11 +++++
 _posts/2019-08-09-getting-started.md  |  1 +
 assets/css/home.scss                  |  5 ++-
 assets/js/_utils/pageviews.js         |  2 +-
 docs/README_zh-CN.md                  |  3 +-
 7 files changed, 75 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 01bf528..a71f973 100644
--- a/README.md
+++ b/README.md
@@ -22,8 +22,9 @@ A minimal, sidebar, responsive web design Jekyll theme, focusing on text present
 
 ## Features
 
+* Pinned Posts
 * Configurable theme mode
-* Two-level Categories
+* Double-level Categories
 * Last modified date for posts
 * Table of Contents
 * Automatically recommend related posts
diff --git a/_layouts/home.html b/_layouts/home.html
index 0f4edbe..891764f 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -7,12 +7,59 @@ layout: page
 # MIT Licensed
 ---
 
+
+{% assign pinned = site.posts | where_exp: "item", "item.pin == true"  %}
+
+{% assign default = site.posts | where_exp: "item", "item.pin == nil "  %}
+
+{% assign posts = "" | split: "" %}
+
+<!-- Get pinned posts -->
+
+{% assign offset = paginator.page | minus: 1 | times: paginator.per_page %}
+
+{% assign pinned_num = pinned.size | minus: offset %}
+
+{% if pinned_num > 0 %}
+  {% for i in (offset..pinned.size) limit: pinned_num %}
+    {% assign posts = posts | push: pinned[i] %}
+  {% endfor %}
+{% else %}
+  {% assign pinned_num = 0 %}
+{% endif %}
+
+
+<!-- Get defualt posts -->
+
+{% assign default_beg = offset | minus: pinned.size %}
+
+{% if default_beg < 0 %}
+  {% assign default_beg = 0 %}
+{% endif %}
+
+{% assign default_num = paginator.posts | size | minus: pinned_num  %}
+
+{% assign default_end = default_beg | plus: default_num | minus: 1 %}
+
+{% if default_num > 0 %}
+  {% for i in (default_beg..default_end) %}
+    {% assign posts = posts | push: default[i] %}
+  {% endfor %}
+{% endif %}
+
+
 <div id="post-list">
-  {% for post in paginator.posts %}
+
+{% for post in posts %}
+
   <div class="post-preview">
-    <h1>
-      <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
-    </h1>
+    <div class="d-flex justify-content-between align-items-center pr-2">
+      <h1><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h1>
+      {% if post.pin %}
+        <i class="fas fa-thumbtack fa-fw fa-sm text-muted pinned" data-toggle="tooltip" data-placement="top"
+        title="Pinned"></i>
+      {% endif %}
+    </div>
     <div class="post-content">
       <p>
       {% assign _content = post.content %}
@@ -38,7 +85,9 @@ layout: page
       {% endif %}
     </div>
   </div> <!-- .post-review -->
-  {% endfor %}
+
+{% endfor %}
+
 </div> <!-- #post-list -->
 
 {% if paginator.total_pages > 0 %}
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 49cbd03..a0d337c 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -124,6 +124,17 @@ math: true
 ```
 
 
+## Pinned Posts
+
+You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:
+
+```yaml
+---
+pin: true
+---
+```
+
+
 ## Code Block
 
 Markdown symbols <code class="highlighter-rouge">```</code> can easily create a code block as following examples.
diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md
index 8a9d79f..b734f9a 100644
--- a/_posts/2019-08-09-getting-started.md
+++ b/_posts/2019-08-09-getting-started.md
@@ -4,6 +4,7 @@ author: Cotes Chung
 date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]
+pin: true
 ---
 
 ## Prerequisites
diff --git a/assets/css/home.scss b/assets/css/home.scss
index ae77b38..423743b 100644
--- a/assets/css/home.scss
+++ b/assets/css/home.scss
@@ -29,7 +29,7 @@
   padding-top: 1.5rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--main-border-color);
-  >h1 {
+  h1 {
     font-size: 1.4rem;
     margin: 0;
   }
@@ -49,6 +49,9 @@
       -webkit-box-orient: vertical;
     }
   }
+  .pinned {
+    transform: rotate(45deg);
+  }
 }
 
 .page-item {
diff --git a/assets/js/_utils/pageviews.js b/assets/js/_utils/pageviews.js
index 4db98da..415a26c 100644
--- a/assets/js/_utils/pageviews.js
+++ b/assets/js/_utils/pageviews.js
@@ -69,7 +69,7 @@ function displayPageviews(data) {
 
   if ($("#post-list").length > 0) { /* the Home page */
     $(".post-preview").each(function() {
-      var path = $(this).children("h1").children("a").attr("href");
+      var path = $(this).children("div").children("h1").children("a").attr("href");
       tacklePV(rows, path, $(this).find('.pageviews'), hasInit);
     });
 
diff --git a/docs/README_zh-CN.md b/docs/README_zh-CN.md
index 7d8a636..8efe64e 100644
--- a/docs/README_zh-CN.md
+++ b/docs/README_zh-CN.md
@@ -24,7 +24,8 @@
 
 ## 功能预览
 
-* 自动暗夜模式
+* 文章置顶
+* 可配置的全局主题颜色
 * 文章最后修改日期
 * 文章目录
 * 自动推荐相关文章