feat: add library section

Former-commit-id: 83f509dd79c381a8bb1254a5de14568c61bb92e2

8 files changed, 167 insertions, 35 deletions

diff --git a/assets/css/components/_library.scss b/assets/css/components/_library.scss
new file mode 100644
index 00000000..3b913214
--- /dev/null
+++ b/assets/css/components/_library.scss
@@ -0,0 +1,62 @@
+#library {
+    #library-content {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        margin: 1rem 0;
+
+        .book {
+            width: 25%;
+        }
+    }
+}
+
+.book-body {
+    line-height: 2;
+
+    hr {
+        clear: both
+    }
+
+    .book-title {
+        margin: 0.1rem 0;
+        a {
+            color: var(--text-color);
+            text-decoration: none;
+        }
+    }
+
+    .rating {
+        font-size: 0.9rem;
+        color: var(--secondary-text-color);
+    }
+}
+
+.book-cover {
+    display: block;
+    img {
+        display: block;
+        width: 100%;
+    }
+
+    #library & {
+        border: 0.2rem solid #fff;
+        box-shadow: 0 0.1rem 0.75rem rgba(0,0,0,0.2);
+
+        transition: transform 0.3s ease;
+        transform: rotate(3deg);
+        &:hover {
+            transform: rotate(0) translateY(-0.5rem) scale(1.1)
+        }
+    }
+
+    #book-page &, #post-content & {
+        margin: 0;
+        @media screen and (min-width: 768px) {
+            display: inxwline-block;
+            float: left;
+            width: 12rem;
+            margin: 0 2rem 1.2rem 0;
+        }
+    }
+}
diff --git a/assets/css/index.scss b/assets/css/index.scss
index 44b1229b..7129ae86 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -8,6 +8,7 @@
 @import 'components/comment';
 @import 'components/shortcodes';
 @import 'components/card';
+@import 'components/library';
 @import 'components/footer';
 @import 'components/animation';
 @import 'components/utility';
diff --git a/content/library/_index.md b/content/library/_index.md
new file mode 100644
index 00000000..5cd6321a
--- /dev/null
+++ b/content/library/_index.md
@@ -0,0 +1,3 @@
+---
+title: 图书馆
+---
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 13c56ada..f22f8d6b 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -57,7 +57,9 @@
         {{ end }}
       </div>
 
-      {{ partial "components/comment.html" . }}
+      {{ if in .Site.Params.mainSections .Type }}
+        {{ partial "components/comment.html" . }}
+      {{ end }}
 
       <script src="/js/tocbot.min.js"></script>
       <script>
