Super feature: Pinned posts.

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

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

_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.

_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

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 {

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);
     });
 

docs/README_zh-CN.md

@@ -24,7 +24,8 @@
 
 ## 功能预览
 
-* 自动暗夜模式
+* 文章置顶
+* 可配置的全局主题颜色
 * 文章最后修改日期
 * 文章目录
 * 自动推荐相关文章