feat: related posts style & reading time estimate

Former-commit-id: 8825eab3e3e82e0719f58d013218e2b957a2b1c4

2 files changed, 19 insertions, 7 deletions

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>