在过去几个月里,我为这个博客平台构建了一个全面的组件库。从最初嵌入 YouTube 视频的简单需求,发展成为一个拥有超过 25 个组件的强大工具包,涵盖从媒体预览到交互式代码展示的所有内容。本指南通过实现细节和真实示例展示每个组件。 --- ## 第一部分: 媒体预览组件 ### LinkPreview - 通用网站预览我们媒体系统的基础。它自动从任何 URL 提取 Open Graph 元数据并显示精美的预览卡片。 **实现亮点:** - 通过 Next.js API 路由进行服务器端元数据提取 - HTML 实体解码以正确显示文本 - 错误时优雅降级为简单链接 - 优化的图像加载与错误恢复 - 适配所有屏幕尺寸的响应式设计 **技术栈:** ```typescript // API 路由: /api/og-metadata/route.ts export async function GET(request: Request) { const { searchParams } = new URL(request.url); const url = searchParams.get('url'); const response = await fetch(url); const html = await response.text(); // 提取 Open Graph 标签 const metadata = extractOGTags(html); return Response.json(metadata); } ``` **用法:** ```jsx ``` --- ### YouTubePreview - 智能视频嵌入 YouTube 视频配有自定义缩略图、自动标题获取和点击播放功能。 **自动获取标题(最新增强功能):** **主要功能:** - 带有正宗 YouTube 播放按钮覆盖层的自定义缩略图 - 使用 YouTube oEmbed API 自动获取视频标题 - 支持多种 URL 格式(youtube.com、youtu.be、embed URLs) - 懒加载以提高页面加载性能 - 在所有设备上保持响应式 16:9 宽高比 **实现细节:** 组件从各种 YouTube URL 格式中提取视频 ID,并使用 oEmbed API 获取元数据: ```typescript const extractVideoId = (url: string): string | null => { const patterns = [ /(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\n?#]+)/, /youtube\.com\/embed\/([^&\n?#]+)/, ]; for (const pattern of patterns) { const match = url.match(pattern); if (match) return match[1]; } return null; }; // 使用 oEmbed 获取标题 const response = await fetch( `https://www.youtube.com/oembed?url=${encodeURIComponent(url)}&format=json` ); const data = await response.json(); const title = data.title; ``` **用法:** ```jsx ``` --- ### SpotifyPreview - 音乐集成嵌入 Spotify 歌曲、专辑、播放列表和播客,配有官方播放器集成。 **智能功能:** - 支持所有 Spotify 内容类型:歌曲、专辑、播放列表、播客、节目 - 基于内容类型的智能高度调整 - 支持 URL 和 Spotify URI 格式 - 与 Spotify 官方嵌入播放器直接集成 **智能默认设置:** - 歌曲和剧集: 152px 高度 - 专辑和播放列表: 352px 高度 - 节目: 232px 高度 - 可自定义高度覆盖 **实现:** ```typescript const extractSpotifyId = (url: string) => { // 处理 URL 和 URI if (url.startsWith('spotify:')) { const [, type, id] = url.split(':'); return { type, id }; } const match = url.match(/\/([a-z]+)\/([a-zA-Z0-9]+)/); if (match) return { type: match[1], id: match[2] }; return null; }; const getHeight = (type: string) => { switch (type) { case 'track': case 'episode': return 152; case 'album': case 'playlist': return 352; case 'show': return 232; default: return 380; } }; ``` **用法:** ```jsx ``` --- ### GitHubRepoCard - 仓库展示显示实时 GitHub 仓库信息和实时统计数据的精美卡片。 **实时数据集成:** - 实时仓库统计(星标、分叉、关注) - 主要编程语言及颜色编码 - 所有者头像和仓库描述 - 主题标签显示(最多 5 个最相关的) - 直接链接到仓库 **技术实现:** ```typescript // 使用 GitHub API v3 const fetchRepoData = async (owner: string, repo: string) => { const response = await fetch( `https://api.github.com/repos/${owner}/${repo}`, { headers: { Accept: 'application/vnd.github.v3+json', // 可选: 添加 GitHub token 以获得更高的速率限制 // 'Authorization': `token ${process.env.GITHUB_TOKEN}` }, next: { revalidate: 3600 }, // 缓存 1 小时 } ); if (!response.ok) throw new Error('Repository not found'); return response.json(); }; ``` **功能:** - 优雅的骨架加载状态 - 私有/不存在仓库的错误处理 - 速率限制感知与优雅降级 - 缓存响应以最小化 API 调用 **用法:** ```jsx ``` --- ### TwitterPreview - 社交对话使用官方小部件集成嵌入 Twitter/X 帖子。 **工程解决方案:** - **防止多次显示**: 修复了导致重复推文的脚本加载冲突 - **左对齐**: 通过左对齐帖子改善视觉流 - **官方嵌入集成**: 使用 Twitter 的官方 widget.js - **主题支持**: 浅色和深色主题选项 **技术创新:** ```typescript useEffect(() => { // 防止重复脚本加载 if (window.twttr) { window.twttr.widgets.load(); return; } const script = document.createElement('script'); script.src = 'https://platform.twitter.com/widgets.js'; script.async = true; document.body.appendChild(script); return () => { // 清理以防止内存泄漏 if (isMounted.current) { isMounted.current = false; } }; }, []); ``` **用法:** ```jsx ``` --- ### InstagramPreview - 视觉故事嵌入 Instagram 帖子、短视频和 IGTV 内容。 **内容类型支持:** - 常规帖子 (`/p/`) - 短视频 (`/reel/`) - IGTV 内容 (`/tv/`) **实现:** ```typescript useEffect(() => { // 加载 Instagram 嵌入脚本 const script = document.createElement('script'); script.src = '//www.instagram.com/embed.js'; script.async = true; document.body.appendChild(script); if (window.instgrm) { window.instgrm.Embeds.process(); } }, []); ``` **用法:** ```jsx ``` --- ### LinkedInPreview - 专业网络 LinkedIn 个人资料卡片和帖子嵌入,配有官方集成。 **双重功能:** - **个人资料预览**: 带有 LinkedIn 品牌的自定义设计卡片 - **帖子嵌入**: 官方 LinkedIn 嵌入集成 **个人资料卡片功能:** - 自动用户名提取和格式化 - LinkedIn 品牌颜色(#0077B5)和官方徽标 - 干净、专业的布局与平滑过渡 - 直接链接到 LinkedIn 个人资料 **实现:** ```typescript const LinkedInProfileCard = ({ username }: { username: string }) => { return (

{username}

查看 LinkedIn 个人资料

); }; ``` **用法:** ```jsx ``` --- ### PDFViewer - 文档集成嵌入 PDF 文档,提供多个查看器后备选项。 **功能丰富的实现:** - 带完整工具栏的内联 PDF 查看 - 下载功能 - 多个查看器后备: 1. 浏览器原生 PDF 查看器 2. Google Docs 查看器 3. Mozilla PDF.js - 自定义高度支持 - 加载状态和全面的错误处理 **实现:** ```typescript const PDFViewer = ({ url, title, height = 600, showDownload = false }) => { const [viewerError, setViewerError] = useState(false); const embedUrl = viewerError ? `https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true` : url; return (

{showDownload && (

{title}

下载 PDF

)}

评论

发表评论