✨ add recommended article relevance and put placeholder first

mickm3n · Jul 26, 2024 · 6f79868 · 6f79868
1 parent 8ea5baa
commit 6f79868
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/static/site/styles/site.css b/static/site/styles/site.css
@@ -654,6 +654,12 @@ tr:first-child th {
   text-transform: uppercase;
 }
 
+.article-relevance {
+  color: #e74c3c;
+  font-size: 0.85rem;
+  text-align: right;
+}
+
 .article-date {
   color: #7f8c8d;
 }

diff --git a/templates/macros.html b/templates/macros.html
@@ -49,7 +49,7 @@ <h1><a class="no-underline " href="{{ page.permalink }}">{{ page.title }}</a></h
 </p>
 {% endmacro post_link %}
 
-{% macro card(nn_page) %}
+{% macro card(nn_page, relevance) %}
 {% if nn_page.extra.image %}
 {% set image = config.base_url ~ nn_page.path ~ nn_page.extra.image %}
 {% else %}
@@ -70,6 +70,9 @@ <h1><a class="no-underline " href="{{ page.permalink }}">{{ page.title }}</a></h
         <img src="{{ image }}">
     </div>
     <div class="article-info">
+        <div class="article-relevance">
+            <span>{{ relevance }} 相關</span>
+        </div>
         <div class="article-meta">
             <span class="article-category">{{ breadcrumb | safe }}</span>
             <span class="article-date">{{ nn_page.date }}</span>

diff --git a/templates/page.html b/templates/page.html
@@ -55,7 +55,7 @@ <h2>相關文章推薦</h2>
   {% set top_3_nn_paths = top_3_nn[page.path] | split(pat=":") %}
   {% for path in top_3_nn_paths %}
   {% set nn_page = get_page(path=path) %}
-  {{ macro::card(nn_page=nn_page) }}
+  {{ macro::card(nn_page=nn_page, relevance="70%") }}
   {% endfor %}
   {% endif %}
 </div>

diff --git a/templates/reading-note.html b/templates/reading-note.html
@@ -56,7 +56,7 @@ <h2>相關文章推薦</h2>
   {% set top_3_nn_paths = top_3_nn[page.path] | split(pat=":") %}
   {% for path in top_3_nn_paths %}
   {% set nn_page = get_page(path=path) %}
-  {{ macro::card(nn_page=nn_page) }}
+  {{ macro::card(nn_page=nn_page, relevance="70%") }}
   {% endfor %}
   {% endif %}
 </div>