From d6e08a29f9958a97be4506bc83753ad5bb10b7ac Mon Sep 17 00:00:00 2001 From: wait4xx Date: Tue, 3 Nov 2026 12:15:50 +0800 Subject: [PATCH] =?UTF-8?q?feat(books):=20=E9=A2=84=E8=A7=88=E9=A1=B5?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=20D=20=E6=96=B9=E6=A1=88=EF=BC=88=E5=B0=81?= =?UTF-8?q?=E9=9D=A2=E7=BD=91=E6=A0=BC=20=C3=97=20=E6=8A=BD=E4=B9=A6?= =?UTF-8?q?=EF=BC=89=EF=BC=8CC=20=E6=94=B9=E7=BD=AE=E9=A1=B6=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E5=B1=95=E5=BC=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 验证: 构建 53 页 exit 0；Playwright 实测 C/D 各自唯一展开项 = 置顶书， D 5 格 / 3 列 / 置顶角标 1、1280 与 390 零横向溢出 Spec: none (预览页随选型迭代，正式改动在 spec/2026-11-02_blog-5i-fonts-polish) Co-authored-by: GLM-5.3 --- src/pages/books-preview.astro | 129 +++++++++++++++++++++++++++++++++- 1 file changed, 127 insertions(+), 2 deletions(-) diff --git a/src/pages/books-preview.astro b/src/pages/books-preview.astro index 5a6ac80..55e47d4 100644 --- a/src/pages/books-preview.astro +++ b/src/pages/books-preview.astro @@ -33,6 +33,15 @@ const firstPara = (body: string | undefined): string => { /** 竖排书脊的高度有限：中文书名超过 ~11 字就必然溢出，用确定性截断代替裁切 */ const clip = (t: string, n: number) => (t.length > n ? `${t.slice(0, n)}…` : t); +/** + * 置顶书目（用户 2026-11-03 的要求：「C 方案可以默认展开置顶的书目」）。 + * 真实来源是 frontmatter 的 `pinned: true`（与文章置顶同一字段、同一排序契约）。 + * 当前还没有书被置顶，预览里用最新一本演示该效果，并在页面上明示这是演示。 + */ +const pinnedBook = books.find((b) => b.data.pinned === true) ?? books[0]; +const pinnedId = pinnedBook?.id ?? ''; +const pinnedIsDemo = !books.some((b) => b.data.pinned === true); + const items = books.map((b) => ({ id: b.id, title: b.data.title, @@ -42,11 +51,14 @@ const items = books.map((b) => ({ mood: b.data.mood ?? 'var(--ink-4)', year: b.data.pubDate.getFullYear(), href: `/archives/${b.id}/`, + pinned: b.id === pinnedId, spineTitle: clip(b.data.title, 11), spineAuthor: clip(b.data.bookAuthor ?? '', 4), short: clip(b.data.title, 3), })); const years = [...new Set(items.map((i) => i.year))].sort((a, b) => b - a); + + const withCover = items.filter((i) => i.cover).length; --- @@ -55,13 +67,21 @@ const withCover = items.filter((i) => i.cover).length;

书架改版：三个方案

共 {items.length} 本书，其中 {withCover} 本有封面图。三个方案用同一份数据渲染， - 看完告诉我选哪个（回「A」「B」或「C」即可，也可以说「B 但标题字大一点」这类微调）。 + 看完告诉我选哪个（回「A」「B」「C」或「D」即可，也可以说「B 但标题字大一点」这类微调）。 + {pinnedIsDemo && ( + <> +
+ D 与 C 的「置顶默认展开」用最新一本做演示——真实使用时由该书的 + `pinned: true` 决定（后台书评编辑页有开关）。 + + )}

@@ -141,10 +161,11 @@ const withCover = items.filter((i) => i.cover).length; + +
+
+ D +

封面 + 抽书

+

+ 格子还是 B 的封面网格，但每格可以直接点开成「抽出来」的详情卡（原生 details，零 JS）； + 置顶的那本默认就是展开的，落页第一眼就有内容。 +

+
+ + {years.map((year) => ( +
+

{year} · {items.filter((i) => i.year === year).length} 本

+
    + {items.filter((i) => i.year === year).map((b) => ( +
  • +
    + + + {b.cover ? ( + {`${b.title} + ) : ( + +