feat: show related books in term page

4 files changed, 62 insertions, 39 deletions

diff --git a/assets/css/components/_library.scss b/assets/css/components/_library.scss
index a7e2de78..e95513a3 100644
--- a/assets/css/components/_library.scss
+++ b/assets/css/components/_library.scss
@@ -1,42 +1,40 @@
-#library {
-    .book-group {
-        --gap: 1rem;
-        display: flex;
-        align-items: center;
-        gap: var(--gap);
-        margin: 1rem 0;
-        flex-wrap: wrap;
-
-        .book {
-            --number-in-line: 4;
-            @media screen and (min-width: 768px) {
-                --number-in-line: 6;
-            }
+.book-group {
+    --gap: 1rem;
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+    margin: 1rem 0;
+    flex-wrap: wrap;
+
+    .book {
+        --number-in-line: 4;
+        @media screen and (min-width: 768px) {
+            --number-in-line: 6;
+        }
 
-            width: calc(100% / var(--number-in-line) - var(--gap));
-            &.badbook {
-                opacity: 0.5;
-                z-index: 0;
-                a { position: relative; }
-                a::before {
-                    position: absolute;
-                    z-index: 1;
-                    content: "";
-                    top: 25%;
-                    left: 25%;
-                    height: 50%;
-                    width: 50%;
-                    background-image: url('/img/thumbs-down.png');
-                    background-size: 100%;
-                    background-position: center;
-                    background-repeat: no-repeat;
-                }
+        width: calc(100% / var(--number-in-line) - var(--gap));
+        &.badbook {
+            opacity: 0.5;
+            z-index: 0;
+            a { position: relative; }
+            a::before {
+                position: absolute;
+                z-index: 1;
+                content: "";
+                top: 25%;
+                left: 25%;
+                height: 50%;
+                width: 50%;
+                background-image: url('/img/thumbs-down.png');
+                background-size: 100%;
+                background-position: center;
+                background-repeat: no-repeat;
             }
-            &.goodbook {
-                .book-cover {
-                    border-color: gold;
-                    box-shadow: 0 0.1rem 0.75rem goldenrod;
-                }
+        }
+        &.goodbook {
+            .book-cover {
+                border-color: gold;
+                box-shadow: 0 0.1rem 0.75rem goldenrod;
             }
         }
     }
@@ -106,7 +104,7 @@
         width: 100%;
     }
 
-    #library & {
+    #library &, .termlist-page & {
         @include framed;
 
         transition: transform 0.3s ease;
diff --git a/i18n/en.yml b/i18n/en.yml
index 531a36e9..1f0d2c9c 100644
--- a/i18n/en.yml
+++ b/i18n/en.yml
@@ -19,3 +19,6 @@ moreLinks:
   cards: 'All Cards'
 relatedContent: 'Related Content'
 backToHome: 'Back To Home'
+termPage:
+  cards: 'Cards about this topic'
+  books: "Books I've read about this topic"
diff --git a/i18n/zh.yml b/i18n/zh.yml
index d74e49b6..02dff479 100644
--- a/i18n/zh.yml
+++ b/i18n/zh.yml
@@ -20,3 +20,6 @@ moreLinks:
   cards: '所有卡片'
 relatedContent: '相关文章'
 backToHome: '返回首页'
+termPage:
+  cards: '相关卡片'
+  books: '我读过的相关书籍'
diff --git a/layouts/term/term.html b/layouts/term/term.html
index a042d583..7c89bde7 100644
--- a/layouts/term/term.html
+++ b/layouts/term/term.html
@@ -4,8 +4,10 @@
         {{ partial "components/breadcrumbs.html" . }}
 
         <div class="term-list">
+
+            <!-- Posts under this Term -->
             <ul class="term-list-posts">
-                {{ range where .Pages "Section" "ne" "cards" }}
+                {{ range where .Pages "Section" "not in" (slice "cards" "library") }}
                 <li>
                     <a href="{{ .RelPermalink }}" data-umami-event="Click Post Link from Category Page">
                         {{ .Title }}{{ with .Params.subtitle }}：<span class="posts-subtitle">{{. }}</span>
@@ -17,6 +19,9 @@
                 </li>
                 {{ end }}
             </ul>
+
+            <!-- Cards under this Term -->
+            <h2>{{ T "termPage.cards" }}</h2>
             <div class="term-list-cards cards-section outbox small">
                 {{ range where .Pages "Section" "eq" "cards" }}
                 <div class="card">
@@ -29,6 +34,20 @@
                 </div>
                 {{ end }}
             </div>
+
+            <!-- Books under this Term -->
+            <h2>{{ T "termPage.books" }}</h2>
+            <div class="book-group">
+              {{ range where .Pages "Section" "eq" "library" }}
+                <div class="book{{ if eq .Params.rating 1 }} badbook{{ end }}{{ if eq .Params.rating 5 }} goodbook{{ end }}">
+                    <a href="{{ .Permalink }}" class="book-cover" style="view-transition-name: book-{{ .Title }}">
+                        <img
+                            class="lazy" src="{{ .Params.cover }}"
+                            style="view-transition-name: book-{{ .File.UniqueID }}" />
+                    </a>
+                </div>
+              {{ end }}
+            </div>
         </div>
     </article>
     {{ partial "footer.html" . }}