文章封面功能演示

🖼️ 封面图片功能介绍

这是一篇演示博客封面图片功能的示例文章。你可以看到：

📋 在文章列表页面

• 封面图片会显示在文章卡片的顶部
• 16:9 宽高比的美观显示
• 悬停效果：图片会有轻微的缩放动画
• 自适应布局：有封面时左对齐，无封面时居中显示

📄 在文章详情页面

• 封面图片显示在文章标题上方
• 响应式设计：移动端高度为 256px，桌面端高度为 320px
• 圆角边框：与网站整体设计风格保持一致

🔧 如何添加封面图片

在文章的 frontmatter 中添加 ogImage 字段：

---
title: "你的文章标题"
description: "文章描述"
ogImage: "图片URL或本地图片路径"
# 其他字段...
---

支持的图片格式

1. 远程图片URL：

   ogImage: "https://example.com/image.jpg"

2. 本地图片文件：

   ogImage: "./images/cover.jpg"

📐 推荐规格

• 宽高比：16:9 (例如: 1600x900px)
• 最小尺寸：800x450px
• 文件大小：< 500KB
• 格式：JPG, PNG, WebP

🎨 设计特色

卡片样式

• ✅ 优雅的悬停效果
• ✅ 平滑的过渡动画
• ✅ 阴影提升视觉层次
• ✅ 自适应文本对齐

详情页样式

• ✅ 全宽度封面展示
• ✅ 响应式高度调整
• ✅ 优化的加载策略
• ✅ 无障碍访问支持

🌟 使用建议

1. 选择高质量图片：确保图片清晰且与文章内容相关
2. 注意加载速度：使用合适的图片大小和格式
3. 考虑移动端：确保图片在小屏幕上也能良好显示
4. 保持一致性：建议为重要文章添加封面，提升视觉体验

这个功能让你的博客更加生动有趣，提升读者的阅读体验！🚀