🍊 果味卡片系统 - 快速参考卡

🎯 核心改动（3 分钟快速了解）

文件	改动	说明
`_sass/_variables.scss`	✅ 新增	+8种水果色 + 4种渐变
`_sass/_post-card.scss`	✅ 重设计	全新高端卡片样式
`blog.html`	✅ 更新	从列表改为卡片布局
`_posts/*.md`	✅ 部分更新	添加 `cover_image` 字段
`img/covers/`	✅ 新建	存放封面图
文档	✅ 新增	4份完整文档

🚀 最快启用（5 分钟）

步骤 1：准备封面图

推荐尺寸：1200×400px (16:9比例)
推荐格式：JPG (<100KB)
位置：/img/covers/

步骤 2：更新你的文章

---
layout: post
title: "文章名称"
cover_image: /img/covers/my-cover.jpg  # ← 添加这一行
---

步骤 3：完成！

bundle exec jekyll serve

🎨 8种果味颜色速查

🥭 #ffd700 - 芒果黄 (主色)
🍑 #ffb347 - 桃子色 (次主)
🍊 #ff9500 - 橙子色 (强调)
🍓 #ff6b9d - 草莓红 (标签1)
🍒 #e63946 - 樱桃红 (深调)
🌊 #ff1744 - 西瓜红 (突出)
🥝 #7cb342 - 猕猴桃绿 (标签2)
🫐 #42a5f5 - 蓝莓蓝 (补充)

✨ 交互效果一览

悬停卡片时：
┌─────────────────────────────┐
│  📸 图片放大 1.08x          │
│  ↑  卡片上浮 12px           │
│  ✨ 阴影增强                │
│  🎨 标题变彩色               │
│  ⏱️  日期高亮                │
└─────────────────────────────┘

📱 响应式尺寸

🖥️ >768px   → 3+ 列卡片
📱 480-768px → 1-2 列卡片
📱 <480px    → 1 列卡片

🏷️ 标签着色规则

post.tags[0] → 🥭 芒果黄
post.tags[1] → 🍓 草莓红
post.tags[2] → 🍊 橙子色
post.tags[3+] → 🥝 猕猴桃绿

📝 Front Matter 模板

---
layout: post
title: "你的标题"
date: 2024-01-01 12:00 +0800
tags: [tag1, tag2, tag3]
excerpt: "文章摘要"
cover_image: /img/covers/cover.jpg   # ← 新增字段
toc: true
---

🔧 常见定制

修改卡片颜色

// _sass/_variables.scss
--fruit-mango: #新颜色;

修改卡片大小

// _sass/_post-card.scss
.posts {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));  // 改大小
}

修改悬停效果

.post-card:hover {
  transform: translateY(-20px);  // 改数值
}

📚 文档路由

快速入门：
  ↓
  IMPLEMENTATION_SUMMARY.md (本文件)
  ↓
完整使用指南：
  ↓
  BLOG_CARD_SETUP.md
  ↓
深度技术文档：
  ↓
  TECH_DOCS.md
  ↓
样式预览：
  ↓
  blog-card-preview.md

✅ 检查清单

查看 IMPLEMENTATION_SUMMARY.md 了解改动
创建 /img/covers/ 目录
准备你的封面图
为文章添加 cover_image 字段
运行 bundle exec jekyll serve
访问 /blog 查看新设计
（可选）自定义颜色和效果

💡 提示

场景	解决方案
没有封面图	✅ 自动使用渐变，看起来仍很专业
想改颜色	✅ 编辑 `_variables.scss` 中的 `--fruit-*`
想改卡片大小	✅ 修改 `grid-template-columns` 的 `minmax` 值
样式不生效	✅ 清除 `.jekyll-cache` 后重建
图片不显示	✅ 检查路径是否正确和文件是否存在

🎯 核心 CSS 类

.posts                 → 卡片容器（网格布局）
.post-card             → 单个卡片（基础样式）
.card-cover            → 封面区域（背景图）
.card-content          → 内容区域（标题、标签等）
.card-tags             → 标签容器（自动着色）
.card-title            → 标题样式
.card-meta-time        → 日期样式
.card-excerpt          → 摘要样式
.card-footer           → 底部按钮区
.card-read-more        → 阅读按钮

🌙 深色模式

无需额外配置，系统会根据系统设置自动调整：

@media (prefers-color-scheme: dark) {
  /* 自动应用深色主题 */
}

📸 图片优化工具

工具	网址	特点
TinyPNG	tinypng.com	在线压缩，效果好
ImageOptim	imageoptim.com	Mac应用，批量处理
Squoosh	squoosh.app	Google工具，多格式

🎊 特性列表

✅ 8种水果主题色
✅ 响应式卡片网格
✅ 优雅的悬停动画
✅ 自动标签着色
✅ 深色模式支持
✅ 专业的封面图区域
✅ 高级阴影和渐变
✅ 无需JavaScript
✅ 浏览器兼容性好
✅ 性能优化

🔗 快速链接

最后一步：添加你的封面图，享受高端的果味卡片设计！ 🌟