博客卡片设计预览

🍊 高端果味博客卡片设计系统

颜色系统展示

🥭 芒果黄
#ffd700

🍑 桃子色
#ffb347

🍊 橙子色
#ff9500

🍓 草莓红
#ff6b9d

🍒 樱桃红
#e63946

🌊 西瓜红
#ff1744

🥝 猕猴桃绿
#7cb342

🫐 蓝莓蓝
#42a5f5

渐变效果展示

芒果-桃子渐变

桃子-橙子渐变

草莓-樱桃渐变

日落彩色渐变

设计特性

✨ 响应式布局

• 📱 桌面 (>768px)：自动 3+ 列网格
• 📱 平板 (480-768px)：自动 1-2 列网格
• 📱 手机 (<480px)：单列布局

🎯 交互效果

卡片悬停时会自动：

1. 向上浮起 (12px) ↑
2. 阴影增强 (0px → 20px)
3. 封面图放大 (1.0x → 1.08x)
4. 标题颜色渐变
5. 日期高亮显示

🏷️ 标签系统

标签根据位置自动着色：

• 第1个 → 🥭 芒果黄
• 第2个 → 🍓 草莓红
• 第3个 → 🍊 橙子色
• 第4+ → 🥝 猕猴桃绿

📸 封面图支持

# 在文章 Front Matter 中添加：
cover_image: /img/covers/my-image.jpg

# 或使用备用字段：
image: /img/my-image.jpg

🌙 深色模式

完整支持系统深色模式，颜色会自动调整以保持可读性。

快速开始

1. 为文章添加封面图

编辑你的文章 Markdown 文件：

---
layout: post
title: "我的精彩文章"
date: 2024-01-01 10:00 +0800
tags: [标签1, 标签2, 标签3]
excerpt: "这是文章摘要"
cover_image: /img/covers/my-article.jpg
---

2. 上传封面图

1. 将图片放在 /img/covers/ 目录
2. 推荐尺寸：1200×400px（16:9）
3. 推荐格式：JPG（<100KB）

3. 大功告成！

你的博客卡片现在已经是高端的果味设计了！🎉

自定义

修改颜色

编辑 _sass/_variables.scss：

--fruit-mango: #ffd700;  /* 改为你喜欢的颜色 */
--fruit-peach: #ffb347;
/* ... 等等 */

修改布局

编辑 _sass/_post-card.scss：

.posts {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));  /* 改变卡片宽度 */
  gap: var(--space-6);  /* 改变间距 */
}

修改交互

编辑 .post-card:hover：

&:hover {
  transform: translateY(-12px);  /* 改变上浮距离 */
  /* ... 等等 */
}

文件结构

blog/
├── blog.html                    # 博客主页（已更新）
├── _sass/
│   ├── _post-card.scss         # 卡片样式（重新设计）
│   ├── _variables.scss         # 颜色系统（已更新）
│   └── ...
├── img/
│   └── covers/                 # 封面图目录（需要创建）
│       ├── blog1.jpg
│       ├── blog2.jpg
│       └── README.md
├── BLOG_CARD_SETUP.md          # 完整使用指南
└── _posts/
    └── *.md                    # 你的博客文章

性能优化建议

1. 压缩图片：使用 TinyPNG、ImageOptim 等工具
2. 使用 WebP：更小的文件大小，更快的加载
3. 图片尺寸：推荐 1200×400px，大小 <100KB
4. 缓存：启用浏览器缓存以加快页面加载

浏览器兼容性

✅ Chrome/Edge 90+ ✅ Firefox 88+ ✅ Safari 14+ ✅ iOS Safari 14+ ✅ Android Chrome 90+

---

现在就去为你的文章添加美丽的封面图吧！ 🌟🍊🍓