feat: related posts style & reading time estimate

Former-commit-id: 8825eab3e3e82e0719f58d013218e2b957a2b1c4

4 files changed, 41 insertions, 8 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 787c4e2d..932ce6a5 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -46,7 +46,7 @@
 }
 
 .card-page {
-    .referenced-articles {
+    .related-posts {
         h2 {
             font-size: 1.2rem;
             color: var(--secondary-text-color);
diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index 5ab58c85..01c0deff 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -82,3 +82,24 @@
         }
     }
 }
+
+/* related posts */
+
+.related-posts {
+    .related-posts-list {
+        padding-inline-start: 0;
+        .related-posts-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .related-post-subtitle {
+                color: var(--secondary-text-color);
+            }
+            .related-post-reading-time {
+                font-family: var(--mono-font-family);
+                color: var(--secondary-text-color);
+                font-size: 0.9rem;
+            }
+        }
+    }
+}
diff --git a/layouts/cards/single.html b/layouts/cards/single.html
index 58f712d3..0048ad4d 100644
--- a/layouts/cards/single.html
+++ b/layouts/cards/single.html
@@ -31,7 +31,7 @@
 
         {{- /* 如果有文章引用这个卡片，就显示它们 */ -}}
         {{ if gt (len $referencedBy) 0 }}
-        <section class="referenced-articles post-content">
+        <section class="related-posts post-content">
             <h2>引用了本卡片的文章</h2>
             <ul>
                 {{- range $referencedBy }}
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index 525db84d..efea94f0 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -47,16 +47,28 @@
         {{ end }}
       </div>
 
-    {{ partial "components/comment.html" . }}
+      <!-- Comment -->
+      {{ partial "components/comment.html" . }}
 
-    {{ with site.RegularPages.Related . | first 5 }}
-        <p>{{ T "relatedContent" }}</p>
-        <ul>
+      <!-- Related Posts -->
+      {{ with site.RegularPages.Related . | first 3 }}
+      <div class="related-posts post-content">
+        <h4>{{ T "relatedContent" }}</h4>
+        <ul class="related-posts-list">
         {{ range . }}
-            <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+            <li class="related-posts-item">
+                <a href="{{ .RelPermalink }}">
+                    {{ .LinkTitle }}
+                    {{ with .Params.subtitle }}
+                        <span class="related-post-subtitle">：{{ . }}</span>
+                    {{ end }}
+                </a>
+                <span class="related-post-reading-time">⏱️ {{ .ReadingTime }}min </span>
+            </li>
         {{ end }}
         </ul>
-    {{ end }}
+      </div>
+      {{ end }}
 
       <script src="/js/tocbot.min.js"></script>
       <script>