Skip to content

Commit 30437ac

Browse files
jeffreytsejeffreytse
committed
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> ```
1 parent f3d2a6f commit 30437ac

File tree

8 files changed

+130
-115
lines changed

8 files changed

+130
-115
lines changed

‎_includes/views/pagination-item.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
2+
3+
{% assign article = post.content %}
4+
{% assign lang = post.lang %}
5+
{%- include functions.html func='get_reading_time' -%}
6+
{% assign reading_time = return %}
7+
{%- include functions.html func='get_article_excerpt' -%}
8+
{% assign excerpt = return %}
9+
{%- assign post_url = post.url | relative_url -%}
10+
11+
<li class="{{ post_item_class }}">
12+
<h2 class="post-title">
13+
<a class="post-link" href="{{ post_url }}">
14+
{{ post.title | escape }}
15+
{%- include views/post-badges.html -%}
16+
</a>
17+
</h2>
18+
<div class="post-meta">
19+
<span class="post-date"><i class="fa fa-calendar"></i> {{ post.date | date: date_format }}</span>
20+
<span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>
21+
</div>
22+
<a class="post-excerpt" href="{{ post_url }}">
23+
<p>
24+
{{ excerpt }} <span class="read_more">Read More</span>
25+
</p>
26+
</a>
27+
<div class="post-tags">
28+
{%- for tag in post.tags -%}
29+
<a class="post-tag" href="{{ '/tags.html ' | relative_url }}#{{tag}}">#{{tag}}</a>
30+
{%- endfor -%}
31+
</div>
32+
</li>

‎_includes/views/pagination.html‎

Lines changed: 17 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,24 @@
88
<div class="pagination">
99
<!-- Post list links -->
1010
<ul class="post-list">
11-
{%- for post in paginator.posts -%}
12-
<li>
13-
{%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
14-
15-
{% assign article = post.content %}
16-
{% assign lang = post.lang %}
17-
{%- include functions.html func='get_reading_time' -%}
18-
{% assign reading_time = return %}
19-
{%- include functions.html func='get_article_excerpt' -%}
20-
{% assign excerpt = return %}
21-
{%- assign post_url = post.url | relative_url -%}
11+
<!-- Top list item -->
12+
{%- if paginator == site or paginator.page == 1 -%}
13+
{%- assign post_item_class = "top-post" -%}
14+
{%- assign posts = site.posts
15+
| where_exp: "item", "item.top > 0"
16+
| sort: "top" -%}
17+
{%- for post in posts -%}
18+
{%- include views/pagination-item.html -%}
19+
{%- endfor -%}
20+
{%- endif -%}
2221

23-
<h2 class="post-title">
24-
<a class="post-link" href="{{ post_url }}">
25-
{{ post.title | escape }}
26-
</a>
27-
</h2>
28-
<div class="post-meta">
29-
<span class="post-date"><i class="fa fa-calendar"></i> {{ post.date | date: date_format }}</span>
30-
<span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>
31-
</div>
32-
<a class="post-excerpt" href="{{ post_url }}">
33-
<p>
34-
{{ excerpt }} <span class="read_more">Read More</span>
35-
</p>
36-
</a>
37-
<div class="post-tags">
38-
{%- for tag in post.tags -%}
39-
<a class="post-tag" href="{{ '/tags.html ' | relative_url }}#{{tag}}">#{{tag}}</a>
40-
{%- endfor -%}
41-
</div>
42-
</li>
22+
<!-- Normal list item -->
23+
{%- assign post_item_class = "" -%}
24+
{%- for post in paginator.posts -%}
25+
{%- if post.top -%}
26+
{%- continue -%}
27+
{%- endif -%}
28+
{%- include views/pagination-item.html -%}
4329
{%- endfor -%}
4430
</ul>
4531

‎_includes/views/post-badges.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<span class="post-badges">
2+
<span class="post-badge badge-top">TOP</span>
3+
<span class="post-badge badge-new">NEW</span>
4+
</span>

‎_includes/views/post-item.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@
99
<span>
1010
<a class="post-link" href="{{ post.url | relative_url }}">
1111
{{ post.title | escape }}
12+
{%- include views/post-badges.html -%}
1213
</a>
1314
</span>

‎_includes/views/segments.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,13 @@ <h2 id="{{ key }}" class="segment-name">{{ key }}</h2>
1313
{% assign items = site.posts | where: field, key %}
1414
{% for item in items %}
1515
{% if item != nil %}
16-
<li> {% include views/post-item.html %} </li>
16+
{%- assign post_item_class = "" -%}
17+
{%- if item.top -%}
18+
{%- assign post_item_class = "top-post" -%}
19+
{%- endif -%}
20+
<li class="{{ post_item_class }}">
21+
{%- include views/post-item.html -%}
22+
</li>
1723
{% endif %}
1824
{% endfor %}
1925
{% endfor %}

‎_layouts/post.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,18 @@
5050
<ul>
5151
{% assign posts = site[page.collection] | sample:4 %}
5252
{%- for post in posts -%}
53-
<li><a class="post-link" href="{{post.url | relative_url}}" title="{{ page.next.title | escape }}">{{ post.title | escape | truncatewords: 12 }}</a></li>
53+
{%- assign post_item_class = "" -%}
54+
{%- if post.top -%}
55+
{%- assign post_item_class = "top-post" -%}
56+
{%- endif -%}
57+
<li class="{{ post_item_class }}">
58+
<a class="post-link"
59+
href="{{ post.url | relative_url }}"
60+
title="{{ post.title | escape }}">
61+
{{ post.title | escape | truncatewords: 12 }}
62+
{%- include views/post-badges.html -%}
63+
</a>
64+
</li>
5465
{%- endfor -%}
5566
</ul>
5667
</div>

‎_sass/yat/_dark.scss‎

Lines changed: 9 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -101,16 +101,6 @@ html[data-theme="dark"] {
101101
}
102102

103103
.pagination {
104-
.post-title {
105-
a:visited:after {
106-
background-color: $dark-background-color;
107-
}
108-
109-
a:after {
110-
color: $dark-background-color;
111-
}
112-
}
113-
114104
.post-link {
115105
color: #bbb;
116106
}
@@ -135,14 +125,6 @@ html[data-theme="dark"] {
135125
a {
136126
color: #ddd;
137127
}
138-
139-
a:visited:after {
140-
background-color: $dark-background-color;
141-
}
142-
143-
a:after {
144-
color: $dark-background-color;
145-
}
146128
}
147129
}
148130

@@ -166,15 +148,6 @@ html[data-theme="dark"] {
166148
color: #d7d7d7;
167149
}
168150

169-
a:visited:after {
170-
color: $dark-background-color;
171-
background-color: $dark-background-color;
172-
}
173-
174-
a:after {
175-
color: $dark-background-color;
176-
}
177-
178151
a:hover {
179152
color: #aaa;
180153
}
@@ -223,5 +196,14 @@ html[data-theme="dark"] {
223196
}
224197
}
225198
}
199+
200+
a .post-badges .post-badge {
201+
color: $dark-background-color !important;
202+
}
203+
204+
a:visited .post-badges .post-badge.badge-new {
205+
display: none;
206+
background-color: $dark-background-color;
207+
}
226208
}
227209

‎_sass/yat/_layout.scss‎

Lines changed: 48 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -285,25 +285,6 @@ html {
285285

286286
a {
287287
text-decoration: none;
288-
289-
&:after {
290-
content: 'NEW';
291-
position: absolute;
292-
margin-left: 8px;
293-
margin-top: 3px;
294-
padding: 0px 3px;
295-
background-color: $brand-color;
296-
color: #fff;
297-
font-size: 10px;
298-
font-weight: 600;
299-
border-radius: 2px;
300-
transition-duration: $base-transition-duration;
301-
}
302-
303-
&:visited:after {
304-
color: $background-color;
305-
background-color: $background-color;
306-
}
307288
}
308289
}
309290

@@ -477,24 +458,6 @@ html {
477458
&:hover {
478459
color: darken($grey-color, 50%);
479460
}
480-
481-
&:after {
482-
content: 'NEW';
483-
position: absolute;
484-
margin-left: 8px;
485-
margin-top: 3px;
486-
padding: 0px 3px;
487-
background-color: $brand-color;
488-
color: $background-color;
489-
font-size: 10px;
490-
font-weight: 600;
491-
border-radius: 2px;
492-
}
493-
494-
&:visited:after {
495-
color: $background-color;
496-
background-color: $background-color;
497-
}
498461
}
499462
}
500463
}
@@ -503,7 +466,6 @@ html {
503466
padding-top: 25px;
504467
}
505468

506-
507469
/**
508470
* Posts misc
509471
*/
@@ -754,23 +716,6 @@ html {
754716
&:hover {
755717
color: #000;
756718
}
757-
758-
&:after {
759-
content: 'NEW';
760-
position: absolute;
761-
margin-left: 8px;
762-
margin-top: 3px;
763-
padding: 0px 3px;
764-
background-color: $brand-color;
765-
color: #fff;
766-
font-size: 10px;
767-
font-weight: 600;
768-
border-radius: 2px;
769-
}
770-
771-
&:visited:after {
772-
background-color: #fff;
773-
}
774719
}
775720
}
776721

@@ -783,3 +728,51 @@ html {
783728
background-color: #e3e3e3e3;
784729
vertical-align: baseline;
785730
}
731+
732+
/**
733+
* Post badge
734+
*/
735+
.post-badges {
736+
display: inline-block;
737+
position: relative;
738+
margin-left: 8px;
739+
margin-top: 3px;
740+
user-select: none;
741+
}
742+
743+
.pagination .post-badges {
744+
bottom: 0.5em;
745+
}
746+
747+
.post-related .post-badges {
748+
bottom: 0.1em;
749+
}
750+
751+
.page-segments .post-badges {
752+
bottom: 0.1em;
753+
}
754+
755+
.post-badge {
756+
display: none;
757+
padding: 0px 3px;
758+
background-color: $brand-color;
759+
color: #fff;
760+
font-size: 10px;
761+
font-weight: 600;
762+
border-radius: 2px;
763+
transition-duration: $base-transition-duration;
764+
}
765+
766+
.post-badge.badge-new {
767+
display: inline-block;
768+
}
769+
770+
.top-post .post-badges .post-badge.badge-top {
771+
display: inline-block;
772+
}
773+
774+
a:visited .post-badges .post-badge.badge-new {
775+
display: none;
776+
color: $background-color;
777+
background-color: $background-color;
778+
}

0 commit comments

Comments
 (0)