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/.jpg`(建议宽 480px、高宽比约 2:3) +2. 对应文章 frontmatter 加一行:`cover: ./assets/books/.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)'}`} > - + {b.data.cover ? ( + {`${b.data.title} + ) : ( + + )}
{b.data.title} {b.data.bookAuthor && {b.data.bookAuthor}} @@ -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/.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/.jpg, + // frontmatter 写相对路径 ./assets/books/.jpg,走 Astro 图片优化管线) + schema: ({ image }) => postsSchema.extend({ cover: image().optional() }), }), postsEn: defineCollection({ loader: glob({ pattern: '**/*.md', base: './content/posts-en' }),