♻️ change backlink posts to card view

mickm3n · Jul 31, 2024 · 8695d6d · 8695d6d
1 parent 711d7fc
commit 8695d6d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 30 deletions.
diff --git a/content/changelog/index.md b/content/changelog/index.md
@@ -13,6 +13,11 @@ tags = []
 > * MINOR: 有小型更新時變動，例如增加了 sortable table view 或是搜尋功能。
 > * PATCH: 有小幅度修正時變動，例如改了 style 或文章的 properties。
 
+# [2024-08-01][v1.7.3] 將「提及本篇的區塊」也改為 Card View
+## Changed
+* 將「提及本篇的文章」也改為 Card View
+![](backlink-card-view.webp)
+
 # [2024-07-28][v1.7.2] 增加 Code Block 複製按鈕
 ## New
 * 由於 Code Block 是從 Markdown 產生的，用的方式是額外加 Javascript 動態增加。

diff --git a/templates/page.html b/templates/page.html
@@ -32,22 +32,21 @@ <h1>{{ page.title }}</h1>
     {% endfor %}
   </p>
   {% endif %}
-  {% if page.backlinks %}
-  <div>
-    <h2>提及本篇的文章</h2>
-    <ul class="root-ul">
-      {% for backlink in page.backlinks %}
-      {% if backlink.permalink != page.permalink %}
-      <li>
-        <a href="{{ backlink.permalink }}">{{ backlink.title }}</a>
-      </li>
-      {% endif %}
-      {% endfor %}
-    </ul>
-  </div>
-  {% endif %}
-  <br>
 </article>
+{% if page.backlinks %}
+<h2>提及本篇的文章</h2>
+<div class="cards-container">
+  {% for backlink in page.backlinks %}
+  {% if backlink.permalink != page.permalink %}
+  {% set backlink_path = backlink.permalink | split(pat="/") | slice(start=3, end=-1) | join(sep="/") %}
+  {% if backlink_path != "" %}
+  {% set nn_page = get_page(path=backlink_path ~ "/index.md") %}
+  {{ macro::card(nn_page=nn_page, relevance="") }}
+  {% endif %}
+  {% endif %}
+  {% endfor %}
+</div>
+{% endif %}
 <h2>相關文章推薦</h2>
 <div class="cards-container">
   {% set similar_posts = load_data(path="static/data/similar_posts.json") %}

diff --git a/templates/reading-note.html b/templates/reading-note.html
@@ -33,22 +33,22 @@ <h1>{{ page.title }}</h1>
     {% endfor %}
   </p>
   {% endif %}
-  {% if page.backlinks %}
-  <div>
-    <h2>提及本篇的文章</h2>
-    <ul class="root-ul">
-      {% for backlink in page.backlinks %}
-      {% if backlink.permalink != page.permalink %}
-      <li>
-        <a href="{{ backlink.permalink }}">{{ backlink.title }}</a>
-      </li>
-      {% endif %}
-      {% endfor %}
-    </ul>
-  </div>
-  {% endif %}
-  <br>
 </article>
+{% if page.backlinks %}
+<h2>提及本篇的文章</h2>
+<div class="cards-container">
+  {% for backlink in page.backlinks %}
+  {% if backlink.permalink != page.permalink %}
+  {% set backlink_path = backlink.permalink | split(pat="/") | slice(start=3, end=-1) | join(sep="/") %}
+  {% if backlink_path != "" %}
+  {% set nn_page = get_page(path=backlink_path ~ "/index.md") %}
+  {{ macro::card(nn_page=nn_page, relevance="") }}
+  {% endif %}
+  {% endif %}
+  {% endfor %}
+</div>
+<br>
+{% endif %}
 <h2>相關文章推薦</h2>
 <div class="cards-container">
   {% set similar_posts = load_data(path="static/data/similar_posts.json") %}