From d119d6b55506862cee1003e29848a45d8ddf4e05 Mon Sep 17 00:00:00 2001 From: wait4xx Date: Tue, 3 Nov 2026 11:55:33 +0800 Subject: [PATCH] =?UTF-8?q?feat(books):=20=E4=B9=A6=E6=9E=B6=E4=B8=89?= =?UTF-8?q?=E6=A1=88=E6=8C=89=E8=A7=86=E8=A7=89=E5=A4=8D=E6=A0=B8=E4=BF=AE?= =?UTF-8?q?=E8=AE=A2=E5=90=8E=E6=9B=B4=E6=96=B0=E9=A2=84=E8=A7=88=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 长标题/作者裁切、卡片参差、4+1 孤儿位、抽书页无展开暗示等缺陷已修， 用户可直接在 /books-preview/ 看修订版。 Spec: none (预览页随选型迭代，正式改动在 spec/2026-11-02_blog-5i-fonts-polish) Co-authored-by: GLM-5.3 --- src/pages/books-preview.astro | 102 +++++++++++++++++++++++++++------- 1 file changed, 83 insertions(+), 19 deletions(-) diff --git a/src/pages/books-preview.astro b/src/pages/books-preview.astro index 10ba73f..5a6ac80 100644 --- a/src/pages/books-preview.astro +++ b/src/pages/books-preview.astro @@ -31,6 +31,8 @@ const firstPara = (body: string | undefined): string => { return line.replace(/[*_>`[\]]/g, '').slice(0, 60); }; +/** 竖排书脊的高度有限：中文书名超过 ~11 字就必然溢出，用确定性截断代替裁切 */ +const clip = (t: string, n: number) => (t.length > n ? `${t.slice(0, n)}…` : t); const items = books.map((b) => ({ id: b.id, title: b.data.title, @@ -40,6 +42,9 @@ const items = books.map((b) => ({ mood: b.data.mood ?? 'var(--ink-4)', year: b.data.pubDate.getFullYear(), href: `/archives/${b.id}/`, + 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; @@ -74,8 +79,10 @@ const withCover = items.filter((i) => i.cover).length; {items.filter((i) => i.year === year).map((b) => (
  • - {b.title} - {b.author && {b.author}} + {b.spineTitle} + {b.spineAuthor && {b.spineAuthor}} + {/* 短标题脊上半段会空出一大块，用年份竖排填补（视觉复核：空脊读起来空洞） */} + {String(b.year).slice(2)}
    • ))} @@ -105,7 +112,8 @@ const withCover = items.filter((i) => i.cover).length; ) : (