feat(books): 书封接口——schema cover 字段+书架卡封面渲染
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
This commit is contained in:
1 parent
2e33a7cd2e
commit
9702c9faf4
3 files changed
+45
-1
No files matched your search
@@ -69,3 +69,24 @@ public/media/my-post/clip.mp4 ← 文件放这里
|
|||||||
|
|
||||||
- push main → webhook 自动构建发布(约 10 秒)
|
- push main → webhook 自动构建发布(约 10 秒)
|
||||||
- 新文章要英文版:跑 `python3 scripts/translate/translate_posts.py`(幂等,代码块不会被翻译破坏的风险见其 README 注释;锁定润色用 frontmatter `locked: true`)
|
- 新文章要英文版:跑 `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
|
||||||
|
---
|
||||||
|
```
|
||||||
@@ -5,6 +5,7 @@ import { getCollection } from 'astro:content';
|
|||||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
import { t } from '../../i18n/ui';
|
import { t } from '../../i18n/ui';
|
||||||
import type { Locale } from '../../lib/locale';
|
import type { Locale } from '../../lib/locale';
|
||||||
|
import { Image } from 'astro:assets';
|
||||||
|
|
||||||
interface Props { locale?: Locale }
|
interface Props { locale?: Locale }
|
||||||
const { locale = 'zh' } = Astro.props;
|
const { locale = 'zh' } = Astro.props;
|
||||||
@@ -38,7 +39,18 @@ const L = {
|
|||||||
href={locale === 'en' ? `/en/archives/${b.id}/` : `/archives/${b.id}/`}
|
href={locale === 'en' ? `/en/archives/${b.id}/` : `/archives/${b.id}/`}
|
||||||
style={`--mood:${b.data.mood ?? 'var(--ink-4)'}`}
|
style={`--mood:${b.data.mood ?? 'var(--ink-4)'}`}
|
||||||
>
|
>
|
||||||
|
{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>
|
<i class="spine" aria-hidden="true"></i>
|
||||||
|
)}
|
||||||
<div class="bk-body">
|
<div class="bk-body">
|
||||||
<strong class="bk-title">{b.data.title}</strong>
|
<strong class="bk-title">{b.data.title}</strong>
|
||||||
{b.data.bookAuthor && <span class="bk-author">{b.data.bookAuthor}</span>}
|
{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);
|
transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
|
||||||
}
|
}
|
||||||
.book:hover { border-color: var(--mood); transform: translateY(-2px); }
|
.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 {
|
.spine {
|
||||||
flex: none;
|
flex: none;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
|
|||||||
@@ -66,7 +66,9 @@ export const collections = {
|
|||||||
// slug 即文件名(glob loader 默认按文件名生成 id)
|
// slug 即文件名(glob loader 默认按文件名生成 id)
|
||||||
posts: defineCollection({
|
posts: defineCollection({
|
||||||
loader: glob({ pattern: '**/*.md', base: './content/posts' }),
|
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({
|
postsEn: defineCollection({
|
||||||
loader: glob({ pattern: '**/*.md', base: './content/posts-en' }),
|
loader: glob({ pattern: '**/*.md', base: './content/posts-en' }),
|
||||||
|
|||||||
Reference in new issue
Block a user