From 30437acaf53524ed97175d513b23d8042f3cf375 Mon Sep 17 00:00:00 2001 From: Jeffrey Tse Date: Mon, 21 Aug 2023 20:33:58 +0800 Subject: 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: ``` --- _includes/views/pagination-item.html | 32 +++++++++++ _includes/views/pagination.html | 48 ++++++---------- _includes/views/post-badges.html | 4 ++ _includes/views/post-item.html | 1 + _includes/views/segments.html | 8 ++- _layouts/post.html | 13 ++++- _sass/yat/_dark.scss | 36 +++--------- _sass/yat/_layout.scss | 103 ++++++++++++++++------------------- 8 files changed, 130 insertions(+), 115 deletions(-) create mode 100644 _includes/views/pagination-item.html create mode 100644 _includes/views/post-badges.html 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 -%} + +
  • +

    + + {{ post.title | escape }} + {%- include views/post-badges.html -%} + +

    +
    + {{ post.date | date: date_format }} + {{ reading_time }} +
    + +

    + {{ excerpt }} Read More +

    +     +
    + {%- for tag in post.tags -%} + #{{tag}} + {%- endfor -%} +
    +
    • 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 @@ 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; +} -- cgit v1.2.3