diff --git a/layouts/library/section.html b/layouts/library/section.html
new file mode 100644
index 00000000..834717e7
--- /dev/null
+++ b/layouts/library/section.html
@@ -0,0 +1,14 @@
+{{ define "main" }}
+    {{ partial "header.html" . }}
+    <article id="library">
+      <div id="library-content">
+        {{- range .Pages }}
+        <div class="book">
+            <a href="{{ .Permalink }}" class="book-cover" style="view-transition-name: book-{{ .Title }}">
+                <img src="{{ .Params.cover }}" />
+            </a>
+        </div>
+        {{- end }}
+      </div>
+    </article>
+{{ end }}
diff --git a/layouts/library/single.html b/layouts/library/single.html
new file mode 100644
index 00000000..f633c5f4
--- /dev/null
+++ b/layouts/library/single.html
@@ -0,0 +1,25 @@
+{{ define "main" }}
+    <article id="book-page">
+        {{ partial "components/breadcrumbs.html" . }}
+        <div class="markdown-body book-body">
+            <div class="book-cover">
+                <img src="{{ .Params.cover }}" />
+            </div>
+            <h3 class="book-title">{{ .Title }}</h3>
+
+            {{- $rating := .Params.rating -}}
+            {{- $fullStars := math.Floor $rating -}}
+            <div class="rating">
+                <span>评分：</span>
+                {{- range seq $fullStars }}
+                <span class="star">★</span>
+                {{- end -}}
+            </div>
+
+            <div class="book-content">
+                {{ .Content }}
+            </div>
+        </div>
+        {{ partial "components/comment.html" . }}
+    </article>
+{{ end }}
diff --git a/layouts/partials/components/comment.html b/layouts/partials/components/comment.html
index ce240e45..f5ec95d3 100644
--- a/layouts/partials/components/comment.html
+++ b/layouts/partials/components/comment.html
@@ -1,34 +1,32 @@
-{{ if in .Site.Params.mainSections .Type }}
-  <div class="post-comments">
-      {{ with .Params.comments }}
-      <div class="static-comments">
-          <p class="static-comments-heading">{{ T "postPage.staticCommentsSectionHeader" }}</p>
-          {{ range . }}
-              <div class="static-comments-item">
-                  <div class="static-comments-item-header">
-                    <span class="comment-author">{{ .name }}</span>
-                    <span class="comment-date font-mono">{{ .date }}</span>
-                  </div>
-                  <div class="static-comments-item-content">
-                      {{ .content | safeHTML }}
-                  </div>
-                  <div class="static-comments-item-footer">
-                      {{ with .source }}
-                      <p class="font-mono">{{ T "postPage.originallyPostedOn" . }}</p>
-                      {{ end }}
-                  </div>
-              </div>
-          {{ end }}
-      </div>
-      {{ end }}
-      <div class="giscus">
-          <p style="text-align:center">
-              {{ T "postPage.commentNotLoaded" }}
-          </p>
-      </div>
-      {{ if eq .Site.Language.Lang "zh" }}
-      <p style="text-align:center">你也可以加入本站的 <a href="https://t.me/teaparty418" target="_blank">Telegram 群组</a>参与讨论</p>
-      {{ end }}
-      <script>loadGiscus()</script>
-  </div>
-{{ end }}
+<div class="post-comments">
+    {{ with .Params.comments }}
+    <div class="static-comments">
+        <p class="static-comments-heading">{{ T "postPage.staticCommentsSectionHeader" }}</p>
+        {{ range . }}
+            <div class="static-comments-item">
+                <div class="static-comments-item-header">
+                <span class="comment-author">{{ .name }}</span>
+                <span class="comment-date font-mono">{{ .date }}</span>
+                </div>
+                <div class="static-comments-item-content">
+                    {{ .content | safeHTML }}
+                </div>
+                <div class="static-comments-item-footer">
+                    {{ with .source }}
+                    <p class="font-mono">{{ T "postPage.originallyPostedOn" . }}</p>
+                    {{ end }}
+                </div>
+            </div>
+        {{ end }}
+    </div>
+    {{ end }}
+    <div class="giscus">
+        <p style="text-align:center">
+            {{ T "postPage.commentNotLoaded" }}
+        </p>
+    </div>
+    {{ if eq .Site.Language.Lang "zh" }}
+    <p style="text-align:center">你也可以加入本站的 <a href="https://t.me/teaparty418" target="_blank">Telegram 群组</a>参与讨论</p>
+    {{ end }}
+    <script>loadGiscus()</script>
+</div>
diff --git a/layouts/shortcodes/bookcard.html b/layouts/shortcodes/bookcard.html
new file mode 100644
index 00000000..fd7f81df
--- /dev/null
+++ b/layouts/shortcodes/bookcard.html
@@ -0,0 +1,27 @@
+{{- $book := .Site.GetPage (printf "library/%s" (.Get 0)) -}}
+
+{{- if $book }}
+    <div class="markdown-body book-body">
+        <div class="book-cover">
+            <img class="no-fancybox" src="{{ $book.Params.cover }}" />
+        </div>
+        <h3 class="book-title">
+            <a href="{{ $book.Permalink }}">{{ $book.Title }}</a>
+        </h3>
+
+        {{- $rating := $book.Params.rating -}}
+        {{- $fullStars := math.Floor $rating -}}
+        <div class="rating">
+            <span>评分：</span>
+            {{- range seq $fullStars }}
+            <span class="star">★</span>
+            {{- end -}}
+        </div>
+
+        <div class="book-content">
+            {{ $book.Content }}
+        </div>
+    </div>
+{{- else }}
+    <p style="color: red;">⚠️ 无法找到书评: {{ .Get 0 }}</p>
+{{- end }}