From 9702c9faf4a9652275bc46935963ead0d68753d4 Mon Sep 17 00:00:00 2001
From: wait4xx <X@alumni.nudt.edu.cn>
Date: Mon, 2 Nov 2026 09:12:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(books):=20=E4=B9=A6=E5=B0=81=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E2=80=94=E2=80=94schema=20cover=20=E5=AD=97=E6=AE=B5+?=
 =?UTF-8?q?=E4=B9=A6=E6=9E=B6=E5=8D=A1=E5=B0=81=E9=9D=A2=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

posts schema 加 cover?: image（image() 走 Astro 优化管线，仅阅读
轨消费）；BooksPage 有封面渲染 96/192 两档 Image、无封面优雅回
退现有色脊卡设计（零破坏）；目录 content/posts/assets/books/ 就位；
docs/写作指南.md 补用法节（路径/frontmatter 示例/尺寸建议）。

验证: pnpm astro build；E2E 34/34；现 5 本书全部回退色脊卡渲染
（封面貌 0，待用户加图）

Spec: none (书封接口预留，用户自行加图)

Co-authored-by: GLM-5.3
---
 docs/写作指南.md                     | 21 +++++++++++++++++++++
 src/components/pages/BooksPage.astro | 23 ++++++++++++++++++++++-
 src/content.config.ts                |  4 +++-
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/docs/写作指南.md b/docs/写作指南.md
index d447c23..ec366ec 100644
--- a/docs/写作指南.md
+++ b/docs/写作指南.md
@@ -69,3 +69,24 @@ public/media/my-post/clip.mp4      ← 文件放这里
 
 - push main → webhook 自动构建发布（约 10 秒）
 - 新文章要英文版：跑 `python3 scripts/translate/translate_posts.py`（幂等，代码块不会被翻译破坏的风险见其 README 注释；锁定润色用 frontmatter `locked: true`）
+
+
+## 书封图（/books 书架）
+
+阅读轨文章可选加书封：
+
+1. 图片放 `content/posts/assets/books/<slug>.jpg`（建议宽 480px、高宽比约 2:3）
+2. 对应文章 frontmatter 加一行：`cover: ./assets/books/<slug>.jpg`
+3. 构建自动优化出 96/192 两档；**没有 cover 的文章优雅回退现有色脊卡设计**，无需改任何代码
+
+示例 frontmatter：
+```yaml
+---
+title: "面纱"
+pubDate: 2024-06-01
+category: reading
+bookAuthor: "毛姆"
+mood: "#8a6f4a"
+cover: ./assets/books/mian-sha.jpg
+---
+```
diff --git a/src/components/pages/BooksPage.astro b/src/components/pages/BooksPage.astro
index a4a2d53..1ecd121 100644
--- a/src/components/pages/BooksPage.astro
+++ b/src/components/pages/BooksPage.astro
@@ -5,6 +5,7 @@ import { getCollection } from 'astro:content';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { t } from '../../i18n/ui';
 import type { Locale } from '../../lib/locale';
+import { Image } from 'astro:assets';
 
 interface Props { locale?: Locale }
 const { locale = 'zh' } = Astro.props;
@@ -38,7 +39,18 @@ const L = {
               href={locale === 'en' ? `/en/archives/${b.id}/` : `/archives/${b.id}/`}
               style={`--mood:${b.data.mood ?? 'var(--ink-4)'}`}
             >
-              <i class="spine" aria-hidden="true"></i>
+              {b.data.cover ? (
+                <Image
+                  src={b.data.cover}
+                  alt={`${b.data.title} 封面`}
+                  class="bk-cover"
+                  widths={[96, 192]}
+                  sizes="96px"
+                  loading="lazy"
+                />
+              ) : (
+                <i class="spine" aria-hidden="true"></i>
+              )}
               <div class="bk-body">
                 <strong class="bk-title">{b.data.title}</strong>
                 {b.data.bookAuthor && <span class="bk-author">{b.data.bookAuthor}</span>}
@@ -85,6 +97,15 @@ const L = {
     transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
   }
   .book:hover { border-color: var(--mood); transform: translateY(-2px); }
+  /* 书封（content/posts/assets/books/<slug>.jpg）：无图时回退色脊卡设计 */
+  .bk-cover {
+    width: 96px;
+    height: 100%;
+    object-fit: cover;
+    align-self: stretch;
+    flex: none;
+    border-right: 1px solid var(--paper-line);
+  }
   .spine {
     flex: none;
     width: 10px;
diff --git a/src/content.config.ts b/src/content.config.ts
index cc32a68..b86a462 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -66,7 +66,9 @@ export const collections = {
   // slug 即文件名（glob loader 默认按文件名生成 id）
   posts: defineCollection({
     loader: glob({ pattern: '**/*.md', base: './content/posts' }),
-    schema: postsSchema,
+    // cover：书封图（仅阅读轨消费；放 content/posts/assets/books/<slug>.jpg，
+    // frontmatter 写相对路径 ./assets/books/<slug>.jpg，走 Astro 图片优化管线）
+    schema: ({ image }) => postsSchema.extend({ cover: image().optional() }),
   }),
   postsEn: defineCollection({
     loader: glob({ pattern: '**/*.md', base: './content/posts-en' }),