YouTube 视频卡片
在 MDX 文章中插入带本地封面的 YouTube 视频卡片
YouTube 组件用于在文章中插入一张 YouTube 视频卡片：展示封面、标题与作者，点击后在新标签页打开 YouTube 观看。
封面图与标题在构建时自动抓取并缓存到本地（public/youtube/），因此国内读者无需依赖 YouTube CDN 也能看到封面。
用法#
只需要传入视频 ID（即 watch?v= 后面那一段）：
import YouTube from '@/components/mdx/YouTube.astro'
<YouTube id='dQw4w9WgXcQ' />属性#
| 属性 | 类型 | 说明 |
|---|---|---|
id | string | 必填。YouTube 视频 ID。 |
title | string | 可选。构建时未能抓到标题时的兜底文本。 |
class | string | 可选。自定义类名。 |
工作原理#
- 构建脚本
scripts/cacheYoutube.mjs扫描src/content/**下所有<YouTube />用法，收集视频 ID。 - 对每个 ID 下载缩略图到
public/youtube/<id>.jpg（优先maxresdefault，失败回退hqdefault），并通过 oEmbed ↗ 抓取标题与作者。 - 抓取结果写入
src/data/youtube-metadata.json，组件在渲染时读取该文件取本地封面与标题。
该脚本已挂在 dev、build、check 流程前自动执行（与 paper:sync 并列）。如需强制刷新所有封面与元数据：
npm run youtube:sync -- --refresh