summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJeffrey Tse <jeffreytse.mail@gmail.com>2023-08-21 20:33:58 +0800
committerJeffrey Tse <jeffreytse.mail@gmail.com>2023-08-23 15:12:07 +0800
commit30437acaf53524ed97175d513b23d8042f3cf375 (patch)
treea22d4cc5407cfaf6c95bb19c99974f7d4ffb0ca2
parentf3d2a6fc15e2889c563459ef86137df275714d2c (diff)
feat: support to pin articles (#50)
This feature can allow you to top articles via post front meta property `top`, the value is a number, the smaller the number is, the higher priority the article has. Example: ``` title: My Article top: <number> ```
-rw-r--r--_includes/views/pagination-item.html32
-rw-r--r--_includes/views/pagination.html48
-rw-r--r--_includes/views/post-badges.html4
-rw-r--r--_includes/views/post-item.html1
-rw-r--r--_includes/views/segments.html8
-rw-r--r--_layouts/post.html13
-rw-r--r--_sass/yat/_dark.scss36
-rw-r--r--_sass/yat/_layout.scss103
8 files changed, 130 insertions, 115 deletions
diff --git a/_includes/views/pagination-item.html b/_includes/views/pagination-item.html
new file mode 100644
index 0000000..bea6d91
--- /dev/null
+++ b/_includes/views/pagination-item.html
@@ -0,0 +1,32 @@
+{%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
+
+{% assign article = post.content %}
+{% assign lang = post.lang %}
+{%- include functions.html func='get_reading_time' -%}
+{% assign reading_time = return %}
+{%- include functions.html func='get_article_excerpt' -%}
+{% assign excerpt = return %}
+{%- assign post_url = post.url | relative_url -%}
+
+<li class="{{ post_item_class }}">
+ <h2 class="post-title">
+ <a class="post-link" href="{{ post_url }}">
+ {{ post.title | escape }}
+ {%- include views/post-badges.html -%}
+ </a>
+ </h2>
+ <div class="post-meta">
+ <span class="post-date"><i class="fa fa-calendar"></i> {{ post.date | date: date_format }}</span>
+ <span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>
+ </div>
+ <a class="post-excerpt" href="{{ post_url }}">
+ <p>
+ {{ excerpt }} <span class="read_more">Read More</span>
+ </p>
+ </a>
+ <div class="post-tags">
+ {%- for tag in post.tags -%}
+ <a class="post-tag" href="{{ '/tags.html ' | relative_url }}#{{tag}}">#{{tag}}</a>
+ {%- endfor -%}
+ </div>
+</li>
diff --git a/_includes/views/pagination.html b/_includes/views/pagination.html
index 88be011..014df85 100644
--- a/_includes/views/pagination.html
+++ b/_includes/views/pagination.html
@@ -8,38 +8,24 @@
<div class="pagination">
<!-- Post list links -->
<ul class="post-list">
- {%- for post in paginator.posts -%}
- <li>
- {%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
-
- {% assign article = post.content %}
- {% assign lang = post.lang %}
- {%- include functions.html func='get_reading_time' -%}
- {% assign reading_time = return %}
- {%- include functions.html func='get_article_excerpt' -%}
- {% assign excerpt = return %}
- {%- assign post_url = post.url | relative_url -%}
+ <!-- Top list item -->
+ {%- if paginator == site or paginator.page == 1 -%}
+ {%- assign post_item_class = "top-post" -%}
+ {%- assign posts = site.posts
+ | where_exp: "item", "item.top > 0"
+ | sort: "top" -%}
+ {%- for post in posts -%}
+ {%- include views/pagination-item.html -%}
+ {%- endfor -%}
+ {%- endif -%}
- <h2 class="post-title">
- <a class="post-link" href="{{ post_url }}">
- {{ post.title | escape }}
- </a>
- </h2>
- <div class="post-meta">
- <span class="post-date"><i class="fa fa-calendar"></i> {{ post.date | date: date_format }}</span>
- <span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>
- </div>
- <a class="post-excerpt" href="{{ post_url }}">
- <p>
- {{ excerpt }} <span class="read_more">Read More</span>
- </p>
- </a>
- <div class="post-tags">
- {%- for tag in post.tags -%}
- <a class="post-tag" href="{{ '/tags.html ' | relative_url }}#{{tag}}">#{{tag}}</a>
- {%- endfor -%}
- </div>
- </li>
+ <!-- Normal list item -->
+ {%- assign post_item_class = "" -%}
+ {%- for post in paginator.posts -%}
+ {%- if post.top -%}
+ {%- continue -%}
+ {%- endif -%}
+ {%- include views/pagination-item.html -%}
{%- endfor -%}
</ul>
diff --git a/_includes/views/post-badges.html b/_includes/views/post-badges.html
new file mode 100644
index 0000000..932781a
--- /dev/null
+++ b/_includes/views/post-badges.html
@@ -0,0 +1,4 @@
+<span class="post-badges">
+ <span class="post-badge badge-top">TOP</span>
+ <span class="post-badge badge-new">NEW</span>
+</span>
diff --git a/_includes/views/post-item.html b/_includes/views/post-item.html
index 0d6d129..0cad1f4 100644
--- a/_includes/views/post-item.html
+++ b/_includes/views/post-item.html
@@ -9,5 +9,6 @@
<span>
<a class="post-link" href="{{ post.url | relative_url }}">
{{ post.title | escape }}
+ {%- include views/post-badges.html -%}
</a>
</span>
diff --git a/_includes/views/segments.html b/_includes/views/segments.html
index 2c92dc1..0cf9414 100644
--- a/_includes/views/segments.html
+++ b/_includes/views/segments.html
@@ -13,7 +13,13 @@
{% assign items = site.posts | where: field, key %}
{% for item in items %}
{% if item != nil %}
- <li> {% include views/post-item.html %} </li>
+ {%- assign post_item_class = "" -%}
+ {%- if item.top -%}
+ {%- assign post_item_class = "top-post" -%}
+ {%- endif -%}
+ <li class="{{ post_item_class }}">
+ {%- include views/post-item.html -%}
+ </li>
{% endif %}
{% endfor %}
{% endfor %}
diff --git a/_layouts/post.html b/_layouts/post.html
index c561308..442cfe6 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -50,7 +50,18 @@ sidebar:
<ul>
{% assign posts = site[page.collection] | sample:4 %}
{%- for post in posts -%}
- <li><a class="post-link" href="{{post.url | relative_url}}" title="{{ page.next.title | escape }}">{{ post.title | escape | truncatewords: 12 }}</a></li>
+ {%- assign post_item_class = "" -%}
+ {%- if post.top -%}
+ {%- assign post_item_class = "top-post" -%}
+ {%- endif -%}
+ <li class="{{ post_item_class }}">
+ <a class="post-link"
+ href="{{ post.url | relative_url }}"
+ title="{{ post.title | escape }}">
+ {{ post.title | escape | truncatewords: 12 }}
+ {%- include views/post-badges.html -%}
+ </a>
+ </li>
{%- endfor -%}
</ul>
</div>
diff --git a/_sass/yat/_dark.scss b/_sass/yat/_dark.scss
index 11bd327..a23896d 100644
--- a/_sass/yat/_dark.scss
+++ b/_sass/yat/_dark.scss
@@ -101,16 +101,6 @@ html[data-theme="dark"] {
}
.pagination {
- .post-title {
- a:visited:after {
- background-color: $dark-background-color;
- }
-
- a:after {
- color: $dark-background-color;
- }
- }
-
.post-link {
color: #bbb;
}
@@ -135,14 +125,6 @@ html[data-theme="dark"] {
a {
color: #ddd;
}
-
- a:visited:after {
- background-color: $dark-background-color;
- }
-
- a:after {
- color: $dark-background-color;
- }
}
}
@@ -166,15 +148,6 @@ html[data-theme="dark"] {
color: #d7d7d7;
}
- a:visited:after {
- color: $dark-background-color;
- background-color: $dark-background-color;
- }
-
- a:after {
- color: $dark-background-color;
- }
-
a:hover {
color: #aaa;
}
@@ -223,5 +196,14 @@ html[data-theme="dark"] {
}
}
}
+
+ a .post-badges .post-badge {
+ color: $dark-background-color !important;
+ }
+
+ a:visited .post-badges .post-badge.badge-new {
+ display: none;
+ background-color: $dark-background-color;
+ }
}
diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss
index 3931258..8398ca8 100644
--- a/_sass/yat/_layout.scss
+++ b/_sass/yat/_layout.scss
@@ -285,25 +285,6 @@ html {
a {
text-decoration: none;
-
- &:after {
- content: 'NEW';
- position: absolute;
- margin-left: 8px;
- margin-top: 3px;
- padding: 0px 3px;
- background-color: $brand-color;
- color: #fff;
- font-size: 10px;
- font-weight: 600;
- border-radius: 2px;
- transition-duration: $base-transition-duration;
- }
-
- &:visited:after {
- color: $background-color;
- background-color: $background-color;
- }
}
}
@@ -477,24 +458,6 @@ html {
&:hover {
color: darken($grey-color, 50%);
}
-
- &:after {
- content: 'NEW';
- position: absolute;
- margin-left: 8px;
- margin-top: 3px;
- padding: 0px 3px;
- background-color: $brand-color;
- color: $background-color;
- font-size: 10px;
- font-weight: 600;
- border-radius: 2px;
- }
-
- &:visited:after {
- color: $background-color;
- background-color: $background-color;
- }
}
}
}
@@ -503,7 +466,6 @@ html {
padding-top: 25px;
}
-
/**
* Posts misc
*/
@@ -754,23 +716,6 @@ html {
&:hover {
color: #000;
}
-
- &:after {
- content: 'NEW';
- position: absolute;
- margin-left: 8px;
- margin-top: 3px;
- padding: 0px 3px;
- background-color: $brand-color;
- color: #fff;
- font-size: 10px;
- font-weight: 600;
- border-radius: 2px;
- }
-
- &:visited:after {
- background-color: #fff;
- }
}
}
@@ -783,3 +728,51 @@ html {
background-color: #e3e3e3e3;
vertical-align: baseline;
}
+
+/**
+ * Post badge
+ */
+.post-badges {
+ display: inline-block;
+ position: relative;
+ margin-left: 8px;
+ margin-top: 3px;
+ user-select: none;
+}
+
+.pagination .post-badges {
+ bottom: 0.5em;
+}
+
+.post-related .post-badges {
+ bottom: 0.1em;
+}
+
+.page-segments .post-badges {
+ bottom: 0.1em;
+}
+
+.post-badge {
+ display: none;
+ padding: 0px 3px;
+ background-color: $brand-color;
+ color: #fff;
+ font-size: 10px;
+ font-weight: 600;
+ border-radius: 2px;
+ transition-duration: $base-transition-duration;
+}
+
+.post-badge.badge-new {
+ display: inline-block;
+}
+
+.top-post .post-badges .post-badge.badge-top {
+ display: inline-block;
+}
+
+a:visited .post-badges .post-badge.badge-new {
+ display: none;
+ color: $background-color;
+ background-color: $background-color;
+}